diff --git a/dist/archives/2023/07/index.html b/dist/archives/2023/07/index.html
index ae243fb..007f3d4 100644
--- a/dist/archives/2023/07/index.html
+++ b/dist/archives/2023/07/index.html
@@ -307,7 +307,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -317,7 +317,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -339,23 +339,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/archives/2023/07/page/2/index.html b/dist/archives/2023/07/page/2/index.html
index f11aa3c..b107336 100644
--- a/dist/archives/2023/07/page/2/index.html
+++ b/dist/archives/2023/07/page/2/index.html
@@ -307,7 +307,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -317,7 +317,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -339,23 +339,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/archives/2023/07/page/3/index.html b/dist/archives/2023/07/page/3/index.html
index 7289bbc..2f3f083 100644
--- a/dist/archives/2023/07/page/3/index.html
+++ b/dist/archives/2023/07/page/3/index.html
@@ -136,7 +136,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -146,7 +146,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -168,23 +168,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/archives/2023/08/index.html b/dist/archives/2023/08/index.html
index 012f52e..db31433 100644
--- a/dist/archives/2023/08/index.html
+++ b/dist/archives/2023/08/index.html
@@ -131,7 +131,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -141,7 +141,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -163,23 +163,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/archives/2023/09/index.html b/dist/archives/2023/09/index.html
index 8c63b79..2a26f23 100644
--- a/dist/archives/2023/09/index.html
+++ b/dist/archives/2023/09/index.html
@@ -131,7 +131,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -141,7 +141,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -163,23 +163,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/archives/2023/12/index.html b/dist/archives/2023/12/index.html
index bc4741e..7447dfd 100644
--- a/dist/archives/2023/12/index.html
+++ b/dist/archives/2023/12/index.html
@@ -169,7 +169,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -179,7 +179,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -201,23 +201,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/archives/2023/index.html b/dist/archives/2023/index.html
index 698fd17..a36e486 100644
--- a/dist/archives/2023/index.html
+++ b/dist/archives/2023/index.html
@@ -307,7 +307,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -317,7 +317,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -339,23 +339,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/archives/2023/page/2/index.html b/dist/archives/2023/page/2/index.html
index 2be980f..e235e80 100644
--- a/dist/archives/2023/page/2/index.html
+++ b/dist/archives/2023/page/2/index.html
@@ -307,7 +307,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -317,7 +317,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -339,23 +339,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/archives/2023/page/3/index.html b/dist/archives/2023/page/3/index.html
index fd4a282..bd0cdd3 100644
--- a/dist/archives/2023/page/3/index.html
+++ b/dist/archives/2023/page/3/index.html
@@ -231,7 +231,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -241,7 +241,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -263,23 +263,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/archives/2024/01/index.html b/dist/archives/2024/01/index.html
index 80eadee..8045bcb 100644
--- a/dist/archives/2024/01/index.html
+++ b/dist/archives/2024/01/index.html
@@ -131,7 +131,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -141,7 +141,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -163,23 +163,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/archives/2024/02/index.html b/dist/archives/2024/02/index.html
index 5d2a6e1..2927fb8 100644
--- a/dist/archives/2024/02/index.html
+++ b/dist/archives/2024/02/index.html
@@ -113,13 +113,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-Beacon_api/" class="archive-article-date">
+      <a href="/blog/web-api-Beacon_API/" class="archive-article-date">
   <time class="dt-published" datetime="2024-02-28T23:21:58.000Z" itemprop="datePublished">Feb 29</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+      <a class="archive-article-title" href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
     </h1>
   
 
@@ -132,13 +132,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-Badging_api/" class="archive-article-date">
+      <a href="/blog/web-api-Badging_API/" class="archive-article-date">
   <time class="dt-published" datetime="2024-02-28T00:22:00.000Z" itemprop="datePublished">Feb 28</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-Badging_api/">Web API - Badging</a>
+      <a class="archive-article-title" href="/blog/web-api-Badging_API/">Web API - Badging</a>
     </h1>
   
 
@@ -188,7 +188,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -198,7 +198,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -220,23 +220,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/archives/2024/03/index.html b/dist/archives/2024/03/index.html
new file mode 100644
index 0000000..c517b2f
--- /dev/null
+++ b/dist/archives/2024/03/index.html
@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  
+  
+  <title>Archiv: 2024/3 | TaoLiuJun&#39;s Blog</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="Html&#x2F;Css&#x2F;JavaScript&#x2F;TypeScript的学习心得；React的学习心得；技术设计思想；生活随想；">
+<meta property="og:type" content="website">
+<meta property="og:title" content="TaoLiuJun&#39;s Blog">
+<meta property="og:url" content="https://taoliujun.github.io/blog/archives/2024/03/index.html">
+<meta property="og:site_name" content="TaoLiuJun&#39;s Blog">
+<meta property="og:description" content="Html&#x2F;Css&#x2F;JavaScript&#x2F;TypeScript的学习心得；React的学习心得；技术设计思想；生活随想；">
+<meta property="og:locale">
+<meta property="article:author" content="taoliujun">
+<meta property="article:tag" content="前端 JavaScript TypeScript React NodeJS">
+<meta name="twitter:card" content="summary">
+  
+    <link rel="alternate" href="/blog/atom.xml" title="TaoLiuJun's Blog" type="application/atom+xml">
+  
+  
+    <link rel="shortcut icon" href="/blog/favicon.png">
+  
+  
+    
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">
+
+  
+  
+<link rel="stylesheet" href="/blog/css/style.css">
+
+  
+    
+<link rel="stylesheet" href="/blog/fancybox/jquery.fancybox.min.css">
+
+  
+  
+<meta name="generator" content="Hexo 6.3.0"></head>
+
+<body>
+  <div id="container">
+    <div id="wrap">
+      <header id="header">
+  <div id="banner"></div>
+  <div id="header-outer" class="outer">
+    <div id="header-title" class="inner">
+      <h1 id="logo-wrap">
+        <a href="/blog/" id="logo">TaoLiuJun&#39;s Blog</a>
+      </h1>
+      
+        <h2 id="subtitle-wrap">
+          <a href="/blog/" id="subtitle">博客更新有延迟，在 https://github.com/taoliujun/blog/issues 获取最新文章和讨论</a>
+        </h2>
+      
+    </div>
+    <div id="header-inner" class="inner">
+      <nav id="main-nav">
+        <a id="main-nav-toggle" class="nav-icon"><span class="fa fa-bars"></span></a>
+        
+          <a class="main-nav-link" href="/blog/">Home</a>
+        
+          <a class="main-nav-link" href="/blog/archives">Archives</a>
+        
+      </nav>
+      <nav id="sub-nav">
+        
+        
+          <a class="nav-icon" href="/blog/atom.xml" title="RSS Feed"><span class="fa fa-rss"></span></a>
+        
+        <a class="nav-icon nav-search-btn" title="Suche"><span class="fa fa-search"></span></a>
+      </nav>
+      <div id="search-form-wrap">
+        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Suche"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://taoliujun.github.io/blog"></form>
+      </div>
+    </div>
+  </div>
+</header>
+
+      <div class="outer">
+        <section id="main">
+  
+  
+    
+    
+      
+      
+      <section class="archives-wrap">
+        <div class="archive-year-wrap">
+          <a href="/blog/archives/2024" class="archive-year">2024</a>
+        </div>
+        <div class="archives">
+    
+    <article class="archive-article archive-type-post">
+  <div class="archive-article-inner">
+    <header class="archive-article-header">
+      <a href="/blog/web-api-Broadcast_Channel_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-03-01T02:00:22.000Z" itemprop="datePublished">Mar 1</time>
+</a>
+      
+  
+    <h1 itemprop="name">
+      <a class="archive-article-title" href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
+    </h1>
+  
+
+    </header>
+  </div>
+</article>
+  
+    
+    
+    <article class="archive-article archive-type-post">
+  <div class="archive-article-inner">
+    <header class="archive-article-header">
+      <a href="/blog/web-api-Battery_Status_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-03-01T01:34:25.000Z" itemprop="datePublished">Mar 1</time>
+</a>
+      
+  
+    <h1 itemprop="name">
+      <a class="archive-article-title" href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
+    </h1>
+  
+
+    </header>
+  </div>
+</article>
+  
+  
+    </div></section>
+  
+
+
+</section>
+        
+          <aside id="sidebar">
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Kategorien</h3>
+    <div class="widget">
+      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/JavaScript/">JavaScript</a></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/React/">React</a></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/TypeScript/">TypeScript</a></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">工程化</a></li></ul>
+    </div>
+  </div>
+
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Tags</h3>
+    <div class="widget">
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+    </div>
+  </div>
+
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Tag Cloud</h3>
+    <div class="widget tagcloud">
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+    </div>
+  </div>
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Archiv</h3>
+    <div class="widget">
+      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/03/">March 2024</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/02/">February 2024</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/01/">January 2024</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/12/">December 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/09/">September 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/08/">August 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/07/">July 2023</a></li></ul>
+    </div>
+  </div>
+
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">letzter Beitrag</h3>
+    <div class="widget">
+      <ul>
+        
+          <li>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
+          </li>
+        
+      </ul>
+    </div>
+  </div>
+
+  
+</aside>
+        
+      </div>
+      <footer id="footer">
+  
+  <div class="outer">
+    <div id="footer-info" class="inner">
+      
+      &copy; 2024 taoliujun<br>
+      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
+    </div>
+  </div>
+</footer>
+
+    </div>
+    <nav id="mobile-nav">
+  
+    <a href="/blog/" class="mobile-nav-link">Home</a>
+  
+    <a href="/blog/archives" class="mobile-nav-link">Archives</a>
+  
+</nav>
+    
+
+
+<script src="/blog/js/jquery-3.6.4.min.js"></script>
+
+
+
+  
+<script src="/blog/fancybox/jquery.fancybox.min.js"></script>
+
+
+
+
+<script src="/blog/js/script.js"></script>
+
+
+
+
+
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/dist/archives/2024/index.html b/dist/archives/2024/index.html
index aa27426..4250616 100644
--- a/dist/archives/2024/index.html
+++ b/dist/archives/2024/index.html
@@ -91,6 +91,44 @@ <h2 id="subtitle-wrap">
         </div>
         <div class="archives">
     
+    <article class="archive-article archive-type-post">
+  <div class="archive-article-inner">
+    <header class="archive-article-header">
+      <a href="/blog/web-api-Broadcast_Channel_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-03-01T02:00:22.000Z" itemprop="datePublished">Mar 1</time>
+</a>
+      
+  
+    <h1 itemprop="name">
+      <a class="archive-article-title" href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
+    </h1>
+  
+
+    </header>
+  </div>
+</article>
+  
+    
+    
+    <article class="archive-article archive-type-post">
+  <div class="archive-article-inner">
+    <header class="archive-article-header">
+      <a href="/blog/web-api-Battery_Status_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-03-01T01:34:25.000Z" itemprop="datePublished">Mar 1</time>
+</a>
+      
+  
+    <h1 itemprop="name">
+      <a class="archive-article-title" href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
+    </h1>
+  
+
+    </header>
+  </div>
+</article>
+  
+    
+    
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
@@ -113,13 +151,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-Beacon_api/" class="archive-article-date">
+      <a href="/blog/web-api-Beacon_API/" class="archive-article-date">
   <time class="dt-published" datetime="2024-02-28T23:21:58.000Z" itemprop="datePublished">Feb 29</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+      <a class="archive-article-title" href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
     </h1>
   
 
@@ -132,13 +170,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-Badging_api/" class="archive-article-date">
+      <a href="/blog/web-api-Badging_API/" class="archive-article-date">
   <time class="dt-published" datetime="2024-02-28T00:22:00.000Z" itemprop="datePublished">Feb 28</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-Badging_api/">Web API - Badging</a>
+      <a class="archive-article-title" href="/blog/web-api-Badging_API/">Web API - Badging</a>
     </h1>
   
 
@@ -207,7 +245,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -217,7 +255,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -239,23 +277,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/archives/index.html b/dist/archives/index.html
index a10f991..e4db15e 100644
--- a/dist/archives/index.html
+++ b/dist/archives/index.html
@@ -94,13 +94,13 @@ <h2 id="subtitle-wrap">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-Background_Tasks_API/" class="archive-article-date">
-  <time class="dt-published" datetime="2024-02-29T19:56:11.000Z" itemprop="datePublished">Mar 1</time>
+      <a href="/blog/web-api-Broadcast_Channel_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-03-01T02:00:22.000Z" itemprop="datePublished">Mar 1</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+      <a class="archive-article-title" href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
     </h1>
   
 
@@ -113,13 +113,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-Beacon_api/" class="archive-article-date">
-  <time class="dt-published" datetime="2024-02-28T23:21:58.000Z" itemprop="datePublished">Feb 29</time>
+      <a href="/blog/web-api-Battery_Status_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-03-01T01:34:25.000Z" itemprop="datePublished">Mar 1</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+      <a class="archive-article-title" href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
     </h1>
   
 
@@ -132,13 +132,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-Badging_api/" class="archive-article-date">
-  <time class="dt-published" datetime="2024-02-28T00:22:00.000Z" itemprop="datePublished">Feb 28</time>
+      <a href="/blog/web-api-Background_Tasks_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-02-29T19:56:11.000Z" itemprop="datePublished">Mar 1</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-Badging_api/">Web API - Badging</a>
+      <a class="archive-article-title" href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
     </h1>
   
 
@@ -151,13 +151,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-readme/" class="archive-article-date">
-  <time class="dt-published" datetime="2024-02-28T00:10:53.000Z" itemprop="datePublished">Feb 28</time>
+      <a href="/blog/web-api-Beacon_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-02-28T23:21:58.000Z" itemprop="datePublished">Feb 29</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+      <a class="archive-article-title" href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
     </h1>
   
 
@@ -170,13 +170,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/snapshot-impact-on-coverage/" class="archive-article-date">
-  <time class="dt-published" datetime="2024-01-09T00:44:02.000Z" itemprop="datePublished">Jan 9</time>
+      <a href="/blog/web-api-Badging_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-02-28T00:22:00.000Z" itemprop="datePublished">Feb 28</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+      <a class="archive-article-title" href="/blog/web-api-Badging_API/">Web API - Badging</a>
     </h1>
   
 
@@ -186,26 +186,16 @@ <h1 itemprop="name">
   
     
     
-      
-        </div></section>
-      
-      
-      <section class="archives-wrap">
-        <div class="archive-year-wrap">
-          <a href="/blog/archives/2023" class="archive-year">2023</a>
-        </div>
-        <div class="archives">
-    
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/github-actions-sample-eslint-in-pull-request/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-12-28T19:56:49.000Z" itemprop="datePublished">Dec 29</time>
+      <a href="/blog/web-api-readme/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-02-28T00:10:53.000Z" itemprop="datePublished">Feb 28</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/github-actions-sample-eslint-in-pull-request/">7. GitHub Actions - 在pull request中执行eslint检测的工作流例子</a>
+      <a class="archive-article-title" href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
     </h1>
   
 
@@ -218,13 +208,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/react-zustand/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-12-12T22:46:26.000Z" itemprop="datePublished">Dec 13</time>
+      <a href="/blog/snapshot-impact-on-coverage/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-01-09T00:44:02.000Z" itemprop="datePublished">Jan 9</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/react-zustand/">React公共状态利器 - Zustand</a>
+      <a class="archive-article-title" href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
     </h1>
   
 
@@ -234,16 +224,26 @@ <h1 itemprop="name">
   
     
     
+      
+        </div></section>
+      
+      
+      <section class="archives-wrap">
+        <div class="archive-year-wrap">
+          <a href="/blog/archives/2023" class="archive-year">2023</a>
+        </div>
+        <div class="archives">
+    
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/changesets-in-monorepo/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-12-08T01:44:30.000Z" itemprop="datePublished">Dec 8</time>
+      <a href="/blog/github-actions-sample-eslint-in-pull-request/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-12-28T19:56:49.000Z" itemprop="datePublished">Dec 29</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/changesets-in-monorepo/">在monorepo中使用changesets</a>
+      <a class="archive-article-title" href="/blog/github-actions-sample-eslint-in-pull-request/">7. GitHub Actions - 在pull request中执行eslint检测的工作流例子</a>
     </h1>
   
 
@@ -256,13 +256,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/tsconfig-json/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-09-04T18:51:45.000Z" itemprop="datePublished">Sep 5</time>
+      <a href="/blog/react-zustand/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-12-12T22:46:26.000Z" itemprop="datePublished">Dec 13</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/tsconfig-json/">关于tsconfig.json，最后更新2023/11月...</a>
+      <a class="archive-article-title" href="/blog/react-zustand/">React公共状态利器 - Zustand</a>
     </h1>
   
 
@@ -275,13 +275,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/typescript-means/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-08-02T17:52:04.000Z" itemprop="datePublished">Aug 3</time>
+      <a href="/blog/changesets-in-monorepo/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-12-08T01:44:30.000Z" itemprop="datePublished">Dec 8</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/typescript-means/">TypeScript的小手段，最后更新2023/12月...</a>
+      <a class="archive-article-title" href="/blog/changesets-in-monorepo/">在monorepo中使用changesets</a>
     </h1>
   
 
@@ -317,7 +317,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -327,7 +327,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -349,23 +349,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/archives/page/2/index.html b/dist/archives/page/2/index.html
index 423bed3..1906b36 100644
--- a/dist/archives/page/2/index.html
+++ b/dist/archives/page/2/index.html
@@ -94,13 +94,13 @@ <h2 id="subtitle-wrap">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/ast-in-css-module-auto-match/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-26T00:03:32.000Z" itemprop="datePublished">Jul 26</time>
+      <a href="/blog/tsconfig-json/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-09-04T18:51:45.000Z" itemprop="datePublished">Sep 5</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/ast-in-css-module-auto-match/">AST 在 css module 自动匹配中的应用</a>
+      <a class="archive-article-title" href="/blog/tsconfig-json/">关于tsconfig.json，最后更新2023/11月...</a>
     </h1>
   
 
@@ -113,13 +113,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/react-usedeferredvalue/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:38:14.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/typescript-means/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-08-02T17:52:04.000Z" itemprop="datePublished">Aug 3</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/react-usedeferredvalue/">React useDeferredValue在性能优化中的使用</a>
+      <a class="archive-article-title" href="/blog/typescript-means/">TypeScript的小手段，最后更新2023/12月...</a>
     </h1>
   
 
@@ -132,13 +132,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/react-usetransition/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:37:42.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/ast-in-css-module-auto-match/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-26T00:03:32.000Z" itemprop="datePublished">Jul 26</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/react-usetransition/">React useTransition在性能优化中的使用</a>
+      <a class="archive-article-title" href="/blog/ast-in-css-module-auto-match/">AST 在 css module 自动匹配中的应用</a>
     </h1>
   
 
@@ -151,13 +151,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/react-performance%20optimization/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:37:20.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/react-usedeferredvalue/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:38:14.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/react-performance%20optimization/">React的性能优化项，最后更新2023年07月...</a>
+      <a class="archive-article-title" href="/blog/react-usedeferredvalue/">React useDeferredValue在性能优化中的使用</a>
     </h1>
   
 
@@ -170,13 +170,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/es6-destructuring/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:36:43.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/react-usetransition/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:37:42.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/es6-destructuring/">整理ES6：解构赋值</a>
+      <a class="archive-article-title" href="/blog/react-usetransition/">React useTransition在性能优化中的使用</a>
     </h1>
   
 
@@ -189,13 +189,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/es6-operator/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:35:25.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/react-performance%20optimization/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:37:20.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/es6-operator/">整理ES6：运算符</a>
+      <a class="archive-article-title" href="/blog/react-performance%20optimization/">React的性能优化项，最后更新2023年07月...</a>
     </h1>
   
 
@@ -208,13 +208,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/es6-symbol/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:35:00.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/es6-destructuring/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:36:43.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/es6-symbol/">整理ES6：聊一聊Symbol </a>
+      <a class="archive-article-title" href="/blog/es6-destructuring/">整理ES6：解构赋值</a>
     </h1>
   
 
@@ -227,13 +227,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/es6-set/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:34:36.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/es6-operator/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:35:25.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/es6-set/">整理ES6：Set真的挺好的</a>
+      <a class="archive-article-title" href="/blog/es6-operator/">整理ES6：运算符</a>
     </h1>
   
 
@@ -246,13 +246,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/es6-map/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:34:11.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/es6-symbol/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:35:00.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/es6-map/">整理ES6：Map真的挺好的</a>
+      <a class="archive-article-title" href="/blog/es6-symbol/">整理ES6：聊一聊Symbol </a>
     </h1>
   
 
@@ -265,13 +265,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/es6-proxy/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:33:50.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/es6-set/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:34:36.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/es6-proxy/">整理ES6：Proxy的应用场景</a>
+      <a class="archive-article-title" href="/blog/es6-set/">整理ES6：Set真的挺好的</a>
     </h1>
   
 
@@ -307,7 +307,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -317,7 +317,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -339,23 +339,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/archives/page/3/index.html b/dist/archives/page/3/index.html
index 3a693de..c29f927 100644
--- a/dist/archives/page/3/index.html
+++ b/dist/archives/page/3/index.html
@@ -94,13 +94,13 @@ <h2 id="subtitle-wrap">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/es6-reflect/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:32:57.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/es6-map/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:34:11.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/es6-reflect/">整理ES6：Reflect和Object的关系</a>
+      <a class="archive-article-title" href="/blog/es6-map/">整理ES6：Map真的挺好的</a>
     </h1>
   
 
@@ -113,13 +113,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/github-actions-runs/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:32:01.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/es6-proxy/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:33:50.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/github-actions-runs/">6. GitHub Actions - Managing workflow runs</a>
+      <a class="archive-article-title" href="/blog/es6-proxy/">整理ES6：Proxy的应用场景</a>
     </h1>
   
 
@@ -132,13 +132,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/github-actions-jobs/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:31:40.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/es6-reflect/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:32:57.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/github-actions-jobs/">5. GitHub Actions - Using jobs</a>
+      <a class="archive-article-title" href="/blog/es6-reflect/">整理ES6：Reflect和Object的关系</a>
     </h1>
   
 
@@ -151,13 +151,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/github-actions-workflows/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:31:08.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/github-actions-runs/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:32:01.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/github-actions-workflows/">4. GitHub Actions - Using workflows</a>
+      <a class="archive-article-title" href="/blog/github-actions-runs/">6. GitHub Actions - Managing workflow runs</a>
     </h1>
   
 
@@ -170,13 +170,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/github-actions-examples/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:30:34.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/github-actions-jobs/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:31:40.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/github-actions-examples/">3. GitHub Actions - Examples</a>
+      <a class="archive-article-title" href="/blog/github-actions-jobs/">5. GitHub Actions - Using jobs</a>
     </h1>
   
 
@@ -189,13 +189,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/github-actions-learn/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:29:53.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/github-actions-workflows/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:31:08.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/github-actions-learn/">2. GitHub Actions - Learn GitHub Actions</a>
+      <a class="archive-article-title" href="/blog/github-actions-workflows/">4. GitHub Actions - Using workflows</a>
     </h1>
   
 
@@ -208,13 +208,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/github-actions-quickstart/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:29:06.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/github-actions-examples/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:30:34.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/github-actions-quickstart/">1. GitHub Actions - Quickstart</a>
+      <a class="archive-article-title" href="/blog/github-actions-examples/">3. GitHub Actions - Examples</a>
     </h1>
   
 
@@ -227,13 +227,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/github-actions-intro/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:27:24.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/github-actions-learn/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:29:53.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/github-actions-intro/">0. GitHub Actions - Intro</a>
+      <a class="archive-article-title" href="/blog/github-actions-learn/">2. GitHub Actions - Learn GitHub Actions</a>
     </h1>
   
 
@@ -246,13 +246,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/write-components-elegantly-using-radix/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:25:58.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/github-actions-quickstart/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:29:06.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/write-components-elegantly-using-radix/">从Radix看如何优雅写组件</a>
+      <a class="archive-article-title" href="/blog/github-actions-quickstart/">1. GitHub Actions - Quickstart</a>
     </h1>
   
 
@@ -265,13 +265,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/es6-promise/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:21:12.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/github-actions-intro/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:27:24.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/es6-promise/">整理ES6：Promise的忽略点和几个方法的区别</a>
+      <a class="archive-article-title" href="/blog/github-actions-intro/">0. GitHub Actions - Intro</a>
     </h1>
   
 
@@ -307,7 +307,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -317,7 +317,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -339,23 +339,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/archives/page/4/index.html b/dist/archives/page/4/index.html
index d3d0dac..ad1cae5 100644
--- a/dist/archives/page/4/index.html
+++ b/dist/archives/page/4/index.html
@@ -91,6 +91,44 @@ <h2 id="subtitle-wrap">
         </div>
         <div class="archives">
     
+    <article class="archive-article archive-type-post">
+  <div class="archive-article-inner">
+    <header class="archive-article-header">
+      <a href="/blog/write-components-elegantly-using-radix/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:25:58.000Z" itemprop="datePublished">Jul 6</time>
+</a>
+      
+  
+    <h1 itemprop="name">
+      <a class="archive-article-title" href="/blog/write-components-elegantly-using-radix/">从Radix看如何优雅写组件</a>
+    </h1>
+  
+
+    </header>
+  </div>
+</article>
+  
+    
+    
+    <article class="archive-article archive-type-post">
+  <div class="archive-article-inner">
+    <header class="archive-article-header">
+      <a href="/blog/es6-promise/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:21:12.000Z" itemprop="datePublished">Jul 6</time>
+</a>
+      
+  
+    <h1 itemprop="name">
+      <a class="archive-article-title" href="/blog/es6-promise/">整理ES6：Promise的忽略点和几个方法的区别</a>
+    </h1>
+  
+
+    </header>
+  </div>
+</article>
+  
+    
+    
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
@@ -136,7 +174,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -146,7 +184,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -168,23 +206,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/ast-in-css-module-auto-match/index.html b/dist/ast-in-css-module-auto-match/index.html
index 480eb01..6267bce 100644
--- a/dist/ast-in-css-module-auto-match/index.html
+++ b/dist/ast-in-css-module-auto-match/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;21   AST 在 css module 自动匹配中的应用我们已经非常明白为什么在项目中要使用 css modules，可直接说到“自动匹配”有点莫名其妙，所以有必要介绍下为什么提出这个问题。 第一步，我想用官方的话来镇住大家。  css modules的官方描述：A CSS Module is a CS">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-26T00:03:32.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="ast">
 <meta property="article:tag" content="css module">
@@ -146,7 +146,7 @@ <h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/ast-in-css-module-auto-match/" data-id="clt84xvxl0000jaot4v3ac2xf" data-title="AST 在 css module 自动匹配中的应用" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/ast-in-css-module-auto-match/" data-id="clt8hne6g0000i8ohaup9dgy1" data-title="AST 在 css module 自动匹配中的应用" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -197,7 +197,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -207,7 +207,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -229,23 +229,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/categories/JavaScript/index.html b/dist/categories/JavaScript/index.html
index 22d2972..934b62c 100644
--- a/dist/categories/JavaScript/index.html
+++ b/dist/categories/JavaScript/index.html
@@ -94,13 +94,13 @@ <h2 id="subtitle-wrap">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-Background_Tasks_API/" class="archive-article-date">
-  <time class="dt-published" datetime="2024-02-29T19:56:11.000Z" itemprop="datePublished">Mar 1</time>
+      <a href="/blog/web-api-Broadcast_Channel_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-03-01T02:00:22.000Z" itemprop="datePublished">Mar 1</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+      <a class="archive-article-title" href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
     </h1>
   
 
@@ -113,13 +113,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-Beacon_api/" class="archive-article-date">
-  <time class="dt-published" datetime="2024-02-28T23:21:58.000Z" itemprop="datePublished">Feb 29</time>
+      <a href="/blog/web-api-Battery_Status_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-03-01T01:34:25.000Z" itemprop="datePublished">Mar 1</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+      <a class="archive-article-title" href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
     </h1>
   
 
@@ -132,13 +132,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-Badging_api/" class="archive-article-date">
-  <time class="dt-published" datetime="2024-02-28T00:22:00.000Z" itemprop="datePublished">Feb 28</time>
+      <a href="/blog/web-api-Background_Tasks_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-02-29T19:56:11.000Z" itemprop="datePublished">Mar 1</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-Badging_api/">Web API - Badging</a>
+      <a class="archive-article-title" href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
     </h1>
   
 
@@ -151,13 +151,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-readme/" class="archive-article-date">
-  <time class="dt-published" datetime="2024-02-28T00:10:53.000Z" itemprop="datePublished">Feb 28</time>
+      <a href="/blog/web-api-Beacon_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-02-28T23:21:58.000Z" itemprop="datePublished">Feb 29</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+      <a class="archive-article-title" href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
     </h1>
   
 
@@ -167,26 +167,16 @@ <h1 itemprop="name">
   
     
     
-      
-        </div></section>
-      
-      
-      <section class="archives-wrap">
-        <div class="archive-year-wrap">
-          <a href="/blog/archives/2023" class="archive-year">2023</a>
-        </div>
-        <div class="archives">
-    
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/ast-in-css-module-auto-match/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-26T00:03:32.000Z" itemprop="datePublished">Jul 26</time>
+      <a href="/blog/web-api-Badging_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-02-28T00:22:00.000Z" itemprop="datePublished">Feb 28</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/ast-in-css-module-auto-match/">AST 在 css module 自动匹配中的应用</a>
+      <a class="archive-article-title" href="/blog/web-api-Badging_API/">Web API - Badging</a>
     </h1>
   
 
@@ -199,13 +189,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/es6-destructuring/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:36:43.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/web-api-readme/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-02-28T00:10:53.000Z" itemprop="datePublished">Feb 28</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/es6-destructuring/">整理ES6：解构赋值</a>
+      <a class="archive-article-title" href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
     </h1>
   
 
@@ -215,16 +205,26 @@ <h1 itemprop="name">
   
     
     
+      
+        </div></section>
+      
+      
+      <section class="archives-wrap">
+        <div class="archive-year-wrap">
+          <a href="/blog/archives/2023" class="archive-year">2023</a>
+        </div>
+        <div class="archives">
+    
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/es6-operator/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:35:25.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/ast-in-css-module-auto-match/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-26T00:03:32.000Z" itemprop="datePublished">Jul 26</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/es6-operator/">整理ES6：运算符</a>
+      <a class="archive-article-title" href="/blog/ast-in-css-module-auto-match/">AST 在 css module 自动匹配中的应用</a>
     </h1>
   
 
@@ -237,13 +237,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/es6-symbol/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:35:00.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/es6-destructuring/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:36:43.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/es6-symbol/">整理ES6：聊一聊Symbol </a>
+      <a class="archive-article-title" href="/blog/es6-destructuring/">整理ES6：解构赋值</a>
     </h1>
   
 
@@ -256,13 +256,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/es6-set/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:34:36.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/es6-operator/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:35:25.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/es6-set/">整理ES6：Set真的挺好的</a>
+      <a class="archive-article-title" href="/blog/es6-operator/">整理ES6：运算符</a>
     </h1>
   
 
@@ -275,13 +275,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/es6-map/" class="archive-article-date">
-  <time class="dt-published" datetime="2023-07-05T22:34:11.000Z" itemprop="datePublished">Jul 6</time>
+      <a href="/blog/es6-symbol/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:35:00.000Z" itemprop="datePublished">Jul 6</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/es6-map/">整理ES6：Map真的挺好的</a>
+      <a class="archive-article-title" href="/blog/es6-symbol/">整理ES6：聊一聊Symbol </a>
     </h1>
   
 
@@ -317,7 +317,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -327,7 +327,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -349,23 +349,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/categories/JavaScript/page/2/index.html b/dist/categories/JavaScript/page/2/index.html
index 09129dc..a377747 100644
--- a/dist/categories/JavaScript/page/2/index.html
+++ b/dist/categories/JavaScript/page/2/index.html
@@ -91,6 +91,44 @@ <h2 id="subtitle-wrap">
         </div>
         <div class="archives">
     
+    <article class="archive-article archive-type-post">
+  <div class="archive-article-inner">
+    <header class="archive-article-header">
+      <a href="/blog/es6-set/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:34:36.000Z" itemprop="datePublished">Jul 6</time>
+</a>
+      
+  
+    <h1 itemprop="name">
+      <a class="archive-article-title" href="/blog/es6-set/">整理ES6：Set真的挺好的</a>
+    </h1>
+  
+
+    </header>
+  </div>
+</article>
+  
+    
+    
+    <article class="archive-article archive-type-post">
+  <div class="archive-article-inner">
+    <header class="archive-article-header">
+      <a href="/blog/es6-map/" class="archive-article-date">
+  <time class="dt-published" datetime="2023-07-05T22:34:11.000Z" itemprop="datePublished">Jul 6</time>
+</a>
+      
+  
+    <h1 itemprop="name">
+      <a class="archive-article-title" href="/blog/es6-map/">整理ES6：Map真的挺好的</a>
+    </h1>
+  
+
+    </header>
+  </div>
+</article>
+  
+    
+    
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
@@ -193,7 +231,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -203,7 +241,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -225,23 +263,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/categories/React/index.html b/dist/categories/React/index.html
index a761876..8718f31 100644
--- a/dist/categories/React/index.html
+++ b/dist/categories/React/index.html
@@ -207,7 +207,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -217,7 +217,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -239,23 +239,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/categories/TypeScript/index.html b/dist/categories/TypeScript/index.html
index 969d390..c94f4e9 100644
--- a/dist/categories/TypeScript/index.html
+++ b/dist/categories/TypeScript/index.html
@@ -150,7 +150,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -160,7 +160,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -182,23 +182,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git "a/dist/categories/\345\267\245\347\250\213\345\214\226/index.html" "b/dist/categories/\345\267\245\347\250\213\345\214\226/index.html"
index 3a34190..4a23b4d 100644
--- "a/dist/categories/\345\267\245\347\250\213\345\214\226/index.html"
+++ "b/dist/categories/\345\267\245\347\250\213\345\214\226/index.html"
@@ -317,7 +317,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -327,7 +327,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -349,23 +349,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git "a/dist/categories/\345\267\245\347\250\213\345\214\226/page/2/index.html" "b/dist/categories/\345\267\245\347\250\213\345\214\226/page/2/index.html"
index 033d505..411af97 100644
--- "a/dist/categories/\345\267\245\347\250\213\345\214\226/page/2/index.html"
+++ "b/dist/categories/\345\267\245\347\250\213\345\214\226/page/2/index.html"
@@ -136,7 +136,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -146,7 +146,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -168,23 +168,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/changesets-in-monorepo/index.html b/dist/changesets-in-monorepo/index.html
index 6954082..ff1d2ab 100644
--- a/dist/changesets-in-monorepo/index.html
+++ b/dist/changesets-in-monorepo/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;33   changesets是目前(2023年)最流行的(多)包管理和发布工具了，使用它可以方便的生成CHANGELOG、打版本号和发布。 项目链接：changesets 我这有个pnpm monorepo库，现在在用changesets管理发布版本了。 安装1pnpm add -Dw @changese">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-12-08T01:44:30.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="changesets">
 <meta name="twitter:card" content="summary">
@@ -148,7 +148,7 @@ <h3 id="发布"><a href="#发布" class="headerlink" title="发布"></a>发布</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/changesets-in-monorepo/" data-id="clt84xvxp0001jaot16w7army" data-title="在monorepo中使用changesets" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/changesets-in-monorepo/" data-id="clt8hne6j0001i8ohamwvdd40" data-title="在monorepo中使用changesets" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -199,7 +199,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -209,7 +209,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -231,23 +231,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/es6-destructuring/index.html b/dist/es6-destructuring/index.html
index f705b35..c3a6192 100644
--- a/dist/es6-destructuring/index.html
+++ b/dist/es6-destructuring/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;17   工作中经常会使用变量的解构赋值，随便举几个例子。 数组解构12345678const fruits &#x3D; [&quot;apple&quot;, &quot;pear&quot;, &quot;orange&quot;, &quot;banana&quot;, &quot;peach&quot;];">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-05T22:36:43.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="es6">
 <meta property="article:tag" content="javascript">
@@ -146,7 +146,7 @@ <h2 id="小技巧"><a href="#小技巧" class="headerlink" title="小技巧"></a
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-destructuring/" data-id="clt84xvxs0003jaot2s4a2okt" data-title="整理ES6：解构赋值" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/es6-destructuring/" data-id="clt8hne6m0003i8ohghnpfqye" data-title="整理ES6：解构赋值" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -197,7 +197,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -207,7 +207,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -229,23 +229,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/es6-map/index.html b/dist/es6-map/index.html
index 351b9c1..e84c3cb 100644
--- a/dist/es6-map/index.html
+++ b/dist/es6-map/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;13   在以前，想要维护一个集合去处理dom和其附加信息的关系，使用Array方式如下： 12345678910const list &#x3D; [  &amp;#123;    dom: dom1,    info: &amp;#123; area: 123 &amp;#125;,  &amp;#125;,  &amp;#123;    dom: d">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-05T22:34:11.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="es6">
 <meta property="article:tag" content="javascript">
@@ -137,7 +137,7 @@ <h2 id="注意点"><a href="#注意点" class="headerlink" title="注意点"></a
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-map/" data-id="clt84xvxt0005jaotgxzi6inn" data-title="整理ES6：Map真的挺好的" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/es6-map/" data-id="clt8hne6n0005i8ohal4i8rav" data-title="整理ES6：Map真的挺好的" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -188,7 +188,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -198,7 +198,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -220,23 +220,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/es6-operator/index.html b/dist/es6-operator/index.html
index 08ad488..d106ab6 100644
--- a/dist/es6-operator/index.html
+++ b/dist/es6-operator/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;16   链判断运算符?.非常方便的代替了传统的属性是否存在的判断，它有两个注意点：  左侧的对象是否为null或undefined，如果不是，则继续运算。 如果是的，就不再往下运算，而是返回undefined。  常见用法如下：  obj?.prop &#x2F;&#x2F; 对象属性是否存在 obj?.">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-05T22:35:25.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="es6">
 <meta property="article:tag" content="javascript">
@@ -137,7 +137,7 @@ <h2 id="Null-判断运算符"><a href="#Null-判断运算符" class="headerlink"
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-operator/" data-id="clt84xvxu0006jaotgwer6fef" data-title="整理ES6：运算符" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/es6-operator/" data-id="clt8hne6o0006i8oh1ydc6nlv" data-title="整理ES6：运算符" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -188,7 +188,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -198,7 +198,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -220,23 +220,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/es6-promise/index.html b/dist/es6-promise/index.html
index 8c07f8e..ff1a93e 100644
--- a/dist/es6-promise/index.html
+++ b/dist/es6-promise/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;2   Promise是业务开发中使用率最高的ES6方法了，但日常容易忽略几个点，以及记不得它几个方法的区别，现记录。 容易忽略的点 catch是then的语法糖，但是catch可以捕获then中的异常，而then的第二个回调函数不行。 如果没有使用catch捕获错误，那么Promise的错误不会传递到外层">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-05T22:21:12.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="es6">
 <meta property="article:tag" content="javascript">
@@ -172,7 +172,7 @@ <h1 id="AggregateError"><a href="#AggregateError" class="headerlink" title="Aggr
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-promise/" data-id="clt84xvxv0009jaotepjnf3w0" data-title="整理ES6：Promise的忽略点和几个方法的区别" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/es6-promise/" data-id="clt8hne6p0009i8ohdlk8aqi7" data-title="整理ES6：Promise的忽略点和几个方法的区别" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -223,7 +223,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -233,7 +233,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -255,23 +255,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/es6-proxy/index.html b/dist/es6-proxy/index.html
index f67c36b..d0e6c4e 100644
--- a/dist/es6-proxy/index.html
+++ b/dist/es6-proxy/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;12   Proxy拦截对象的操作，这些操作有13种：get、set、apply等。 get、set拦截对象的读取和赋值操作。如下场景，如果用户角色是管理员，那么期望在读取姓名的时候，补充上“管理员”角色名称，并且管理员的姓名不允许被修改。 123456789101112131415161718192021">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-05T22:33:50.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="es6">
 <meta property="article:tag" content="javascript">
@@ -138,7 +138,7 @@ <h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-proxy/" data-id="clt84xvxw000ajaot16m5fl0w" data-title="整理ES6：Proxy的应用场景" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/es6-proxy/" data-id="clt8hne6q000ai8oh3czc7dtv" data-title="整理ES6：Proxy的应用场景" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -189,7 +189,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -199,7 +199,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -221,23 +221,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/es6-reflect/index.html b/dist/es6-reflect/index.html
index b588f02..c53b79a 100644
--- a/dist/es6-reflect/index.html
+++ b/dist/es6-reflect/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;11   Reflect是什么在我若干年前阅读Reflect文档的那几天，我常闷被里自问，这是个什么玩意？随着时间的推移，我对它的理解越来越深刻，也越来越喜欢它。我想，这是一个值得深入研究的东西。(这句话是Copilot补充的，我觉得很有道理，就留下来了) Reflect是操作对象用的，我觉得Reflect">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-05T22:32:57.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="es6">
 <meta property="article:tag" content="javascript">
@@ -140,7 +140,7 @@ <h2 id="delete"><a href="#delete" class="headerlink" title="delete"></a>delete</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-reflect/" data-id="clt84xvxy000djaot35e97wk9" data-title="整理ES6：Reflect和Object的关系" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/es6-reflect/" data-id="clt8hne6s000di8ohhg557c68" data-title="整理ES6：Reflect和Object的关系" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -191,7 +191,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -201,7 +201,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -223,23 +223,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/es6-set/index.html b/dist/es6-set/index.html
index cd6ff70..ba29418 100644
--- a/dist/es6-set/index.html
+++ b/dist/es6-set/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;14   为什么用Set1234567891011121314151617181920&#x2F;&#x2F; Arraylet arr1 &#x3D; [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;];arr1 &#x3D; arr1.filter((element) &#x3D;&amp;">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-05T22:34:36.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="es6">
 <meta property="article:tag" content="javascript">
@@ -138,7 +138,7 @@ <h2 id="注意点"><a href="#注意点" class="headerlink" title="注意点"></a
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-set/" data-id="clt84xvxz000gjaot1ny4bgke" data-title="整理ES6：Set真的挺好的" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/es6-set/" data-id="clt8hne6t000gi8ohfc7n582s" data-title="整理ES6：Set真的挺好的" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -189,7 +189,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -199,7 +199,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -221,23 +221,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/es6-symbol/index.html b/dist/es6-symbol/index.html
index c8cb449..08f6199 100644
--- a/dist/es6-symbol/index.html
+++ b/dist/es6-symbol/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;15   我在5年前看完Symbol，就将它抛之脑后，直到最近才重新研究，看看它是什么样的宝藏。 先快速看下它是什么。 Symbol 基本用法12345678const a1 &#x3D; Symbol();const a2 &#x3D; Symbol(&quot;i am a&quot;);const a3 &#x3D; Symbol">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-05T22:35:00.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="es6">
 <meta property="article:tag" content="javascript">
@@ -144,7 +144,7 @@ <h2 id="Symbol-的全局注册"><a href="#Symbol-的全局注册" class="headerl
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-symbol/" data-id="clt84xvy0000kjaotckrf1agv" data-title="整理ES6：聊一聊Symbol " class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/es6-symbol/" data-id="clt8hne6u000ki8ohhd0t9mcp" data-title="整理ES6：聊一聊Symbol " class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -195,7 +195,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -205,7 +205,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -227,23 +227,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/github-actions-examples/index.html b/dist/github-actions-examples/index.html
index bb7c289..804e492 100644
--- a/dist/github-actions-examples/index.html
+++ b/dist/github-actions-examples/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;7   官方文档：https:&#x2F;&#x2F;docs.github.com&#x2F;en&#x2F;actions&#x2F;examples&#x2F;using-scripts-to-test-your-code-on-a-runner 官方描述了3个例子，用来检测文件中的broken，我读书少，就依葫芦画瓢写一个eslint检测增量文件的功能，完成">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-05T22:30:34.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="github actions">
 <meta name="twitter:card" content="summary">
@@ -127,7 +127,7 @@ <h1 class="p-name article-title" itemprop="headline name">
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-examples/" data-id="clt84xvy1000njaotb0p72f0f" data-title="3. GitHub Actions - Examples" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-examples/" data-id="clt8hne6w000ni8oh3793hs4v" data-title="3. GitHub Actions - Examples" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -178,7 +178,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -188,7 +188,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -210,23 +210,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/github-actions-intro/index.html b/dist/github-actions-intro/index.html
index 716f17a..24eabcd 100644
--- a/dist/github-actions-intro/index.html
+++ b/dist/github-actions-intro/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;4   官方文档：https:&#x2F;&#x2F;docs.github.com&#x2F;en&#x2F;actions 之前依葫芦画瓢使用了CI，并未对此做系统的了解，近期通读了一遍Github Actions文档，本系列文章是个人在 https:&#x2F;&#x2F;docs.github.com&#x2F;en&#x2F;actions 学习过程的杂乱记录，它是这样的：">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-05T22:27:24.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="github actions">
 <meta name="twitter:card" content="summary">
@@ -135,7 +135,7 @@ <h2 id="和CI的关系"><a href="#和CI的关系" class="headerlink" title="和C
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-intro/" data-id="clt84xvy2000qjaot7pv5e9k6" data-title="0. GitHub Actions - Intro" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-intro/" data-id="clt8hne6x000qi8ohhrsiazvn" data-title="0. GitHub Actions - Intro" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -186,7 +186,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -196,7 +196,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -218,23 +218,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/github-actions-jobs/index.html b/dist/github-actions-jobs/index.html
index 1c814bc..f43b086 100644
--- a/dist/github-actions-jobs/index.html
+++ b/dist/github-actions-jobs/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;9   官方文档：https:&#x2F;&#x2F;docs.github.com&#x2F;en&#x2F;actions&#x2F;using-jobs&#x2F;using-jobs-in-a-workflow 使用jobs jobs组成workflow，jobs默认并行执行，使用needs管理依赖执行。 job id命名要唯一，由字母、数字、-、_组成。">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-05T22:31:40.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="github actions">
 <meta name="twitter:card" content="summary">
@@ -137,7 +137,7 @@ <h2 id="默认值"><a href="#默认值" class="headerlink" title="默认值"></a
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-jobs/" data-id="clt84xvy3000sjaot3njb3qkh" data-title="5. GitHub Actions - Using jobs" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-jobs/" data-id="clt8hne6y000si8oh4dkm54lp" data-title="5. GitHub Actions - Using jobs" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -188,7 +188,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -198,7 +198,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -220,23 +220,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/github-actions-learn/index.html b/dist/github-actions-learn/index.html
index c65b411..834efc9 100644
--- a/dist/github-actions-learn/index.html
+++ b/dist/github-actions-learn/index.html
@@ -17,7 +17,7 @@
 <meta property="og:image" content="https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127958.png">
 <meta property="og:image" content="https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127692.png">
 <meta property="article:published_time" content="2023-07-05T22:29:53.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="github actions">
 <meta name="twitter:card" content="summary">
@@ -204,7 +204,7 @@ <h2 id="收费和限制"><a href="#收费和限制" class="headerlink" title="
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-learn/" data-id="clt84xvy3000ujaot0c50f62v" data-title="2. GitHub Actions - Learn GitHub Actions" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-learn/" data-id="clt8hne6z000ui8ohc8en5vzx" data-title="2. GitHub Actions - Learn GitHub Actions" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -255,7 +255,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -265,7 +265,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -287,23 +287,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/github-actions-quickstart/index.html b/dist/github-actions-quickstart/index.html
index 07d645b..c1ee8c5 100644
--- a/dist/github-actions-quickstart/index.html
+++ b/dist/github-actions-quickstart/index.html
@@ -16,7 +16,7 @@
 <meta property="og:image" content="https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281119773.png">
 <meta property="og:image" content="https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281120264.png">
 <meta property="article:published_time" content="2023-07-05T22:29:06.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="github actions">
 <meta name="twitter:card" content="summary">
@@ -136,7 +136,7 @@ <h1 class="p-name article-title" itemprop="headline name">
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-quickstart/" data-id="clt84xvy4000yjaot9qx41ilj" data-title="1. GitHub Actions - Quickstart" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-quickstart/" data-id="clt8hne70000yi8ohfpzzd528" data-title="1. GitHub Actions - Quickstart" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -187,7 +187,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -197,7 +197,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -219,23 +219,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/github-actions-runs/index.html b/dist/github-actions-runs/index.html
index 186639a..15ddeb3 100644
--- a/dist/github-actions-runs/index.html
+++ b/dist/github-actions-runs/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;10   官方文档：https:&#x2F;&#x2F;docs.github.com&#x2F;en&#x2F;actions&#x2F;using-workflows&#x2F;manually-running-a-workflow 手动执行设置event包含workflow_dispatch，可以手动触发，使用Github CLI、Browser都可以，文档中">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-05T22:32:01.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="github actions">
 <meta name="twitter:card" content="summary">
@@ -141,7 +141,7 @@ <h2 id="下载workflow归档"><a href="#下载workflow归档" class="headerlink"
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-runs/" data-id="clt84xvy50011jaot8v6xhhiy" data-title="6. GitHub Actions - Managing workflow runs" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-runs/" data-id="clt8hne710011i8oh7eok4ahc" data-title="6. GitHub Actions - Managing workflow runs" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -192,7 +192,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -202,7 +202,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -224,23 +224,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/github-actions-sample-eslint-in-pull-request/index.html b/dist/github-actions-sample-eslint-in-pull-request/index.html
index 4f4ad48..f4d35aa 100644
--- a/dist/github-actions-sample-eslint-in-pull-request/index.html
+++ b/dist/github-actions-sample-eslint-in-pull-request/index.html
@@ -18,7 +18,7 @@
 <meta property="og:image" content="https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e">
 <meta property="og:image" content="https://github.com/taoliujun/blog/assets/5689134/42396a84-b798-4f4e-9f39-5bf92a8acb15">
 <meta property="article:published_time" content="2023-12-28T19:56:49.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="github actions">
 <meta name="twitter:card" content="summary">
@@ -285,7 +285,7 @@ <h2 id="测试-3"><a href="#测试-3" class="headerlink" title="测试"></a>测
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-sample-eslint-in-pull-request/" data-id="clt84xvy60014jaotag4vedz0" data-title="7. GitHub Actions - 在pull request中执行eslint检测的工作流例子" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-sample-eslint-in-pull-request/" data-id="clt8hne720014i8ohgkmn24c9" data-title="7. GitHub Actions - 在pull request中执行eslint检测的工作流例子" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -336,7 +336,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -346,7 +346,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -368,23 +368,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/github-actions-workflows/index.html b/dist/github-actions-workflows/index.html
index b473b3f..6ab6a62 100644
--- a/dist/github-actions-workflows/index.html
+++ b/dist/github-actions-workflows/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;8   官方文档：https:&#x2F;&#x2F;docs.github.com&#x2F;en&#x2F;actions&#x2F;using-workflows&#x2F;about-workflows 原文很长，但随着对Github Actions的了解，笔记也会越来越短。 介绍更详细介绍了workflow的构成，没啥特别重要点。 触发再次复习下触发的几种">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-05T22:31:08.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="github actions">
 <meta name="twitter:card" content="summary">
@@ -141,7 +141,7 @@ <h2 id="缓存"><a href="#缓存" class="headerlink" title="缓存"></a>缓存</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-workflows/" data-id="clt84xvy70016jaotdutv2p3p" data-title="4. GitHub Actions - Using workflows" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-workflows/" data-id="clt8hne720016i8ohef8w3v84" data-title="4. GitHub Actions - Using workflows" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -192,7 +192,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -202,7 +202,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -224,23 +224,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/index.html b/dist/index.html
index 4e4bd57..58d7853 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -80,6 +80,135 @@ <h2 id="subtitle-wrap">
       <div class="outer">
         <section id="main">
   
+    <article id="post-web-api-Broadcast_Channel_API" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+  <div class="article-meta">
+    <a href="/blog/web-api-Broadcast_Channel_API/" class="article-date">
+  <time class="dt-published" datetime="2024-03-01T02:00:22.000Z" itemprop="datePublished">2024-03-01</time>
+</a>
+    
+  <div class="article-category">
+    <a class="article-category-link" href="/blog/categories/JavaScript/">JavaScript</a>
+  </div>
+
+  </div>
+  <div class="article-inner">
+    
+    
+      <header class="article-header">
+        
+  
+    <h1 itemprop="name">
+      <a class="p-name article-title" href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
+    </h1>
+  
+
+      </header>
+    
+    <div class="e-content article-entry" itemprop="articleBody">
+      
+        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/59">https://github.com/taoliujun/blog/issues/59</a></p>
+<!--hexo
+---
+url: web-api-Broadcast_Channel_API
+tags:
+  - webapi
+  - Broadcast Channel
+---
+-->
+
+<h1 id="Broadcast-Channel"><a href="#Broadcast-Channel" class="headerlink" title="Broadcast Channel"></a>Broadcast Channel</h1><blockquote>
+<p>MDN: <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API">https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API</a></p>
+</blockquote>
+<p><strong>Broadcast Channel</strong>可以在<strong>同源</strong>情况下，在一种浏览器的不同窗口、标签页、frame中简单通信。</p>
+<h2 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h2><h3 id="BroadcastChannel"><a href="#BroadcastChannel" class="headerlink" title="BroadcastChannel"></a>BroadcastChannel</h3><p>传入频道名称，返回实例，包含了<code>message</code>事件来监听消息、<code>postMessage</code>方法来发送信息。</p>
+<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-apis/Broadcast_Channel_API/index.html">https://taoliujun.github.io/example/web-apis/Broadcast_Channel_API/index.html</a></p>
+<ol>
+<li>打开两个Chrome窗口，查看日志：</li>
+</ol>
+<p><img src="https://github.com/taoliujun/blog/assets/5689134/8c0fdb6e-0318-49cd-8040-f90ca0738a13" alt="image"></p>
+
+      
+    </div>
+    <footer class="article-footer">
+      <a data-url="https://taoliujun.github.io/blog/web-api-Broadcast_Channel_API/" data-id="clt8hne7c002bi8ohfzyr9vej" data-title="Web API - Broadcast Channel" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      
+      
+      
+  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li></ul>
+
+    </footer>
+  </div>
+  
+</article>
+
+
+
+  
+    <article id="post-web-api-Battery_Status_API" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+  <div class="article-meta">
+    <a href="/blog/web-api-Battery_Status_API/" class="article-date">
+  <time class="dt-published" datetime="2024-03-01T01:34:25.000Z" itemprop="datePublished">2024-03-01</time>
+</a>
+    
+  <div class="article-category">
+    <a class="article-category-link" href="/blog/categories/JavaScript/">JavaScript</a>
+  </div>
+
+  </div>
+  <div class="article-inner">
+    
+    
+      <header class="article-header">
+        
+  
+    <h1 itemprop="name">
+      <a class="p-name article-title" href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
+    </h1>
+  
+
+      </header>
+    
+    <div class="e-content article-entry" itemprop="articleBody">
+      
+        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/58">https://github.com/taoliujun/blog/issues/58</a></p>
+<!--hexo
+---
+url: web-api-Battery_Status_API
+tags:
+  - webapi
+  - Battery Status
+---
+-->
+
+<h1 id="Battery-Status"><a href="#Battery-Status" class="headerlink" title="Battery Status"></a>Battery Status</h1><blockquote>
+<p>MDN: <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API">https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API</a></p>
+</blockquote>
+<p><strong>Battery Status</strong>可以查看电池信息、监听充电状态变化。</p>
+<h2 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h2><h3 id="BatteryManager"><a href="#BatteryManager" class="headerlink" title="BatteryManager"></a>BatteryManager</h3><p>设备电池对象。</p>
+<h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><h3 id="getBattery"><a href="#getBattery" class="headerlink" title="getBattery"></a>getBattery</h3><p>返回<code>Promise&lt;BatteryManager&gt;</code></p>
+<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-apis/Battery_Status_API/index.html">https://taoliujun.github.io/example/web-apis/Battery_Status_API/index.html</a></p>
+<ol>
+<li>拔掉笔记本充电线，再插上充电线，可以看到监听到充电状态变化。</li>
+</ol>
+<p><img src="https://github.com/taoliujun/blog/assets/5689134/9944f20b-95b2-4bc2-b2c6-01c7cdcdf80d" alt="image"></p>
+
+      
+    </div>
+    <footer class="article-footer">
+      <a data-url="https://taoliujun.github.io/blog/web-api-Battery_Status_API/" data-id="clt8hne7a0021i8ohdd78avcq" data-title="Web API - Battery Status" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      
+      
+      
+  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li></ul>
+
+    </footer>
+  </div>
+  
+</article>
+
+
+
+  
     <article id="post-web-api-Background_Tasks_API" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   <div class="article-meta">
     <a href="/blog/web-api-Background_Tasks_API/" class="article-date">
@@ -136,7 +265,7 @@ <h1 id="Background-Task"><a href="#Background-Task" class="headerlink" title="Ba
 </ul>
 </blockquote>
 <h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><h3 id="requestIdleCallback"><a href="#requestIdleCallback" class="headerlink" title="requestIdleCallback"></a>requestIdleCallback</h3><p>在空闲时间执行回调。</p>
-<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-apis/Background_Tasks_API/index.html">https://taoliujun.github.io/example/web-apis/Background_Tasks_API/index.html</a></p>
+<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-api/Background_Tasks_API/index.html">https://taoliujun.github.io/example/web-api/Background_Tasks_API/index.html</a></p>
 <ol>
 <li>点击几次”add task”按钮，此时没有任务在运行，发现每一秒都流畅打印出任务量。</li>
 </ol>
@@ -153,7 +282,7 @@ <h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/web-api-Background_Tasks_API/" data-id="clt84xvyd001xjaotciex7a91" data-title="Web API - Background Tasks" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/web-api-Background_Tasks_API/" data-id="clt8hne79001xi8oh5ietgq6s" data-title="Web API - Background Tasks" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -167,9 +296,9 @@ <h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</
 
 
   
-    <article id="post-web-api-Beacon_api" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+    <article id="post-web-api-Beacon_API" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   <div class="article-meta">
-    <a href="/blog/web-api-Beacon_api/" class="article-date">
+    <a href="/blog/web-api-Beacon_API/" class="article-date">
   <time class="dt-published" datetime="2024-02-28T23:21:58.000Z" itemprop="datePublished">2024-02-29</time>
 </a>
     
@@ -185,7 +314,7 @@ <h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</
         
   
     <h1 itemprop="name">
-      <a class="p-name article-title" href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+      <a class="p-name article-title" href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
     </h1>
   
 
@@ -196,7 +325,7 @@ <h1 itemprop="name">
         <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/53">https://github.com/taoliujun/blog/issues/53</a></p>
 <!--hexo
 ---
-url: web-api-Beacon_api
+url: web-api-Beacon_API
 tags:
   - webapi
   - Beacon
@@ -206,11 +335,11 @@ <h1 itemprop="name">
 <h1 id="Beacon"><a href="#Beacon" class="headerlink" title="Beacon"></a>Beacon</h1><blockquote>
 <p>MDN: <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API">https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API</a></p>
 </blockquote>
-<p><strong>Beacon</strong>用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。主要使用场景是发送统计数据。</p>
+<p><strong>Beacon</strong>用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。</p>
 <h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><h3 id="sendBeacon"><a href="#sendBeacon" class="headerlink" title="sendBeacon"></a>sendBeacon</h3><p>通过<em>POST</em>发送少量数据到服务器。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">navigator.<span class="title function_">sendBeacon</span>(url, data);</span><br></pre></td></tr></table></figure>
 
-<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-apis/Beacon_API/index.html">https://taoliujun.github.io/example/web-apis/Beacon_API/index.html</a></p>
+<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-api/Beacon_API/index.html">https://taoliujun.github.io/example/web-api/Beacon_API/index.html</a></p>
 <ol>
 <li>创建一个页面，放一个按钮用于发送<code>manual</code>统计数据：</li>
 </ol>
@@ -236,7 +365,7 @@ <h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/web-api-Beacon_api/" data-id="clt84xvyf0025jaot2f5xho76" data-title="Web API - Beacon" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/web-api-Beacon_API/" data-id="clt8hne7b0028i8oh6rf36zu9" data-title="Web API - Beacon" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -250,9 +379,9 @@ <h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</
 
 
   
-    <article id="post-web-api-Badging_api" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+    <article id="post-web-api-Badging_API" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   <div class="article-meta">
-    <a href="/blog/web-api-Badging_api/" class="article-date">
+    <a href="/blog/web-api-Badging_API/" class="article-date">
   <time class="dt-published" datetime="2024-02-28T00:22:00.000Z" itemprop="datePublished">2024-02-28</time>
 </a>
     
@@ -268,7 +397,7 @@ <h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</
         
   
     <h1 itemprop="name">
-      <a class="p-name article-title" href="/blog/web-api-Badging_api/">Web API - Badging</a>
+      <a class="p-name article-title" href="/blog/web-api-Badging_API/">Web API - Badging</a>
     </h1>
   
 
@@ -279,7 +408,7 @@ <h1 itemprop="name">
         <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/50">https://github.com/taoliujun/blog/issues/50</a></p>
 <!--hexo
 ---
-url: web-api-Badging_api
+url: web-api-Badging_API
 tags:
   - webapi
   - Badging
@@ -320,13 +449,13 @@ <h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</
 <h3 id="clearAppBadge"><a href="#clearAppBadge" class="headerlink" title="clearAppBadge"></a>clearAppBadge</h3><p>清空徽章。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">navigator.<span class="title function_">clearAppBadge</span>();</span><br></pre></td></tr></table></figure>
 
-<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-apis/Badging_API/index.html">https://taoliujun.github.io/example/web-apis/Badging_API/index.html</a></p>
+<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-api/Badging_API/index.html">https://taoliujun.github.io/example/web-api/Badging_API/index.html</a></p>
 <p>本示例代码较为简单，直接打开查看源码即可。</p>
 
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/web-api-Badging_api/" data-id="clt84xvye0021jaot1re21auq" data-title="Web API - Badging" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/web-api-Badging_API/" data-id="clt8hne7a0025i8ohhasq15oj" data-title="Web API - Badging" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -380,15 +509,17 @@ <h1 itemprop="name">
 <p>以 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API">https://developer.mozilla.org/en-US/docs/Web/API</a> 为基础，只实践W3C Recommendation状态的API。</p>
 </blockquote>
 <h2 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h2><ul>
-<li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/50">https://github.com/taoliujun/blog/issues/50</a></li>
-<li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/53">https://github.com/taoliujun/blog/issues/53</a></li>
-<li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/55">https://github.com/taoliujun/blog/issues/55</a></li>
+<li><input checked="" disabled="" type="checkbox"> #50 </li>
+<li><input checked="" disabled="" type="checkbox"> #53 </li>
+<li><input checked="" disabled="" type="checkbox"> #55 </li>
+<li><input checked="" disabled="" type="checkbox"> #58 </li>
+<li><input disabled="" type="checkbox"> #59</li>
 </ul>
 
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/web-api-readme/" data-id="clt84xvyg0028jaotdpc922u5" data-title="Web API 实践，最后更新2024/02月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/web-api-readme/" data-id="clt8hne7d002fi8oh4cqmc2up" data-title="Web API 实践，最后更新2024/02月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -464,7 +595,7 @@ <h2 id="方案"><a href="#方案" class="headerlink" title="方案"></a>方案</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/snapshot-impact-on-coverage/" data-id="clt84xvyb001njaotgf4c4r3y" data-title="snapshot对单测覆盖率的影响以及应对方案" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/snapshot-impact-on-coverage/" data-id="clt8hne76001ni8oh2e325nn8" data-title="snapshot对单测覆盖率的影响以及应对方案" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -678,7 +809,7 @@ <h2 id="测试-3"><a href="#测试-3" class="headerlink" title="测试"></a>测
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-sample-eslint-in-pull-request/" data-id="clt84xvy60014jaotag4vedz0" data-title="7. GitHub Actions - 在pull request中执行eslint检测的工作流例子" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-sample-eslint-in-pull-request/" data-id="clt8hne720014i8ohgkmn24c9" data-title="7. GitHub Actions - 在pull request中执行eslint检测的工作流例子" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -750,7 +881,7 @@ <h1 id="相比React-Context"><a href="#相比React-Context" class="headerlink" t
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/react-zustand/" data-id="clt84xvya001jjaotaulf9tew" data-title="React公共状态利器 - Zustand" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/react-zustand/" data-id="clt8hne75001ji8oh9i2l3g9s" data-title="React公共状态利器 - Zustand" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -832,7 +963,7 @@ <h3 id="发布"><a href="#发布" class="headerlink" title="发布"></a>发布</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/changesets-in-monorepo/" data-id="clt84xvxp0001jaot16w7army" data-title="在monorepo中使用changesets" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/changesets-in-monorepo/" data-id="clt8hne6j0001i8ohamwvdd40" data-title="在monorepo中使用changesets" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -846,381 +977,6 @@ <h3 id="发布"><a href="#发布" class="headerlink" title="发布"></a>发布</
 
 
   
-    <article id="post-tsconfig-json" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
-  <div class="article-meta">
-    <a href="/blog/tsconfig-json/" class="article-date">
-  <time class="dt-published" datetime="2023-09-04T18:51:45.000Z" itemprop="datePublished">2023-09-05</time>
-</a>
-    
-  <div class="article-category">
-    <a class="article-category-link" href="/blog/categories/TypeScript/">TypeScript</a>
-  </div>
-
-  </div>
-  <div class="article-inner">
-    
-    
-      <header class="article-header">
-        
-  
-    <h1 itemprop="name">
-      <a class="p-name article-title" href="/blog/tsconfig-json/">关于tsconfig.json，最后更新2023/11月...</a>
-    </h1>
-  
-
-      </header>
-    
-    <div class="e-content article-entry" itemprop="articleBody">
-      
-        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/23">https://github.com/taoliujun/blog/issues/23</a></p>
-<!--hexo
----
-url: tsconfig-json
-tags:
-  - typescript
----
--->
-
-<p><strong>截至TypeScript 5.2</strong>，<code>tsconfig.json</code>的配置项已经有百十个之多，它的某些选项甚至影响了项目的执行结果，所以尽量多的了解它们能让程序员更深的了解ts，写出优美语句让CTO赞赏，甚至避免写出bug。</p>
-<p>本issue的内容，只是个人在工作经验的影响下，对官方文档的内容理解。且内容有所欠缺，基本只记录了我工作涉及到的配置项，比如不怎么使用class，对class的配置项就略过了。</p>
-<p>官方文档：<a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig">https://www.typescriptlang.org/tsconfig</a></p>
-<hr>
-<!--hexo-->
-
-<h1 id="Top-Level"><a href="#Top-Level" class="headerlink" title="Top Level"></a>Top Level</h1><p>一些根配置项。</p>
-<h2 id="extends"><a href="#extends" class="headerlink" title="extends"></a>extends</h2><p>继承另一个配置文件，推荐的一些官方的配置文件来继承使用：<a target="_blank" rel="noopener" href="https://github.com/tsconfig/bases/tree/main/bases">https://github.com/tsconfig/bases/tree/main/bases</a></p>
-<h2 id="files-include-exclude"><a href="#files-include-exclude" class="headerlink" title="files, include, exclude"></a>files, include, exclude</h2><p>这几项指定了在项目里，被ts作用的文件集合。配置本身没什么好说的，记录下它们之间的关系。</p>
-<ul>
-<li>如果files指定了，那么include的默认值是<code>[]</code>，否则include的默认值是<code>**/*</code>；</li>
-<li>exclude用于排除include已指定的文件集合，但这些文件仍然是可以在项目里被引用的；</li>
-<li>exclude默认排除了<code>node_modules</code>、<code>outDir</code>；</li>
-</ul>
-<h2 id="references"><a href="#references" class="headerlink" title="references"></a>references</h2><p>用于项目文件夹分别打包，并且其中有缓存机制的参与，所以编译速度会快很多。</p>
-<p>如下项目结构：</p>
-<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><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">./interface</span><br><span class="line">./components</span><br><span class="line">./user</span><br><span class="line">./admin</span><br><span class="line">./tsconfig.json</span><br></pre></td></tr></table></figure>
-
-<p>在上面，user和admin文件夹分别是业务用户端、业务管理端，interface是接口定义，components是通用组件。在以往，改动了任何文件，都需要整个项目重新编译。而在使用references之后，将4个文件夹中放入对应的tsconfig.json并各有配置，在根tsconfig中指定好references的path后，tsc利用缓存机制，会只打包改动过的文件夹。</p>
-<!--hexo-->
-
-<h1 id="compilerOptions"><a href="#compilerOptions" class="headerlink" title="compilerOptions"></a>compilerOptions</h1><p>编译器配置项太多了，按作用拆分成几个评论来说。</p>
-<!--hexo-->
-
-<h1 id="compilerOptions-Type-Checking"><a href="#compilerOptions-Type-Checking" class="headerlink" title="compilerOptions - Type Checking"></a>compilerOptions - Type Checking</h1><p>和类型检查有关的配置项。</p>
-<h2 id="strict"><a href="#strict" class="headerlink" title="strict"></a>strict</h2><p>strict是一个严格模式的快捷开关，开启后会默认打开strictNullChecks、noImplicitAny等选项。并且随着typescript的升级，它可能会默认开启新增特性，列出截至5.2默认开启的选项：</p>
-<p><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#alwaysStrict">alwaysStrict</a><br><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#strictNullChecks">strictNullChecks</a><br><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#strictBindCallApply">strictBindCallApply</a><br><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#strictFunctionTypes">strictFunctionTypes</a><br><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#strictPropertyInitialization">strictPropertyInitialization</a><br><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#noImplicitAny">noImplicitAny</a><br><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#noImplicitThis">noImplicitThis</a><br><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#useUnknownInCatchVariables">useUnknownInCatchVariables</a></p>
-<h2 id="alwaysStrict"><a href="#alwaysStrict" class="headerlink" title="alwaysStrict"></a>alwaysStrict</h2><p>对所有文件启用javascript strict模式。注意，这和typescript strict不是同一个东西。参考：<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode</a></p>
-<h2 id="allowUnreachableCode"><a href="#allowUnreachableCode" class="headerlink" title="allowUnreachableCode"></a>allowUnreachableCode</h2><p>对未使用的代码的处理策略，可设置警告(默认)、错误、忽略。</p>
-<h2 id="allowUnusedLabels"><a href="#allowUnusedLabels" class="headerlink" title="allowUnusedLabels"></a>allowUnusedLabels</h2><p>对未使用的Label的处理策略，可设置警告(默认)、错误、忽略。</p>
-<h2 id="exactOptionalPropertyTypes"><a href="#exactOptionalPropertyTypes" class="headerlink" title="exactOptionalPropertyTypes"></a>exactOptionalPropertyTypes</h2><p>对可选项设置为undefined的策略。</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></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">    sex?: <span class="number">1</span> | <span class="number">0</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">man</span>: <span class="title class_">User</span> = &#123;&#125;;</span><br><span class="line">man.<span class="property">sex</span> = <span class="number">1</span>;</span><br><span class="line">man.<span class="property">sex</span> = <span class="number">0</span>;</span><br><span class="line">man.<span class="property">sex</span> = <span class="literal">undefined</span>;</span><br></pre></td></tr></table></figure>
-
-<p><code>User.sex</code>是一个可选项，它的预期值是<code>0|1|undefined</code>。但是呢，<code>sex</code>可选想表达的意思是未被定义，而不是值真的是undefined。那么开启本选项后，<code>man.sex = undefined</code>这个赋值语句会给一个报错。</p>
-<h2 id="noImplicitAny"><a href="#noImplicitAny" class="headerlink" title="noImplicitAny"></a>noImplicitAny</h2><p>对推导类型为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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">s</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(s.<span class="title function_">subtr</span>(<span class="number">3</span>));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
-
-<p>入参<code>s</code>推导为<code>any</code>，在选项开启情况下会报错。</p>
-<h2 id="noImplicitReturns"><a href="#noImplicitReturns" class="headerlink" title="noImplicitReturns"></a>noImplicitReturns</h2><p>对函数每个分支必须有return语句的策略。</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> <span class="title function_">fn</span>(<span class="params">s: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (s) &#123;</span><br><span class="line">        <span class="keyword">return</span> s.<span class="title function_">substring</span>(<span class="number">3</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="string">&#x27;nothing&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
-
-<p>开启后，ts报错认为<code>fn</code>函数的最后没有return语句。</p>
-<h2 id="noPropertyAccessFromIndexSignature"><a href="#noPropertyAccessFromIndexSignature" class="headerlink" title="noPropertyAccessFromIndexSignature"></a>noPropertyAccessFromIndexSignature</h2><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></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">    name?: <span class="built_in">string</span>;</span><br><span class="line">    [<span class="attr">key</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 class="keyword">const</span> <span class="attr">a</span>: <span class="title class_">User</span> = &#123;&#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="property">name</span>, a[<span class="string">&#x27;name&#x27;</span>], a.<span class="property">sex</span>, a[<span class="string">&#x27;sex&#x27;</span>]);</span><br></pre></td></tr></table></figure>
-
-<p>访问对象属性有<code>.</code>和<code>[index]</code>两个方式，访问未定义的属性，开启本选项后，在<code>a.sex</code>处会抛出一个错误。</p>
-<h2 id="noUncheckedIndexedAccess"><a href="#noUncheckedIndexedAccess" class="headerlink" title="noUncheckedIndexedAccess"></a>noUncheckedIndexedAccess</h2><p>未定义的对象属性值类型，给追加上<code>undefined</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><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_">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">propName</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">declare</span> <span class="keyword">const</span> <span class="attr">admin</span>: <span class="title class_">User</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// (property) User.name: string</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(admin.<span class="property">name</span>);</span><br><span class="line"><span class="comment">// (index) User[string]: string</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(admin.<span class="property">birthday</span>);</span><br></pre></td></tr></table></figure>
-
-<p>上例中，birthday的值类型是<code>string</code>，开启本项后，类型追加上<code>undefined</code>。</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="comment">// (index) User[string]: string | undefined</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(admin.<span class="property">birthday</span>);</span><br></pre></td></tr></table></figure>
-
-<h2 id="noUnusedLocals"><a href="#noUnusedLocals" class="headerlink" title="noUnusedLocals"></a>noUnusedLocals</h2><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">function</span> <span class="title function_">test</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> defaultModelID = <span class="number">23</span>;</span><br><span class="line"><span class="comment">// &#x27;defaultModelID&#x27; is declared but its value is never read.</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
-
-<h2 id="noUnusedParameters"><a href="#noUnusedParameters" class="headerlink" title="noUnusedParameters"></a>noUnusedParameters</h2><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">const</span> <span class="title function_">createDefaultKeyboard</span> = (<span class="params">modelID: <span class="built_in">number</span></span>) =&gt; &#123;</span><br><span class="line"><span class="comment">// &#x27;modelID&#x27; is declared but its value is never read.</span></span><br><span class="line">  <span class="keyword">const</span> defaultModelID = <span class="number">23</span>;</span><br><span class="line">  <span class="keyword">return</span> &#123; <span class="attr">type</span>: <span class="string">&quot;keyboard&quot;</span>, <span class="attr">modelID</span>: defaultModelID &#125;;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
-
-<h2 id="strictBindCallApply"><a href="#strictBindCallApply" class="headerlink" title="strictBindCallApply"></a>strictBindCallApply</h2><p>在使用函数的call、bind、apply时，是否要检查传入参数的类型。</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_">fn</span>(<span class="params">x: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> x;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> n1 = fn.<span class="title function_">call</span>(<span class="literal">undefined</span>, <span class="string">&#x27;10&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> n2 = fn.<span class="title function_">call</span>(<span class="literal">undefined</span>, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure>
-
-<p>如上代码中，第二个call中的入参false和string类型不匹配而报错。</p>
-<h2 id="strictFunctionTypes"><a href="#strictFunctionTypes" class="headerlink" title="strictFunctionTypes"></a>strictFunctionTypes</h2><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">type</span> <span class="title class_">GetUser</span> = <span class="function">(<span class="params">id: <span class="built_in">string</span> | <span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">any</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">test</span>(<span class="params">x: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> x;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">getUser</span>: <span class="title class_">GetUser</span> = test;</span><br></pre></td></tr></table></figure>
-
-<p>如上代码中，GetUser的入参类型<code>string | number</code>不能精确的分配给test的入参类型<code>string</code>。</p>
-<h2 id="strictNullChecks"><a href="#strictNullChecks" class="headerlink" title="strictNullChecks"></a>strictNullChecks</h2><p>是否校验<code>null</code>, <code>undefined</code>的属性访问？</p>
-<p>在以往的纯js项目中，容易忽略变量为undefined后仍然访问其属性的场景，比如在如下代码中，忽略了<code>a</code>为<code>undefined</code>的情况，导致运行时引发异常。</p>
-<figure class="highlight javascript"><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> a = arr1.<span class="title function_">find</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="property">name</span>)</span><br></pre></td></tr></table></figure>
-
-<p>本选项开启后，在静态检查时就提示开发者，变量可能是<code>null</code>, <code>undefined</code>，不能访问到<code>name</code>属性。</p>
-<h2 id="useUnknownInCatchVariables"><a href="#useUnknownInCatchVariables" class="headerlink" title="useUnknownInCatchVariables"></a>useUnknownInCatchVariables</h2><p>有时候我们并不知道catch的err类型是什么，它的类型由try里的实际运行分支决定，而如果当成any处理，那么访问它的属性是危险的。当开启本项后，err的类型是unknown，必须先限定其类型再安全的访问其属性，如：</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">try</span> &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">  <span class="keyword">if</span> (err <span class="keyword">instanceof</span> <span class="title class_">Error</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(err.<span class="property">message</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
-
-<!--hexo-->
-
-<h1 id="compilerOptions-Modules"><a href="#compilerOptions-Modules" class="headerlink" title="compilerOptions - Modules"></a>compilerOptions - Modules</h1><p>模块的处理策略。</p>
-<h2 id="allowArbitraryExtensions"><a href="#allowArbitraryExtensions" class="headerlink" title="allowArbitraryExtensions"></a>allowArbitraryExtensions</h2><p>ts默认支持了ts、js、cjs、jsx等模块的解析描述，通过<code>global.d.ts</code>的定义扩展，还可以支持css、jpg等模块的解析描述（你要自己保证webpack loader之类的解析器去真实支持加载这些模块）。而有时候，需要对特定模块文件（不管是否已全局定义过该模块的描述）做特别的描述，就可以开启该选项，并且创建一个<code>&#123;file basename&#125;.d.&#123;extension&#125;.ts</code>文件。</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></pre></td><td class="code"><pre><span class="line"><span class="comment">// test.ts</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 报错：Cannot find module &#x27;./a.jpk&#x27; or its corresponding type declarations.ts(2307)</span></span><br><span class="line"><span class="keyword">import</span> a <span class="keyword">from</span> <span class="string">&#x27;./a.jpk&#x27;</span>;</span><br><span class="line"><span class="comment">// doTest类型是any</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="title function_">doTest</span>());</span><br></pre></td></tr></table></figure>
-
-<p>开启该项，并增加<code>a.d.jpk.ts</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><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// a.d.jpk.ts</span></span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">const</span> <span class="attr">jpk</span>: &#123;</span><br><span class="line">    <span class="attr">doTest</span>: <span class="function">() =&gt;</span> <span class="built_in">void</span>;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> jpk;</span><br><span class="line"></span><br><span class="line"><span class="comment">// test.ts</span></span><br><span class="line"><span class="keyword">import</span> a <span class="keyword">from</span> <span class="string">&#x27;./a.jpk&#x27;</span>;</span><br><span class="line"><span class="comment">// doTest的类型：(property) doTest: () =&gt; void</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="title function_">doTest</span>());</span><br></pre></td></tr></table></figure>
-
-<h2 id="allowImportingTsExtensions"><a href="#allowImportingTsExtensions" class="headerlink" title="allowImportingTsExtensions"></a>allowImportingTsExtensions</h2><p>是否允许在import path带入ts、tsx等后缀名。</p>
-<p>ts项目需要编译成js代码后执行，如果我们使用ts-node来执行项目，可以启用<code>noEmit</code>来禁止这个编译行为，并且在项目源码中直接引入<code>.ts</code>来引入正确的、完整的路径。</p>
-<p>举例：</p>
-<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">import</span> &#123; wait &#125; <span class="keyword">from</span> <span class="string">&#x27;@/utils/utils.ts&#x27;</span>;</span><br></pre></td></tr></table></figure>
-
-<h2 id="allowUmdGlobalAccess"><a href="#allowUmdGlobalAccess" class="headerlink" title="allowUmdGlobalAccess"></a>allowUmdGlobalAccess</h2><p>&#x2F;&#x2F; TODO<br>和umd的声明有关系，不过我还不明确它的意义。见：<a target="_blank" rel="noopener" href="https://github.com/microsoft/TypeScript/pull/30776%E3%80%82">https://github.com/microsoft/TypeScript/pull/30776。</a></p>
-<h2 id="baseUrl"><a href="#baseUrl" class="headerlink" title="baseUrl"></a>baseUrl</h2><p>为解析无路径修饰的模块，设置一个基础路径。 什么叫做无路径修饰？就是该模块不是一个绝对或相对路径，如<code>import a from &#39;@/hello/world&#39;</code>。</p>
-<p>如果配置了该项，那么ts从该项指定的目录中开始查找模块，优先级也高于<code>node_modules</code>。</p>
-<h2 id="module"><a href="#module" class="headerlink" title="module"></a>module</h2><p>模块打包的策略，也就是指编译后的模块加载代码是require、import之类的语法。推荐大家阅读：<a target="_blank" rel="noopener" href="https://www.typescriptlang.org/docs/handbook/modules/theory.html">模块理论</a>。</p>
-<p>这个话题有点繁琐，也涉及到javascript的模块化amd、umd之类的历史，对于2023年这个时间点来说，关注下CommonJS、ESM即可，ESM还细分为ES2015、ES20XX等版本，他们的模块打包策略是一样的，区别是更高版本的ESM还支持了<code>dynamic imports</code>、<code>import.meta</code>和<code>top level await</code>之类的东西。</p>
-<p>补充的是，nodejs的模块打包策略也早就支持esm了，具体参照package.json的设置：<a target="_blank" rel="noopener" href="https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext">https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext</a></p>
-<h2 id="moduleResolution"><a href="#moduleResolution" class="headerlink" title="moduleResolution"></a>moduleResolution</h2><p>加载模块的策略，也就是指用什么策略去解析<code>import xxx from &#39;pathA&#39;</code>这里的<code>pathA</code>。<strong>注意区分和module的关系，module指的是项目的模块化是如何打包的，而moduleResolution指的是项目如何加载模块的</strong>。截至2023支持如下策略：</p>
-<ul>
-<li>node16&#x2F;nodenext，对于Node12+版本，本策略可自由根据import&#x2F;require选择合适的算法去加载模块。</li>
-<li>node10，对于Node12之前的版本，本策略只支持require算法加载模块。<strong>基本不用关心了</strong></li>
-<li>bundler，和node16一样，但不要求模块有后缀名。</li>
-<li>classic，早期的策略，不用管了。</li>
-</ul>
-<p><strong>这东西还要和module搭配使用，并且！并且！和package.json还有扯不清的关系。强烈建议阅读上文提到的<a target="_blank" rel="noopener" href="https://www.typescriptlang.org/docs/handbook/modules/theory.html">模块理论</a></strong></p>
-<p>另外，由于自己对这块的理解也不足深，还参考了这篇文章：<a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/621795173%E3%80%82">https://zhuanlan.zhihu.com/p/621795173。</a></p>
-<h2 id="moduleSuffixes"><a href="#moduleSuffixes" class="headerlink" title="moduleSuffixes"></a>moduleSuffixes</h2><p>模块搜索时的文件扩展名补充，比如以下配置项：</p>
-<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><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="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;compilerOptions&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;moduleSuffixes&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;.ios&quot;</span><span class="punctuation">,</span> <span class="string">&quot;.native&quot;</span><span class="punctuation">,</span> <span class="string">&quot;&quot;</span><span class="punctuation">]</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
-
-<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">import</span> * <span class="keyword">as</span> foo <span class="keyword">from</span> <span class="string">&quot;./foo&quot;</span>;</span><br></pre></td></tr></table></figure>
-<p>TypeScript 会按顺序寻找<code>./foo.ios.ts</code>、<code>./foo.native.ts</code>、<code>./foo.ts</code>。</p>
-<h2 id="paths"><a href="#paths" class="headerlink" title="paths"></a>paths</h2><p>在加载模块路径时，加入一个别名匹配。可以理解为webpack的alias。</p>
-<h2 id="resolveJsonModule"><a href="#resolveJsonModule" class="headerlink" title="resolveJsonModule"></a>resolveJsonModule</h2><p>允许加载json模块（文件）。</p>
-<h2 id="resolvePackageJsonExports"><a href="#resolvePackageJsonExports" class="headerlink" title="resolvePackageJsonExports"></a>resolvePackageJsonExports</h2><p>引用<code>node_modules</code>包时，强制遵循包package.json的exports字段的定义。还是那句话，阅读下模块理论那篇文章，不然很难理解前面这句话的信息量。</p>
-<h2 id="resolvePackageJsonImports"><a href="#resolvePackageJsonImports" class="headerlink" title="resolvePackageJsonImports"></a>resolvePackageJsonImports</h2><p>强制typescript使用package.json中imports字段的定义去加载<code>#</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></pre></td><td class="code"><pre><span class="line"><span class="comment">// package.json</span></span><br><span class="line"><span class="string">&quot;imports&quot;</span>: &#123;</span><br><span class="line">   <span class="string">&quot;#test/*&quot;</span>: <span class="string">&quot;./src/test/*&quot;</span></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></pre></td><td class="code"><pre><span class="line"><span class="comment">// src/test/1.ts</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> a = <span class="number">123</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></pre></td><td class="code"><pre><span class="line"><span class="comment">// src/b.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; a &#125; <span class="keyword">from</span> <span class="string">&#x27;#test/1&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;==a&#x27;</span>, a);</span><br></pre></td></tr></table></figure>
-
-<h2 id="rootDir"><a href="#rootDir" class="headerlink" title="rootDir"></a>rootDir</h2><p>指定项目的根目录，默认值可以理解为所有ts文件目录的最大集。例如：</p>
-<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><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">MyProj</span><br><span class="line">├── tsconfig.json</span><br><span class="line">├── core</span><br><span class="line">│   ├── a.ts</span><br><span class="line">│   ├── b.ts</span><br><span class="line">│   ├── sub</span><br><span class="line">│   │   ├── c.ts</span><br><span class="line">├── types.d.ts</span><br></pre></td></tr></table></figure>
-
-<p>如上的项目，rootDir的推断值是”core”。但是你可以手工指定为<code>tsconfig.json</code>的相对目录”，比如.”。</p>
-<p>另外，如果设置了<code>composite</code>，<code>rootDir</code>的默认值就是<code>tsconfig.json</code>文件的目录。</p>
-<h2 id="rootDirs"><a href="#rootDirs" class="headerlink" title="rootDirs"></a>rootDirs</h2><p>这个属性有点拽，它可以将多个目录虚拟成一个目录。这样在<code>import</code>的时候，就当成同一个目录就行啦。</p>
-<h2 id="typeRoots"><a href="#typeRoots" class="headerlink" title="typeRoots"></a>typeRoots</h2><p>类型定义文件的目录，默认所有@types目录都会被包含，包括node_modules下的@types目录。<br>如果指定了typeRoots，那么@types目录的相关规则会被忽略。</p>
-<h2 id="types"><a href="#types" class="headerlink" title="types"></a>types</h2><p>类型定义文件的具体目录，规则和<code>typeRoots</code>一样，不同点是<code>types</code>只指定具体目录，而非<code>*</code>这种匹配型目录。</p>
-<!--hexo-->
-
-<h1 id="compilerOptions-Emit"><a href="#compilerOptions-Emit" class="headerlink" title="compilerOptions - Emit"></a>compilerOptions - Emit</h1><p>编译策略。</p>
-<h2 id="outDir"><a href="#outDir" class="headerlink" title="outDir"></a>outDir</h2><p>编译文件放置的目录，默认和源码放同一个目录。</p>
-<h2 id="noEmit"><a href="#noEmit" class="headerlink" title="noEmit"></a>noEmit</h2><p>不要编译ts。</p>
-<p>项目中一般使用babel去编译，typescript仅用来做静态检查，所以设置noEmit就可以不生成js、sourcemap、declaration文件了。</p>
-<h2 id="noEmitOnError"><a href="#noEmitOnError" class="headerlink" title="noEmitOnError"></a>noEmitOnError</h2><p>顾名思义，在检查到错误的时候，不要继续编译了。</p>
-<h2 id="declaration-x2F-emitDeclarationOnly-x2F-declarationDir"><a href="#declaration-x2F-emitDeclarationOnly-x2F-declarationDir" class="headerlink" title="declaration &#x2F; emitDeclarationOnly &#x2F; declarationDir"></a>declaration &#x2F; emitDeclarationOnly &#x2F; declarationDir</h2><p>生成类型描述文件。</p>
-<p>这个是typescript最重要的几个特性之一了，为<code>.ts</code>文件生成类型定义文件<code>.d.ts</code>。如果不想同时生成<code>.js</code>文件，则使用<code>emitDeclarationOnly</code>。</p>
-<p>同时，可以使用<code>declarationDir</code>指定类型定义文件的生成目录。</p>
-<h2 id="declarationMap"><a href="#declarationMap" class="headerlink" title="declarationMap"></a>declarationMap</h2><p>给<code>.d.ts</code>文件增加一个map标识到<code>.ts</code>源文件，类似sourceMap。</p>
-<h2 id="sourceMap-x2F-inlineSourceMap-x2F-inlineSources-x2F-mapRoot-x2F-sourceRoot"><a href="#sourceMap-x2F-inlineSourceMap-x2F-inlineSources-x2F-mapRoot-x2F-sourceRoot" class="headerlink" title="sourceMap &#x2F; inlineSourceMap &#x2F; inlineSources &#x2F; mapRoot &#x2F; sourceRoot"></a>sourceMap &#x2F; inlineSourceMap &#x2F; inlineSources &#x2F; mapRoot &#x2F; sourceRoot</h2><p>typescript也是支持souce map的，这里就不解释sourcemap是什么了。它的相关配置项有：</p>
-<p>sourceMap，生成sourcemap文件。<br>inlineSourceMap，不生成sourcemap文件，而是直接把source内容写在.js文件中。<br>inlineSources，同inlineSourceMap。<br>mapRoot，指定sourceMap文件的路径，比如部署到网络中，可以指定为”<a target="_blank" rel="noopener" href="http://xxxx.com"./">http://xxxx.com"。</a><br>sourceRoot，指定source文件的路径，同mapRoot。</p>
-<h2 id="downlevelIteration"><a href="#downlevelIteration" class="headerlink" title="downlevelIteration"></a>downlevelIteration</h2><p>对迭代器的降级解析。</p>
-<p>在es6中增加了for&#x2F;of，spread等迭代特性，typescript在编译成es5的时候，要使用何种语法。文档中有个字符遍历的例子说明开启与否的迭代影响，这对业务计算结果是有影响的。</p>
-<p>不过项目中使用了babel之类的编译器，就不用担心这些影响了。</p>
-<h2 id="importHelpers"><a href="#importHelpers" class="headerlink" title="importHelpers"></a>importHelpers</h2><p>引入降级解析的包。</p>
-<p>将es6的某些特新编译成es5，如迭代器、异步语法等，会将模块中每个相应的代码都编译成降级代码，使得类似代码重复。如：</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">var</span> __read = (<span class="variable language_">this</span> &amp;&amp; <span class="variable language_">this</span>.<span class="property">__read</span>) || <span class="keyword">function</span> (<span class="params">o, n</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> m = <span class="keyword">typeof</span> <span class="title class_">Symbol</span> === <span class="string">&quot;function&quot;</span> &amp;&amp; o[<span class="title class_">Symbol</span>.<span class="property">iterator</span>];</span><br><span class="line">    <span class="keyword">if</span> (!m) <span class="keyword">return</span> o;</span><br><span class="line">    <span class="keyword">var</span> i = m.<span class="title function_">call</span>(o), r, ar = [], e;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">while</span> ((n === <span class="built_in">void</span> <span class="number">0</span> || n-- &gt; <span class="number">0</span>) &amp;&amp; !(r = i.<span class="title function_">next</span>()).<span class="property">done</span>) ar.<span class="title function_">push</span>(r.<span class="property">value</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">catch</span> (error) &#123; e = &#123; <span class="attr">error</span>: error &#125;; &#125;</span><br><span class="line">    <span class="keyword">finally</span> &#123;</span><br><span class="line">        <span class="keyword">try</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (r &amp;&amp; !r.<span class="property">done</span> &amp;&amp; (m = i[<span class="string">&quot;return&quot;</span>])) m.<span class="title function_">call</span>(i);</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">finally</span> &#123; <span class="keyword">if</span> (e) <span class="keyword">throw</span> e.<span class="property">error</span>; &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> ar;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> __spreadArray = (<span class="variable language_">this</span> &amp;&amp; <span class="variable language_">this</span>.<span class="property">__spreadArray</span>) || <span class="keyword">function</span> (<span class="params">to, <span class="keyword">from</span>, pack</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (pack || <span class="variable language_">arguments</span>.<span class="property">length</span> === <span class="number">2</span>) <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, l = <span class="keyword">from</span>.<span class="property">length</span>, ar; i &lt; l; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (ar || !(i <span class="keyword">in</span> <span class="keyword">from</span>)) &#123;</span><br><span class="line">            <span class="keyword">if</span> (!ar) ar = <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(<span class="keyword">from</span>, <span class="number">0</span>, i);</span><br><span class="line">            ar[i] = <span class="keyword">from</span>[i];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> to.<span class="title function_">concat</span>(ar || <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(<span class="keyword">from</span>));</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">arr</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> arr2 = <span class="title function_">__spreadArray</span>([<span class="number">1</span>], <span class="title function_">__read</span>(arr), <span class="literal">false</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
-
-<p>如果同时开启了<code>downlevelIteration</code>和<code>importHelpers</code>，并且安装了<code>tslib</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; __read, __spreadArray &#125; <span class="keyword">from</span> <span class="string">&quot;tslib&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">arr</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> arr2 = <span class="title function_">__spreadArray</span>([<span class="number">1</span>], <span class="title function_">__read</span>(arr), <span class="literal">false</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
-
-<h2 id="noEmitHelpers"><a href="#noEmitHelpers" class="headerlink" title="noEmitHelpers"></a>noEmitHelpers</h2><p>typescript处理迭代器、异步等的降级策略是生成一堆降级代码，也可以使用”importHelpers”和”tslib”来提取公共代码。但通过这个配置，可以自定义降级代码了。具体参照文档。</p>
-<h2 id="preserveConstEnums"><a href="#preserveConstEnums" class="headerlink" title="preserveConstEnums"></a>preserveConstEnums</h2><p>是否在编辑结果中移除<code>const enum</code>的定义。因为javascript没有enum概念，typescript会将enum的引用编译成具体的值。如：</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">const</span> <span class="keyword">enum</span> <span class="title class_">Album</span> &#123;</span><br><span class="line">  <span class="title class_">JimmyEatWorldFutures</span> = <span class="number">1</span>,</span><br><span class="line">  <span class="title class_">TubRingZooHypothesis</span> = <span class="number">2</span>,</span><br><span class="line">  <span class="title class_">DogFashionDiscoAdultery</span> = <span class="number">3</span>,</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> selectedAlbum = <span class="title class_">Album</span>.<span class="property">JimmyEatWorldFutures</span>;</span><br><span class="line"><span class="keyword">if</span> (selectedAlbum === <span class="title class_">Album</span>.<span class="property">JimmyEatWorldFutures</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;That is a great choice.&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
-
-<p>编译结果如下：</p>
-<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&quot;use strict&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> selectedAlbum = <span class="number">1</span> <span class="comment">/* Album.JimmyEatWorldFutures */</span>;</span><br><span class="line"><span class="keyword">if</span> (selectedAlbum === <span class="number">1</span> <span class="comment">/* Album.JimmyEatWorldFutures */</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;That is a great choice.&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
-
-<p>如果开启此项，则编译结果中会描述出该enum的结构。如下：</p>
-<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><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="meta">&quot;use strict&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> <span class="title class_">Album</span>;</span><br><span class="line">(<span class="keyword">function</span> (<span class="params">Album</span>) &#123;</span><br><span class="line">    <span class="title class_">Album</span>[<span class="title class_">Album</span>[<span class="string">&quot;JimmyEatWorldFutures&quot;</span>] = <span class="number">1</span>] = <span class="string">&quot;JimmyEatWorldFutures&quot;</span>;</span><br><span class="line">    <span class="title class_">Album</span>[<span class="title class_">Album</span>[<span class="string">&quot;TubRingZooHypothesis&quot;</span>] = <span class="number">2</span>] = <span class="string">&quot;TubRingZooHypothesis&quot;</span>;</span><br><span class="line">    <span class="title class_">Album</span>[<span class="title class_">Album</span>[<span class="string">&quot;DogFashionDiscoAdultery&quot;</span>] = <span class="number">3</span>] = <span class="string">&quot;DogFashionDiscoAdultery&quot;</span>;</span><br><span class="line">&#125;)(<span class="title class_">Album</span> || (<span class="title class_">Album</span> = &#123;&#125;));</span><br><span class="line"><span class="keyword">const</span> selectedAlbum = <span class="number">1</span> <span class="comment">/* Album.JimmyEatWorldFutures */</span>;</span><br><span class="line"><span class="keyword">if</span> (selectedAlbum === <span class="number">1</span> <span class="comment">/* Album.JimmyEatWorldFutures */</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;That is a great choice.&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
-
-<h2 id="preserveValueImports"><a href="#preserveValueImports" class="headerlink" title="preserveValueImports"></a>preserveValueImports</h2><p>通常，打包器会将未使用的”import”移除掉，但开启了该特性后，会在编译中保留未使用的”import”。例如：</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">import</span> &#123; <span class="title class_">Animal</span> &#125; <span class="keyword">from</span> <span class="string">&quot;./animal.js&quot;</span>;</span><br><span class="line"><span class="built_in">eval</span>(<span class="string">&quot;console.log(new Animal().isDangerous())&quot;</span>);</span><br></pre></td></tr></table></figure>
-
-<h2 id="removeComments"><a href="#removeComments" class="headerlink" title="removeComments"></a>removeComments</h2><p>移除代码中的注释。</p>
-<!--hexo-->
-
-<h1 id="compilerOptions-JavaScript-Support"><a href="#compilerOptions-JavaScript-Support" class="headerlink" title="compilerOptions - JavaScript Support"></a>compilerOptions - JavaScript Support</h1><p>对javascript文件的支持</p>
-<h2 id="allowJs"><a href="#allowJs" class="headerlink" title="allowJs"></a>allowJs</h2><p>允许<code>.ts</code>文件引用<code>.js</code>文件，这常用在javascript项目升级为typescript的过程中。</p>
-<h2 id="checkJs"><a href="#checkJs" class="headerlink" title="checkJs"></a>checkJs</h2><p>是否开启对<code>.js</code>文件的错误检查。</p>
-<h2 id="maxNodeModuleJsDepth"><a href="#maxNodeModuleJsDepth" class="headerlink" title="maxNodeModuleJsDepth"></a>maxNodeModuleJsDepth</h2><p>为<code>.js</code>文件寻找类型定义文件时，允许的最大依赖深度。</p>
-<p>正常情况下，我们会在<code>.js</code>文件的同级补写<code>.d.ts</code>文件，tsc会很快找到类型定义。但有时候确实要扩大搜索范围去找部分<code>.js</code>文件的类型定义文件。</p>
-<!--hexo-->
-
-<h1 id="compilerOptions-Interop-Constraints"><a href="#compilerOptions-Interop-Constraints" class="headerlink" title="compilerOptions - Interop Constraints"></a>compilerOptions - Interop Constraints</h1><p>(模块)互相操作的约束</p>
-<h2 id="allowSyntheticDefaultImports"><a href="#allowSyntheticDefaultImports" class="headerlink" title="allowSyntheticDefaultImports"></a>allowSyntheticDefaultImports</h2><p>允许合成<code>default</code>。</p>
-<p>如果一个模块A没有<code>export default</code>，那么另一个模块B在<code>import defaultA from &#39;./a&#39;</code>的时候，会抛出错误说A中没有default。</p>
-<p>有一个做法是<code>import * as defaultA from &#39;./a&#39;</code>曲线救国，但开启这个配置项后，可以直接使用<code>import defaultA from &#39;./a&#39;</code>这样的语法了。</p>
-<h2 id="esModuleInterop"><a href="#esModuleInterop" class="headerlink" title="esModuleInterop"></a>esModuleInterop</h2><p>esm在使用<code>import default from &#39;xxx&#39;</code>方式导入cjs的时候会抛出一个错误，因为cjs模块中没有default。开启此选项后，typescript会使用一些helpers去兼容cjs的default问题。</p>
-<h2 id="forceConsistentCasingInFileNames"><a href="#forceConsistentCasingInFileNames" class="headerlink" title="forceConsistentCasingInFileNames"></a>forceConsistentCasingInFileNames</h2><p>强制引用的模块文件名，和磁盘中的文件名保持一致的大小写。</p>
-<!--hexo-->
-
-<h1 id="compilerOptions-Language-and-Environment"><a href="#compilerOptions-Language-and-Environment" class="headerlink" title="compilerOptions - Language and Environment"></a>compilerOptions - Language and Environment</h1><p>和语言、环境有关的配置项。</p>
-<h2 id="jsx"><a href="#jsx" class="headerlink" title="jsx"></a>jsx</h2><p>如何解析<code>.tsx</code>文件中jsx语法？在2023年，react17+后，用<code>react-jsx</code>就行了。</p>
-<h2 id="lib"><a href="#lib" class="headerlink" title="lib"></a>lib</h2><p>在项目中使用的api类型定义集合。</p>
-<p>ts是需要知道你用的每一个javascript方法、属性的定义的，所以它内置了一批定义（比如Math.abs方法）。但是呢，后面新增方法的定义，需要你手工指定包含，ts才能理解了，比如Array.include方法，你就要包含ES2016。但好在你不需要记住这些，因为当你指定<code>target</code>字段时，lib会被默认设置成对应的值的。</p>
-<p>另外，大部分情况下，我们要访问一些和特定环境有关的特性，比如浏览器里的Dom特性，那么这儿额外引入<code>DOM</code>定义就行了。</p>
-<h2 id="target"><a href="#target" class="headerlink" title="target"></a>target</h2><p>项目编译的目标javascript版本。</p>
-<p>也就是你的目标客户端支持的最低javascript版本。注意它会影响默认的<code>lib</code>配置项。</p>
-<!--hexo-->
-
-<h1 id="compilerOptions-Compiler-Diagnostics"><a href="#compilerOptions-Compiler-Diagnostics" class="headerlink" title="compilerOptions - Compiler Diagnostics"></a>compilerOptions - Compiler Diagnostics</h1><p>编译诊断配置项。</p>
-<h2 id="diagnostics-x2F-extendedDiagnostics"><a href="#diagnostics-x2F-extendedDiagnostics" class="headerlink" title="diagnostics &#x2F; extendedDiagnostics"></a>diagnostics &#x2F; extendedDiagnostics</h2><p>打印出编译的信息，比如多少文件、编译时间等。</p>
-<p>extendedDiagnostics包含了diagnostics给出的所有信息，所以用extendedDiagnostics就行了。这是一个开启extendedDiagnostics的编译信息：</p>
-<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><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">Files:                         143</span><br><span class="line">Lines of Library:            38663</span><br><span class="line">Lines of Definitions:        82578</span><br><span class="line">Symbols:                     73362</span><br><span class="line">Types:                        1495</span><br><span class="line">Parse time:                  0.50s</span><br><span class="line">ResolveModule time:          0.03s</span><br><span class="line">Total time:                  1.01s</span><br></pre></td></tr></table></figure>
-
-<h2 id="explainFiles"><a href="#explainFiles" class="headerlink" title="explainFiles"></a>explainFiles</h2><p>打印出文件被编译的原因，也就是它们的引用链。</p>
-<h2 id="listEmittedFiles-x2F-listFiles"><a href="#listEmittedFiles-x2F-listFiles" class="headerlink" title="listEmittedFiles &#x2F; listFiles"></a>listEmittedFiles &#x2F; listFiles</h2><p>列出参与编译的文件。</p>
-<h2 id="traceResolution"><a href="#traceResolution" class="headerlink" title="traceResolution"></a>traceResolution</h2><p>打印每一个文件的编译流程。</p>
-<!--hexo-->
-
-<h1 id="compilerOptions-Completeness"><a href="#compilerOptions-Completeness" class="headerlink" title="compilerOptions - Completeness"></a>compilerOptions - Completeness</h1><p>完整性检测的配置项</p>
-<h2 id="skipLibCheck"><a href="#skipLibCheck" class="headerlink" title="skipLibCheck"></a>skipLibCheck</h2><p>跳过lib库的类型检测。</p>
-
-      
-    </div>
-    <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/tsconfig-json/" data-id="clt84xvyc001rjaot9mbxbgnc" data-title="关于tsconfig.json，最后更新2023/11月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
-      
-      
-      
-  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li></ul>
-
-    </footer>
-  </div>
-  
-</article>
-
-
-
-  
-    <article id="post-typescript-means" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
-  <div class="article-meta">
-    <a href="/blog/typescript-means/" class="article-date">
-  <time class="dt-published" datetime="2023-08-02T17:52:04.000Z" itemprop="datePublished">2023-08-03</time>
-</a>
-    
-  <div class="article-category">
-    <a class="article-category-link" href="/blog/categories/TypeScript/">TypeScript</a>
-  </div>
-
-  </div>
-  <div class="article-inner">
-    
-    
-      <header class="article-header">
-        
-  
-    <h1 itemprop="name">
-      <a class="p-name article-title" href="/blog/typescript-means/">TypeScript的小手段，最后更新2023/12月...</a>
-    </h1>
-  
-
-      </header>
-    
-    <div class="e-content article-entry" itemprop="articleBody">
-      
-        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/22">https://github.com/taoliujun/blog/issues/22</a></p>
-<!--hexo
----
-url: typescript-means
-tags:
-  - typescript
----
--->
-
-<p>TypeScript有一些小手段，评论区见。</p>
-<ul>
-<li><a href="#issuecomment-1663199481">as断言的另外写法</a></li>
-<li><a href="#issuecomment-1663206615">as const</a></li>
-<li><a href="#issuecomment-1663206898">非null | undefined声明</a></li>
-<li><a href="#issuecomment-1838108783">const enum</a></li>
-<li><a href="#issuecomment-1841954904">@ts-expect-error</a></li>
-<li><a href="#issuecomment-1842016788">解构变量可标记为“不使用”</a></li>
-</ul>
-<!--hexo-->
-
-<h1 id="as断言的另外写法"><a href="#as断言的另外写法" class="headerlink" title="as断言的另外写法"></a>as断言的另外写法</h1><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">const</span> myCanvas = &lt;<span class="title class_">HTMLCanvasElement</span>&gt;<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;main_canvas&quot;</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> myCanvas = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;main_canvas&quot;</span>) <span class="keyword">as</span> <span class="title class_">HTMLCanvasElement</span>;</span><br></pre></td></tr></table></figure>
-
-<p>但是不能再<code>.tsx</code>中使用。</p>
-<!--hexo-->
-
-<h1 id="as-const"><a href="#as-const" class="headerlink" title="as const"></a>as const</h1><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><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_">test1</span>(<span class="params">name: <span class="string">&#x27;html&#x27;</span> | <span class="string">&#x27;css&#x27;</span></span>) &#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><br><span class="line"><span class="keyword">const</span> obj1 = &#123; <span class="attr">name</span>: <span class="string">&#x27;html&#x27;</span> &#125;;</span><br><span class="line"><span class="title function_">test1</span>(obj1.<span class="property">name</span>);</span><br></pre></td></tr></table></figure>
-
-<p>上面的例子有一个类型错误：<code>Argument of type &#39;string&#39; is not assignable to parameter of type &#39;&quot;html&quot; | &quot;css&quot;&#39;.</code>，这是因为，ts对可读写的变量，推断出的类型是非字面类型。</p>
-<p>改下代码：</p>
-<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">const</span> obj1 = &#123; <span class="attr">name</span>: <span class="string">&#x27;html&#x27;</span> &#125; <span class="keyword">as</span> <span class="keyword">const</span>;</span><br></pre></td></tr></table></figure>
-
-<p><code>as const</code>是断言成该变量的字面类型，关于<code>const</code>的字面类型断言解释如下。</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> a = <span class="string">&#x27;1&#x27;</span>;</span><br><span class="line"><span class="keyword">const</span> b = <span class="string">&#x27;2&#x27;</span>;</span><br></pre></td></tr></table></figure>
-
-<p>ts对<code>a</code>的推断是<code>string</code>，对<code>b</code>的推断是<code>&#39;2&#39;</code>。在ts的类型推断的设计中，它总是尽可能的推断出更广的类型，但是对于<code>readOnly variable</code>，因为不可变，它的更广的类型就是字面类型。</p>
-<p>得益于 <a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481">https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481</a> ，还可以写成<code>let a = &lt;const&gt;&#39;1&#39;;</code> </p>
-<!--hexo-->
-
-<h1 id="非null-undefined声明"><a href="#非null-undefined声明" class="headerlink" title="非null | undefined声明"></a>非null | undefined声明</h1><p>有时候虽然声明一个变量类型是<code>null</code>，但在某个逻辑中它不可能是<code>null</code>，可以使用<code>!</code>来表示它不是<code>null</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> d1 = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;test1&#x27;</span>);</span><br><span class="line"><span class="comment">// &#x27;d1&#x27; is possibly &#x27;null&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(d1.<span class="title function_">getBoundingClientRect</span>());</span><br><span class="line"><span class="comment">// it is fine</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(d1!.<span class="title function_">getBoundingClientRect</span>());</span><br></pre></td></tr></table></figure>
-<!--hexo-->
-
-<h1 id="const-enum"><a href="#const-enum" class="headerlink" title="const enum"></a>const enum</h1><p>ts会将<code>enum</code>完整的编译出来，如下分别是ts源码和编译后的代码：</p>
-<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><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">enum</span> <span class="title class_">Sex</span> &#123;</span><br><span class="line">    <span class="title class_">Man</span>,</span><br><span class="line">    <span class="title class_">Woman</span>,</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> sex = <span class="title class_">Sex</span>.<span class="property">Man</span>;</span><br></pre></td></tr></table></figure>
-
-<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 编译结果</span></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">Sex</span>;</span><br><span class="line">(<span class="keyword">function</span> (<span class="params">Sex</span>) &#123;</span><br><span class="line">    <span class="title class_">Sex</span>[<span class="title class_">Sex</span>[<span class="string">&quot;Man&quot;</span>] = <span class="number">0</span>] = <span class="string">&quot;Man&quot;</span>;</span><br><span class="line">    <span class="title class_">Sex</span>[<span class="title class_">Sex</span>[<span class="string">&quot;Woman&quot;</span>] = <span class="number">1</span>] = <span class="string">&quot;Woman&quot;</span>;</span><br><span class="line">&#125;)(<span class="title class_">Sex</span> || (<span class="title class_">Sex</span> = &#123;&#125;));</span><br><span class="line"><span class="keyword">const</span> sex = <span class="title class_">Sex</span>.<span class="property">Man</span>;</span><br></pre></td></tr></table></figure>
-
-<p>而很多时候，我们只是将<code>enum</code>当安全值来用，编译后只保留安全值就行了。加上<code>const</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></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="keyword">enum</span> <span class="title class_">Sex</span> &#123;</span><br><span class="line">    <span class="title class_">Man</span>,</span><br><span class="line">    <span class="title class_">Woman</span>,</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> sex = <span class="title class_">Sex</span>.<span class="property">Man</span>;</span><br></pre></td></tr></table></figure>
-
-<figure class="highlight javascript"><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"><span class="keyword">const</span> sex = <span class="number">0</span>;</span><br></pre></td></tr></table></figure>
-<!--hexo-->
-
-<h1 id="ts-expect-error"><a href="#ts-expect-error" class="headerlink" title="@ts-expect-error"></a>@ts-expect-error</h1><p>在一些场景下，我们需要故意传一个错误类型的变量，比如在写单元测试的时候。如下：</p>
-<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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">// util.ts</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">test1</span>(<span class="params">p1: <span class="built_in">number</span></span>) &#123;</span><br><span class="line">  <span class="comment">// do</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// __test__</span></span><br><span class="line"><span class="title function_">test1</span>(<span class="string">&#x27;hello&#x27;</span>);</span><br></pre></td></tr></table></figure>
-
-<p>在如上的单元测试代码中，ts会反馈<code>&#39;hello&#39;</code>不是一个number，但这个类型错误正是我们期望的。那么就增加一个标记来处理它：</p>
-<figure class="highlight ts"><table><tr><td class="gutter"><pre><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">// __test__</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// @ts-expect-error</span></span><br><span class="line"><span class="title function_">test1</span>(<span class="string">&#x27;hello&#x27;</span>);</span><br></pre></td></tr></table></figure>
-
-<p>并且，如果这行语句没有类型错误的话，该注释本身会被认为是一个错误，以及时提醒开发者。</p>
-<figure class="highlight ts"><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">// Unused &#x27;@ts-expect-error&#x27; directive.ts(2578)</span></span><br><span class="line"><span class="comment">// @ts-expect-error</span></span><br><span class="line"><span class="title function_">test1</span>(<span class="number">123</span>);</span><br></pre></td></tr></table></figure>
-
-<p>它和<code>ts-ignore</code>的区别在这：<a target="_blank" rel="noopener" href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error">https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error</a></p>
-<!--hexo-->
-
-<h1 id="解构变量可标记为“不使用”"><a href="#解构变量可标记为“不使用”" class="headerlink" title="解构变量可标记为“不使用”"></a>解构变量可标记为“不使用”</h1><p>如下语句，ts会告诉你<code>first</code>未使用。</p>
-<figure class="highlight ts"><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">// &#x27;first&#x27; is declared but its value is never read.ts(6133)</span></span><br><span class="line"><span class="keyword">const</span> [first, second] = [<span class="number">1</span>, <span class="number">2</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;==&#x27;</span>, second);</span><br></pre></td></tr></table></figure>
-
-<p>但在场景里，就不需要使用第一个变量，ts提供了一个写法标记来忽略检查未使用的解构变量，就是在变量前加<code>_</code>。</p>
-<figure class="highlight ts"><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> [_first, second] = [<span class="number">1</span>, <span class="number">2</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;==&#x27;</span>, second);</span><br></pre></td></tr></table></figure>
-
-<p><strong>补充：</strong> 以上是ts4.2的特性，在更新的版本里，只要这样写就行了：<code>const [, second] = [1, 2]</code>。</p>
-
-      
-    </div>
-    <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/typescript-means/" data-id="clt84xvyd001ujaot1vergh6f" data-title="TypeScript的小手段，最后更新2023/12月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
-      
-      
-      
-  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li></ul>
-
-    </footer>
-  </div>
-  
-</article>
-
-
-
-  
 
 
   <nav id="page-nav">
@@ -1246,7 +1002,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -1256,7 +1012,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -1278,23 +1034,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/page/2/index.html b/dist/page/2/index.html
index 485288f..0e40bac 100644
--- a/dist/page/2/index.html
+++ b/dist/page/2/index.html
@@ -80,6 +80,381 @@ <h2 id="subtitle-wrap">
       <div class="outer">
         <section id="main">
   
+    <article id="post-tsconfig-json" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+  <div class="article-meta">
+    <a href="/blog/tsconfig-json/" class="article-date">
+  <time class="dt-published" datetime="2023-09-04T18:51:45.000Z" itemprop="datePublished">2023-09-05</time>
+</a>
+    
+  <div class="article-category">
+    <a class="article-category-link" href="/blog/categories/TypeScript/">TypeScript</a>
+  </div>
+
+  </div>
+  <div class="article-inner">
+    
+    
+      <header class="article-header">
+        
+  
+    <h1 itemprop="name">
+      <a class="p-name article-title" href="/blog/tsconfig-json/">关于tsconfig.json，最后更新2023/11月...</a>
+    </h1>
+  
+
+      </header>
+    
+    <div class="e-content article-entry" itemprop="articleBody">
+      
+        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/23">https://github.com/taoliujun/blog/issues/23</a></p>
+<!--hexo
+---
+url: tsconfig-json
+tags:
+  - typescript
+---
+-->
+
+<p><strong>截至TypeScript 5.2</strong>，<code>tsconfig.json</code>的配置项已经有百十个之多，它的某些选项甚至影响了项目的执行结果，所以尽量多的了解它们能让程序员更深的了解ts，写出优美语句让CTO赞赏，甚至避免写出bug。</p>
+<p>本issue的内容，只是个人在工作经验的影响下，对官方文档的内容理解。且内容有所欠缺，基本只记录了我工作涉及到的配置项，比如不怎么使用class，对class的配置项就略过了。</p>
+<p>官方文档：<a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig">https://www.typescriptlang.org/tsconfig</a></p>
+<hr>
+<!--hexo-->
+
+<h1 id="Top-Level"><a href="#Top-Level" class="headerlink" title="Top Level"></a>Top Level</h1><p>一些根配置项。</p>
+<h2 id="extends"><a href="#extends" class="headerlink" title="extends"></a>extends</h2><p>继承另一个配置文件，推荐的一些官方的配置文件来继承使用：<a target="_blank" rel="noopener" href="https://github.com/tsconfig/bases/tree/main/bases">https://github.com/tsconfig/bases/tree/main/bases</a></p>
+<h2 id="files-include-exclude"><a href="#files-include-exclude" class="headerlink" title="files, include, exclude"></a>files, include, exclude</h2><p>这几项指定了在项目里，被ts作用的文件集合。配置本身没什么好说的，记录下它们之间的关系。</p>
+<ul>
+<li>如果files指定了，那么include的默认值是<code>[]</code>，否则include的默认值是<code>**/*</code>；</li>
+<li>exclude用于排除include已指定的文件集合，但这些文件仍然是可以在项目里被引用的；</li>
+<li>exclude默认排除了<code>node_modules</code>、<code>outDir</code>；</li>
+</ul>
+<h2 id="references"><a href="#references" class="headerlink" title="references"></a>references</h2><p>用于项目文件夹分别打包，并且其中有缓存机制的参与，所以编译速度会快很多。</p>
+<p>如下项目结构：</p>
+<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><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">./interface</span><br><span class="line">./components</span><br><span class="line">./user</span><br><span class="line">./admin</span><br><span class="line">./tsconfig.json</span><br></pre></td></tr></table></figure>
+
+<p>在上面，user和admin文件夹分别是业务用户端、业务管理端，interface是接口定义，components是通用组件。在以往，改动了任何文件，都需要整个项目重新编译。而在使用references之后，将4个文件夹中放入对应的tsconfig.json并各有配置，在根tsconfig中指定好references的path后，tsc利用缓存机制，会只打包改动过的文件夹。</p>
+<!--hexo-->
+
+<h1 id="compilerOptions"><a href="#compilerOptions" class="headerlink" title="compilerOptions"></a>compilerOptions</h1><p>编译器配置项太多了，按作用拆分成几个评论来说。</p>
+<!--hexo-->
+
+<h1 id="compilerOptions-Type-Checking"><a href="#compilerOptions-Type-Checking" class="headerlink" title="compilerOptions - Type Checking"></a>compilerOptions - Type Checking</h1><p>和类型检查有关的配置项。</p>
+<h2 id="strict"><a href="#strict" class="headerlink" title="strict"></a>strict</h2><p>strict是一个严格模式的快捷开关，开启后会默认打开strictNullChecks、noImplicitAny等选项。并且随着typescript的升级，它可能会默认开启新增特性，列出截至5.2默认开启的选项：</p>
+<p><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#alwaysStrict">alwaysStrict</a><br><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#strictNullChecks">strictNullChecks</a><br><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#strictBindCallApply">strictBindCallApply</a><br><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#strictFunctionTypes">strictFunctionTypes</a><br><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#strictPropertyInitialization">strictPropertyInitialization</a><br><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#noImplicitAny">noImplicitAny</a><br><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#noImplicitThis">noImplicitThis</a><br><a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig#useUnknownInCatchVariables">useUnknownInCatchVariables</a></p>
+<h2 id="alwaysStrict"><a href="#alwaysStrict" class="headerlink" title="alwaysStrict"></a>alwaysStrict</h2><p>对所有文件启用javascript strict模式。注意，这和typescript strict不是同一个东西。参考：<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode</a></p>
+<h2 id="allowUnreachableCode"><a href="#allowUnreachableCode" class="headerlink" title="allowUnreachableCode"></a>allowUnreachableCode</h2><p>对未使用的代码的处理策略，可设置警告(默认)、错误、忽略。</p>
+<h2 id="allowUnusedLabels"><a href="#allowUnusedLabels" class="headerlink" title="allowUnusedLabels"></a>allowUnusedLabels</h2><p>对未使用的Label的处理策略，可设置警告(默认)、错误、忽略。</p>
+<h2 id="exactOptionalPropertyTypes"><a href="#exactOptionalPropertyTypes" class="headerlink" title="exactOptionalPropertyTypes"></a>exactOptionalPropertyTypes</h2><p>对可选项设置为undefined的策略。</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></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">    sex?: <span class="number">1</span> | <span class="number">0</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">man</span>: <span class="title class_">User</span> = &#123;&#125;;</span><br><span class="line">man.<span class="property">sex</span> = <span class="number">1</span>;</span><br><span class="line">man.<span class="property">sex</span> = <span class="number">0</span>;</span><br><span class="line">man.<span class="property">sex</span> = <span class="literal">undefined</span>;</span><br></pre></td></tr></table></figure>
+
+<p><code>User.sex</code>是一个可选项，它的预期值是<code>0|1|undefined</code>。但是呢，<code>sex</code>可选想表达的意思是未被定义，而不是值真的是undefined。那么开启本选项后，<code>man.sex = undefined</code>这个赋值语句会给一个报错。</p>
+<h2 id="noImplicitAny"><a href="#noImplicitAny" class="headerlink" title="noImplicitAny"></a>noImplicitAny</h2><p>对推导类型为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></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">s</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(s.<span class="title function_">subtr</span>(<span class="number">3</span>));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>入参<code>s</code>推导为<code>any</code>，在选项开启情况下会报错。</p>
+<h2 id="noImplicitReturns"><a href="#noImplicitReturns" class="headerlink" title="noImplicitReturns"></a>noImplicitReturns</h2><p>对函数每个分支必须有return语句的策略。</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> <span class="title function_">fn</span>(<span class="params">s: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (s) &#123;</span><br><span class="line">        <span class="keyword">return</span> s.<span class="title function_">substring</span>(<span class="number">3</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="string">&#x27;nothing&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>开启后，ts报错认为<code>fn</code>函数的最后没有return语句。</p>
+<h2 id="noPropertyAccessFromIndexSignature"><a href="#noPropertyAccessFromIndexSignature" class="headerlink" title="noPropertyAccessFromIndexSignature"></a>noPropertyAccessFromIndexSignature</h2><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></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">    name?: <span class="built_in">string</span>;</span><br><span class="line">    [<span class="attr">key</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 class="keyword">const</span> <span class="attr">a</span>: <span class="title class_">User</span> = &#123;&#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="property">name</span>, a[<span class="string">&#x27;name&#x27;</span>], a.<span class="property">sex</span>, a[<span class="string">&#x27;sex&#x27;</span>]);</span><br></pre></td></tr></table></figure>
+
+<p>访问对象属性有<code>.</code>和<code>[index]</code>两个方式，访问未定义的属性，开启本选项后，在<code>a.sex</code>处会抛出一个错误。</p>
+<h2 id="noUncheckedIndexedAccess"><a href="#noUncheckedIndexedAccess" class="headerlink" title="noUncheckedIndexedAccess"></a>noUncheckedIndexedAccess</h2><p>未定义的对象属性值类型，给追加上<code>undefined</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><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_">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">propName</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">declare</span> <span class="keyword">const</span> <span class="attr">admin</span>: <span class="title class_">User</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// (property) User.name: string</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(admin.<span class="property">name</span>);</span><br><span class="line"><span class="comment">// (index) User[string]: string</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(admin.<span class="property">birthday</span>);</span><br></pre></td></tr></table></figure>
+
+<p>上例中，birthday的值类型是<code>string</code>，开启本项后，类型追加上<code>undefined</code>。</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="comment">// (index) User[string]: string | undefined</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(admin.<span class="property">birthday</span>);</span><br></pre></td></tr></table></figure>
+
+<h2 id="noUnusedLocals"><a href="#noUnusedLocals" class="headerlink" title="noUnusedLocals"></a>noUnusedLocals</h2><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">function</span> <span class="title function_">test</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> defaultModelID = <span class="number">23</span>;</span><br><span class="line"><span class="comment">// &#x27;defaultModelID&#x27; is declared but its value is never read.</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="noUnusedParameters"><a href="#noUnusedParameters" class="headerlink" title="noUnusedParameters"></a>noUnusedParameters</h2><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">const</span> <span class="title function_">createDefaultKeyboard</span> = (<span class="params">modelID: <span class="built_in">number</span></span>) =&gt; &#123;</span><br><span class="line"><span class="comment">// &#x27;modelID&#x27; is declared but its value is never read.</span></span><br><span class="line">  <span class="keyword">const</span> defaultModelID = <span class="number">23</span>;</span><br><span class="line">  <span class="keyword">return</span> &#123; <span class="attr">type</span>: <span class="string">&quot;keyboard&quot;</span>, <span class="attr">modelID</span>: defaultModelID &#125;;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+
+<h2 id="strictBindCallApply"><a href="#strictBindCallApply" class="headerlink" title="strictBindCallApply"></a>strictBindCallApply</h2><p>在使用函数的call、bind、apply时，是否要检查传入参数的类型。</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_">fn</span>(<span class="params">x: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> x;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> n1 = fn.<span class="title function_">call</span>(<span class="literal">undefined</span>, <span class="string">&#x27;10&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> n2 = fn.<span class="title function_">call</span>(<span class="literal">undefined</span>, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure>
+
+<p>如上代码中，第二个call中的入参false和string类型不匹配而报错。</p>
+<h2 id="strictFunctionTypes"><a href="#strictFunctionTypes" class="headerlink" title="strictFunctionTypes"></a>strictFunctionTypes</h2><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">type</span> <span class="title class_">GetUser</span> = <span class="function">(<span class="params">id: <span class="built_in">string</span> | <span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">any</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">test</span>(<span class="params">x: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> x;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">getUser</span>: <span class="title class_">GetUser</span> = test;</span><br></pre></td></tr></table></figure>
+
+<p>如上代码中，GetUser的入参类型<code>string | number</code>不能精确的分配给test的入参类型<code>string</code>。</p>
+<h2 id="strictNullChecks"><a href="#strictNullChecks" class="headerlink" title="strictNullChecks"></a>strictNullChecks</h2><p>是否校验<code>null</code>, <code>undefined</code>的属性访问？</p>
+<p>在以往的纯js项目中，容易忽略变量为undefined后仍然访问其属性的场景，比如在如下代码中，忽略了<code>a</code>为<code>undefined</code>的情况，导致运行时引发异常。</p>
+<figure class="highlight javascript"><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> a = arr1.<span class="title function_">find</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="property">name</span>)</span><br></pre></td></tr></table></figure>
+
+<p>本选项开启后，在静态检查时就提示开发者，变量可能是<code>null</code>, <code>undefined</code>，不能访问到<code>name</code>属性。</p>
+<h2 id="useUnknownInCatchVariables"><a href="#useUnknownInCatchVariables" class="headerlink" title="useUnknownInCatchVariables"></a>useUnknownInCatchVariables</h2><p>有时候我们并不知道catch的err类型是什么，它的类型由try里的实际运行分支决定，而如果当成any处理，那么访问它的属性是危险的。当开启本项后，err的类型是unknown，必须先限定其类型再安全的访问其属性，如：</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">try</span> &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">  <span class="keyword">if</span> (err <span class="keyword">instanceof</span> <span class="title class_">Error</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(err.<span class="property">message</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<!--hexo-->
+
+<h1 id="compilerOptions-Modules"><a href="#compilerOptions-Modules" class="headerlink" title="compilerOptions - Modules"></a>compilerOptions - Modules</h1><p>模块的处理策略。</p>
+<h2 id="allowArbitraryExtensions"><a href="#allowArbitraryExtensions" class="headerlink" title="allowArbitraryExtensions"></a>allowArbitraryExtensions</h2><p>ts默认支持了ts、js、cjs、jsx等模块的解析描述，通过<code>global.d.ts</code>的定义扩展，还可以支持css、jpg等模块的解析描述（你要自己保证webpack loader之类的解析器去真实支持加载这些模块）。而有时候，需要对特定模块文件（不管是否已全局定义过该模块的描述）做特别的描述，就可以开启该选项，并且创建一个<code>&#123;file basename&#125;.d.&#123;extension&#125;.ts</code>文件。</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></pre></td><td class="code"><pre><span class="line"><span class="comment">// test.ts</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 报错：Cannot find module &#x27;./a.jpk&#x27; or its corresponding type declarations.ts(2307)</span></span><br><span class="line"><span class="keyword">import</span> a <span class="keyword">from</span> <span class="string">&#x27;./a.jpk&#x27;</span>;</span><br><span class="line"><span class="comment">// doTest类型是any</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="title function_">doTest</span>());</span><br></pre></td></tr></table></figure>
+
+<p>开启该项，并增加<code>a.d.jpk.ts</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><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// a.d.jpk.ts</span></span><br><span class="line"><span class="keyword">declare</span> <span class="keyword">const</span> <span class="attr">jpk</span>: &#123;</span><br><span class="line">    <span class="attr">doTest</span>: <span class="function">() =&gt;</span> <span class="built_in">void</span>;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> jpk;</span><br><span class="line"></span><br><span class="line"><span class="comment">// test.ts</span></span><br><span class="line"><span class="keyword">import</span> a <span class="keyword">from</span> <span class="string">&#x27;./a.jpk&#x27;</span>;</span><br><span class="line"><span class="comment">// doTest的类型：(property) doTest: () =&gt; void</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="title function_">doTest</span>());</span><br></pre></td></tr></table></figure>
+
+<h2 id="allowImportingTsExtensions"><a href="#allowImportingTsExtensions" class="headerlink" title="allowImportingTsExtensions"></a>allowImportingTsExtensions</h2><p>是否允许在import path带入ts、tsx等后缀名。</p>
+<p>ts项目需要编译成js代码后执行，如果我们使用ts-node来执行项目，可以启用<code>noEmit</code>来禁止这个编译行为，并且在项目源码中直接引入<code>.ts</code>来引入正确的、完整的路径。</p>
+<p>举例：</p>
+<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">import</span> &#123; wait &#125; <span class="keyword">from</span> <span class="string">&#x27;@/utils/utils.ts&#x27;</span>;</span><br></pre></td></tr></table></figure>
+
+<h2 id="allowUmdGlobalAccess"><a href="#allowUmdGlobalAccess" class="headerlink" title="allowUmdGlobalAccess"></a>allowUmdGlobalAccess</h2><p>&#x2F;&#x2F; TODO<br>和umd的声明有关系，不过我还不明确它的意义。见：<a target="_blank" rel="noopener" href="https://github.com/microsoft/TypeScript/pull/30776%E3%80%82">https://github.com/microsoft/TypeScript/pull/30776。</a></p>
+<h2 id="baseUrl"><a href="#baseUrl" class="headerlink" title="baseUrl"></a>baseUrl</h2><p>为解析无路径修饰的模块，设置一个基础路径。 什么叫做无路径修饰？就是该模块不是一个绝对或相对路径，如<code>import a from &#39;@/hello/world&#39;</code>。</p>
+<p>如果配置了该项，那么ts从该项指定的目录中开始查找模块，优先级也高于<code>node_modules</code>。</p>
+<h2 id="module"><a href="#module" class="headerlink" title="module"></a>module</h2><p>模块打包的策略，也就是指编译后的模块加载代码是require、import之类的语法。推荐大家阅读：<a target="_blank" rel="noopener" href="https://www.typescriptlang.org/docs/handbook/modules/theory.html">模块理论</a>。</p>
+<p>这个话题有点繁琐，也涉及到javascript的模块化amd、umd之类的历史，对于2023年这个时间点来说，关注下CommonJS、ESM即可，ESM还细分为ES2015、ES20XX等版本，他们的模块打包策略是一样的，区别是更高版本的ESM还支持了<code>dynamic imports</code>、<code>import.meta</code>和<code>top level await</code>之类的东西。</p>
+<p>补充的是，nodejs的模块打包策略也早就支持esm了，具体参照package.json的设置：<a target="_blank" rel="noopener" href="https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext">https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext</a></p>
+<h2 id="moduleResolution"><a href="#moduleResolution" class="headerlink" title="moduleResolution"></a>moduleResolution</h2><p>加载模块的策略，也就是指用什么策略去解析<code>import xxx from &#39;pathA&#39;</code>这里的<code>pathA</code>。<strong>注意区分和module的关系，module指的是项目的模块化是如何打包的，而moduleResolution指的是项目如何加载模块的</strong>。截至2023支持如下策略：</p>
+<ul>
+<li>node16&#x2F;nodenext，对于Node12+版本，本策略可自由根据import&#x2F;require选择合适的算法去加载模块。</li>
+<li>node10，对于Node12之前的版本，本策略只支持require算法加载模块。<strong>基本不用关心了</strong></li>
+<li>bundler，和node16一样，但不要求模块有后缀名。</li>
+<li>classic，早期的策略，不用管了。</li>
+</ul>
+<p><strong>这东西还要和module搭配使用，并且！并且！和package.json还有扯不清的关系。强烈建议阅读上文提到的<a target="_blank" rel="noopener" href="https://www.typescriptlang.org/docs/handbook/modules/theory.html">模块理论</a></strong></p>
+<p>另外，由于自己对这块的理解也不足深，还参考了这篇文章：<a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/621795173%E3%80%82">https://zhuanlan.zhihu.com/p/621795173。</a></p>
+<h2 id="moduleSuffixes"><a href="#moduleSuffixes" class="headerlink" title="moduleSuffixes"></a>moduleSuffixes</h2><p>模块搜索时的文件扩展名补充，比如以下配置项：</p>
+<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><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="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;compilerOptions&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;moduleSuffixes&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;.ios&quot;</span><span class="punctuation">,</span> <span class="string">&quot;.native&quot;</span><span class="punctuation">,</span> <span class="string">&quot;&quot;</span><span class="punctuation">]</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
+
+<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">import</span> * <span class="keyword">as</span> foo <span class="keyword">from</span> <span class="string">&quot;./foo&quot;</span>;</span><br></pre></td></tr></table></figure>
+<p>TypeScript 会按顺序寻找<code>./foo.ios.ts</code>、<code>./foo.native.ts</code>、<code>./foo.ts</code>。</p>
+<h2 id="paths"><a href="#paths" class="headerlink" title="paths"></a>paths</h2><p>在加载模块路径时，加入一个别名匹配。可以理解为webpack的alias。</p>
+<h2 id="resolveJsonModule"><a href="#resolveJsonModule" class="headerlink" title="resolveJsonModule"></a>resolveJsonModule</h2><p>允许加载json模块（文件）。</p>
+<h2 id="resolvePackageJsonExports"><a href="#resolvePackageJsonExports" class="headerlink" title="resolvePackageJsonExports"></a>resolvePackageJsonExports</h2><p>引用<code>node_modules</code>包时，强制遵循包package.json的exports字段的定义。还是那句话，阅读下模块理论那篇文章，不然很难理解前面这句话的信息量。</p>
+<h2 id="resolvePackageJsonImports"><a href="#resolvePackageJsonImports" class="headerlink" title="resolvePackageJsonImports"></a>resolvePackageJsonImports</h2><p>强制typescript使用package.json中imports字段的定义去加载<code>#</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></pre></td><td class="code"><pre><span class="line"><span class="comment">// package.json</span></span><br><span class="line"><span class="string">&quot;imports&quot;</span>: &#123;</span><br><span class="line">   <span class="string">&quot;#test/*&quot;</span>: <span class="string">&quot;./src/test/*&quot;</span></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></pre></td><td class="code"><pre><span class="line"><span class="comment">// src/test/1.ts</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> a = <span class="number">123</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></pre></td><td class="code"><pre><span class="line"><span class="comment">// src/b.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; a &#125; <span class="keyword">from</span> <span class="string">&#x27;#test/1&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;==a&#x27;</span>, a);</span><br></pre></td></tr></table></figure>
+
+<h2 id="rootDir"><a href="#rootDir" class="headerlink" title="rootDir"></a>rootDir</h2><p>指定项目的根目录，默认值可以理解为所有ts文件目录的最大集。例如：</p>
+<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><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">MyProj</span><br><span class="line">├── tsconfig.json</span><br><span class="line">├── core</span><br><span class="line">│   ├── a.ts</span><br><span class="line">│   ├── b.ts</span><br><span class="line">│   ├── sub</span><br><span class="line">│   │   ├── c.ts</span><br><span class="line">├── types.d.ts</span><br></pre></td></tr></table></figure>
+
+<p>如上的项目，rootDir的推断值是”core”。但是你可以手工指定为<code>tsconfig.json</code>的相对目录”，比如.”。</p>
+<p>另外，如果设置了<code>composite</code>，<code>rootDir</code>的默认值就是<code>tsconfig.json</code>文件的目录。</p>
+<h2 id="rootDirs"><a href="#rootDirs" class="headerlink" title="rootDirs"></a>rootDirs</h2><p>这个属性有点拽，它可以将多个目录虚拟成一个目录。这样在<code>import</code>的时候，就当成同一个目录就行啦。</p>
+<h2 id="typeRoots"><a href="#typeRoots" class="headerlink" title="typeRoots"></a>typeRoots</h2><p>类型定义文件的目录，默认所有@types目录都会被包含，包括node_modules下的@types目录。<br>如果指定了typeRoots，那么@types目录的相关规则会被忽略。</p>
+<h2 id="types"><a href="#types" class="headerlink" title="types"></a>types</h2><p>类型定义文件的具体目录，规则和<code>typeRoots</code>一样，不同点是<code>types</code>只指定具体目录，而非<code>*</code>这种匹配型目录。</p>
+<!--hexo-->
+
+<h1 id="compilerOptions-Emit"><a href="#compilerOptions-Emit" class="headerlink" title="compilerOptions - Emit"></a>compilerOptions - Emit</h1><p>编译策略。</p>
+<h2 id="outDir"><a href="#outDir" class="headerlink" title="outDir"></a>outDir</h2><p>编译文件放置的目录，默认和源码放同一个目录。</p>
+<h2 id="noEmit"><a href="#noEmit" class="headerlink" title="noEmit"></a>noEmit</h2><p>不要编译ts。</p>
+<p>项目中一般使用babel去编译，typescript仅用来做静态检查，所以设置noEmit就可以不生成js、sourcemap、declaration文件了。</p>
+<h2 id="noEmitOnError"><a href="#noEmitOnError" class="headerlink" title="noEmitOnError"></a>noEmitOnError</h2><p>顾名思义，在检查到错误的时候，不要继续编译了。</p>
+<h2 id="declaration-x2F-emitDeclarationOnly-x2F-declarationDir"><a href="#declaration-x2F-emitDeclarationOnly-x2F-declarationDir" class="headerlink" title="declaration &#x2F; emitDeclarationOnly &#x2F; declarationDir"></a>declaration &#x2F; emitDeclarationOnly &#x2F; declarationDir</h2><p>生成类型描述文件。</p>
+<p>这个是typescript最重要的几个特性之一了，为<code>.ts</code>文件生成类型定义文件<code>.d.ts</code>。如果不想同时生成<code>.js</code>文件，则使用<code>emitDeclarationOnly</code>。</p>
+<p>同时，可以使用<code>declarationDir</code>指定类型定义文件的生成目录。</p>
+<h2 id="declarationMap"><a href="#declarationMap" class="headerlink" title="declarationMap"></a>declarationMap</h2><p>给<code>.d.ts</code>文件增加一个map标识到<code>.ts</code>源文件，类似sourceMap。</p>
+<h2 id="sourceMap-x2F-inlineSourceMap-x2F-inlineSources-x2F-mapRoot-x2F-sourceRoot"><a href="#sourceMap-x2F-inlineSourceMap-x2F-inlineSources-x2F-mapRoot-x2F-sourceRoot" class="headerlink" title="sourceMap &#x2F; inlineSourceMap &#x2F; inlineSources &#x2F; mapRoot &#x2F; sourceRoot"></a>sourceMap &#x2F; inlineSourceMap &#x2F; inlineSources &#x2F; mapRoot &#x2F; sourceRoot</h2><p>typescript也是支持souce map的，这里就不解释sourcemap是什么了。它的相关配置项有：</p>
+<p>sourceMap，生成sourcemap文件。<br>inlineSourceMap，不生成sourcemap文件，而是直接把source内容写在.js文件中。<br>inlineSources，同inlineSourceMap。<br>mapRoot，指定sourceMap文件的路径，比如部署到网络中，可以指定为”<a target="_blank" rel="noopener" href="http://xxxx.com"./">http://xxxx.com"。</a><br>sourceRoot，指定source文件的路径，同mapRoot。</p>
+<h2 id="downlevelIteration"><a href="#downlevelIteration" class="headerlink" title="downlevelIteration"></a>downlevelIteration</h2><p>对迭代器的降级解析。</p>
+<p>在es6中增加了for&#x2F;of，spread等迭代特性，typescript在编译成es5的时候，要使用何种语法。文档中有个字符遍历的例子说明开启与否的迭代影响，这对业务计算结果是有影响的。</p>
+<p>不过项目中使用了babel之类的编译器，就不用担心这些影响了。</p>
+<h2 id="importHelpers"><a href="#importHelpers" class="headerlink" title="importHelpers"></a>importHelpers</h2><p>引入降级解析的包。</p>
+<p>将es6的某些特新编译成es5，如迭代器、异步语法等，会将模块中每个相应的代码都编译成降级代码，使得类似代码重复。如：</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">var</span> __read = (<span class="variable language_">this</span> &amp;&amp; <span class="variable language_">this</span>.<span class="property">__read</span>) || <span class="keyword">function</span> (<span class="params">o, n</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> m = <span class="keyword">typeof</span> <span class="title class_">Symbol</span> === <span class="string">&quot;function&quot;</span> &amp;&amp; o[<span class="title class_">Symbol</span>.<span class="property">iterator</span>];</span><br><span class="line">    <span class="keyword">if</span> (!m) <span class="keyword">return</span> o;</span><br><span class="line">    <span class="keyword">var</span> i = m.<span class="title function_">call</span>(o), r, ar = [], e;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">while</span> ((n === <span class="built_in">void</span> <span class="number">0</span> || n-- &gt; <span class="number">0</span>) &amp;&amp; !(r = i.<span class="title function_">next</span>()).<span class="property">done</span>) ar.<span class="title function_">push</span>(r.<span class="property">value</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">catch</span> (error) &#123; e = &#123; <span class="attr">error</span>: error &#125;; &#125;</span><br><span class="line">    <span class="keyword">finally</span> &#123;</span><br><span class="line">        <span class="keyword">try</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (r &amp;&amp; !r.<span class="property">done</span> &amp;&amp; (m = i[<span class="string">&quot;return&quot;</span>])) m.<span class="title function_">call</span>(i);</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">finally</span> &#123; <span class="keyword">if</span> (e) <span class="keyword">throw</span> e.<span class="property">error</span>; &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> ar;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">var</span> __spreadArray = (<span class="variable language_">this</span> &amp;&amp; <span class="variable language_">this</span>.<span class="property">__spreadArray</span>) || <span class="keyword">function</span> (<span class="params">to, <span class="keyword">from</span>, pack</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (pack || <span class="variable language_">arguments</span>.<span class="property">length</span> === <span class="number">2</span>) <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, l = <span class="keyword">from</span>.<span class="property">length</span>, ar; i &lt; l; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (ar || !(i <span class="keyword">in</span> <span class="keyword">from</span>)) &#123;</span><br><span class="line">            <span class="keyword">if</span> (!ar) ar = <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(<span class="keyword">from</span>, <span class="number">0</span>, i);</span><br><span class="line">            ar[i] = <span class="keyword">from</span>[i];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> to.<span class="title function_">concat</span>(ar || <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(<span class="keyword">from</span>));</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">arr</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> arr2 = <span class="title function_">__spreadArray</span>([<span class="number">1</span>], <span class="title function_">__read</span>(arr), <span class="literal">false</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>如果同时开启了<code>downlevelIteration</code>和<code>importHelpers</code>，并且安装了<code>tslib</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; __read, __spreadArray &#125; <span class="keyword">from</span> <span class="string">&quot;tslib&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">arr</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> arr2 = <span class="title function_">__spreadArray</span>([<span class="number">1</span>], <span class="title function_">__read</span>(arr), <span class="literal">false</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<h2 id="noEmitHelpers"><a href="#noEmitHelpers" class="headerlink" title="noEmitHelpers"></a>noEmitHelpers</h2><p>typescript处理迭代器、异步等的降级策略是生成一堆降级代码，也可以使用”importHelpers”和”tslib”来提取公共代码。但通过这个配置，可以自定义降级代码了。具体参照文档。</p>
+<h2 id="preserveConstEnums"><a href="#preserveConstEnums" class="headerlink" title="preserveConstEnums"></a>preserveConstEnums</h2><p>是否在编辑结果中移除<code>const enum</code>的定义。因为javascript没有enum概念，typescript会将enum的引用编译成具体的值。如：</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">const</span> <span class="keyword">enum</span> <span class="title class_">Album</span> &#123;</span><br><span class="line">  <span class="title class_">JimmyEatWorldFutures</span> = <span class="number">1</span>,</span><br><span class="line">  <span class="title class_">TubRingZooHypothesis</span> = <span class="number">2</span>,</span><br><span class="line">  <span class="title class_">DogFashionDiscoAdultery</span> = <span class="number">3</span>,</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> selectedAlbum = <span class="title class_">Album</span>.<span class="property">JimmyEatWorldFutures</span>;</span><br><span class="line"><span class="keyword">if</span> (selectedAlbum === <span class="title class_">Album</span>.<span class="property">JimmyEatWorldFutures</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;That is a great choice.&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>编译结果如下：</p>
+<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&quot;use strict&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> selectedAlbum = <span class="number">1</span> <span class="comment">/* Album.JimmyEatWorldFutures */</span>;</span><br><span class="line"><span class="keyword">if</span> (selectedAlbum === <span class="number">1</span> <span class="comment">/* Album.JimmyEatWorldFutures */</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;That is a great choice.&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+
+<p>如果开启此项，则编译结果中会描述出该enum的结构。如下：</p>
+<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><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="meta">&quot;use strict&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> <span class="title class_">Album</span>;</span><br><span class="line">(<span class="keyword">function</span> (<span class="params">Album</span>) &#123;</span><br><span class="line">    <span class="title class_">Album</span>[<span class="title class_">Album</span>[<span class="string">&quot;JimmyEatWorldFutures&quot;</span>] = <span class="number">1</span>] = <span class="string">&quot;JimmyEatWorldFutures&quot;</span>;</span><br><span class="line">    <span class="title class_">Album</span>[<span class="title class_">Album</span>[<span class="string">&quot;TubRingZooHypothesis&quot;</span>] = <span class="number">2</span>] = <span class="string">&quot;TubRingZooHypothesis&quot;</span>;</span><br><span class="line">    <span class="title class_">Album</span>[<span class="title class_">Album</span>[<span class="string">&quot;DogFashionDiscoAdultery&quot;</span>] = <span class="number">3</span>] = <span class="string">&quot;DogFashionDiscoAdultery&quot;</span>;</span><br><span class="line">&#125;)(<span class="title class_">Album</span> || (<span class="title class_">Album</span> = &#123;&#125;));</span><br><span class="line"><span class="keyword">const</span> selectedAlbum = <span class="number">1</span> <span class="comment">/* Album.JimmyEatWorldFutures */</span>;</span><br><span class="line"><span class="keyword">if</span> (selectedAlbum === <span class="number">1</span> <span class="comment">/* Album.JimmyEatWorldFutures */</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;That is a great choice.&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
+
+<h2 id="preserveValueImports"><a href="#preserveValueImports" class="headerlink" title="preserveValueImports"></a>preserveValueImports</h2><p>通常，打包器会将未使用的”import”移除掉，但开启了该特性后，会在编译中保留未使用的”import”。例如：</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">import</span> &#123; <span class="title class_">Animal</span> &#125; <span class="keyword">from</span> <span class="string">&quot;./animal.js&quot;</span>;</span><br><span class="line"><span class="built_in">eval</span>(<span class="string">&quot;console.log(new Animal().isDangerous())&quot;</span>);</span><br></pre></td></tr></table></figure>
+
+<h2 id="removeComments"><a href="#removeComments" class="headerlink" title="removeComments"></a>removeComments</h2><p>移除代码中的注释。</p>
+<!--hexo-->
+
+<h1 id="compilerOptions-JavaScript-Support"><a href="#compilerOptions-JavaScript-Support" class="headerlink" title="compilerOptions - JavaScript Support"></a>compilerOptions - JavaScript Support</h1><p>对javascript文件的支持</p>
+<h2 id="allowJs"><a href="#allowJs" class="headerlink" title="allowJs"></a>allowJs</h2><p>允许<code>.ts</code>文件引用<code>.js</code>文件，这常用在javascript项目升级为typescript的过程中。</p>
+<h2 id="checkJs"><a href="#checkJs" class="headerlink" title="checkJs"></a>checkJs</h2><p>是否开启对<code>.js</code>文件的错误检查。</p>
+<h2 id="maxNodeModuleJsDepth"><a href="#maxNodeModuleJsDepth" class="headerlink" title="maxNodeModuleJsDepth"></a>maxNodeModuleJsDepth</h2><p>为<code>.js</code>文件寻找类型定义文件时，允许的最大依赖深度。</p>
+<p>正常情况下，我们会在<code>.js</code>文件的同级补写<code>.d.ts</code>文件，tsc会很快找到类型定义。但有时候确实要扩大搜索范围去找部分<code>.js</code>文件的类型定义文件。</p>
+<!--hexo-->
+
+<h1 id="compilerOptions-Interop-Constraints"><a href="#compilerOptions-Interop-Constraints" class="headerlink" title="compilerOptions - Interop Constraints"></a>compilerOptions - Interop Constraints</h1><p>(模块)互相操作的约束</p>
+<h2 id="allowSyntheticDefaultImports"><a href="#allowSyntheticDefaultImports" class="headerlink" title="allowSyntheticDefaultImports"></a>allowSyntheticDefaultImports</h2><p>允许合成<code>default</code>。</p>
+<p>如果一个模块A没有<code>export default</code>，那么另一个模块B在<code>import defaultA from &#39;./a&#39;</code>的时候，会抛出错误说A中没有default。</p>
+<p>有一个做法是<code>import * as defaultA from &#39;./a&#39;</code>曲线救国，但开启这个配置项后，可以直接使用<code>import defaultA from &#39;./a&#39;</code>这样的语法了。</p>
+<h2 id="esModuleInterop"><a href="#esModuleInterop" class="headerlink" title="esModuleInterop"></a>esModuleInterop</h2><p>esm在使用<code>import default from &#39;xxx&#39;</code>方式导入cjs的时候会抛出一个错误，因为cjs模块中没有default。开启此选项后，typescript会使用一些helpers去兼容cjs的default问题。</p>
+<h2 id="forceConsistentCasingInFileNames"><a href="#forceConsistentCasingInFileNames" class="headerlink" title="forceConsistentCasingInFileNames"></a>forceConsistentCasingInFileNames</h2><p>强制引用的模块文件名，和磁盘中的文件名保持一致的大小写。</p>
+<!--hexo-->
+
+<h1 id="compilerOptions-Language-and-Environment"><a href="#compilerOptions-Language-and-Environment" class="headerlink" title="compilerOptions - Language and Environment"></a>compilerOptions - Language and Environment</h1><p>和语言、环境有关的配置项。</p>
+<h2 id="jsx"><a href="#jsx" class="headerlink" title="jsx"></a>jsx</h2><p>如何解析<code>.tsx</code>文件中jsx语法？在2023年，react17+后，用<code>react-jsx</code>就行了。</p>
+<h2 id="lib"><a href="#lib" class="headerlink" title="lib"></a>lib</h2><p>在项目中使用的api类型定义集合。</p>
+<p>ts是需要知道你用的每一个javascript方法、属性的定义的，所以它内置了一批定义（比如Math.abs方法）。但是呢，后面新增方法的定义，需要你手工指定包含，ts才能理解了，比如Array.include方法，你就要包含ES2016。但好在你不需要记住这些，因为当你指定<code>target</code>字段时，lib会被默认设置成对应的值的。</p>
+<p>另外，大部分情况下，我们要访问一些和特定环境有关的特性，比如浏览器里的Dom特性，那么这儿额外引入<code>DOM</code>定义就行了。</p>
+<h2 id="target"><a href="#target" class="headerlink" title="target"></a>target</h2><p>项目编译的目标javascript版本。</p>
+<p>也就是你的目标客户端支持的最低javascript版本。注意它会影响默认的<code>lib</code>配置项。</p>
+<!--hexo-->
+
+<h1 id="compilerOptions-Compiler-Diagnostics"><a href="#compilerOptions-Compiler-Diagnostics" class="headerlink" title="compilerOptions - Compiler Diagnostics"></a>compilerOptions - Compiler Diagnostics</h1><p>编译诊断配置项。</p>
+<h2 id="diagnostics-x2F-extendedDiagnostics"><a href="#diagnostics-x2F-extendedDiagnostics" class="headerlink" title="diagnostics &#x2F; extendedDiagnostics"></a>diagnostics &#x2F; extendedDiagnostics</h2><p>打印出编译的信息，比如多少文件、编译时间等。</p>
+<p>extendedDiagnostics包含了diagnostics给出的所有信息，所以用extendedDiagnostics就行了。这是一个开启extendedDiagnostics的编译信息：</p>
+<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><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">Files:                         143</span><br><span class="line">Lines of Library:            38663</span><br><span class="line">Lines of Definitions:        82578</span><br><span class="line">Symbols:                     73362</span><br><span class="line">Types:                        1495</span><br><span class="line">Parse time:                  0.50s</span><br><span class="line">ResolveModule time:          0.03s</span><br><span class="line">Total time:                  1.01s</span><br></pre></td></tr></table></figure>
+
+<h2 id="explainFiles"><a href="#explainFiles" class="headerlink" title="explainFiles"></a>explainFiles</h2><p>打印出文件被编译的原因，也就是它们的引用链。</p>
+<h2 id="listEmittedFiles-x2F-listFiles"><a href="#listEmittedFiles-x2F-listFiles" class="headerlink" title="listEmittedFiles &#x2F; listFiles"></a>listEmittedFiles &#x2F; listFiles</h2><p>列出参与编译的文件。</p>
+<h2 id="traceResolution"><a href="#traceResolution" class="headerlink" title="traceResolution"></a>traceResolution</h2><p>打印每一个文件的编译流程。</p>
+<!--hexo-->
+
+<h1 id="compilerOptions-Completeness"><a href="#compilerOptions-Completeness" class="headerlink" title="compilerOptions - Completeness"></a>compilerOptions - Completeness</h1><p>完整性检测的配置项</p>
+<h2 id="skipLibCheck"><a href="#skipLibCheck" class="headerlink" title="skipLibCheck"></a>skipLibCheck</h2><p>跳过lib库的类型检测。</p>
+
+      
+    </div>
+    <footer class="article-footer">
+      <a data-url="https://taoliujun.github.io/blog/tsconfig-json/" data-id="clt8hne77001ri8oh2t85c2e4" data-title="关于tsconfig.json，最后更新2023/11月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      
+      
+      
+  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li></ul>
+
+    </footer>
+  </div>
+  
+</article>
+
+
+
+  
+    <article id="post-typescript-means" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+  <div class="article-meta">
+    <a href="/blog/typescript-means/" class="article-date">
+  <time class="dt-published" datetime="2023-08-02T17:52:04.000Z" itemprop="datePublished">2023-08-03</time>
+</a>
+    
+  <div class="article-category">
+    <a class="article-category-link" href="/blog/categories/TypeScript/">TypeScript</a>
+  </div>
+
+  </div>
+  <div class="article-inner">
+    
+    
+      <header class="article-header">
+        
+  
+    <h1 itemprop="name">
+      <a class="p-name article-title" href="/blog/typescript-means/">TypeScript的小手段，最后更新2023/12月...</a>
+    </h1>
+  
+
+      </header>
+    
+    <div class="e-content article-entry" itemprop="articleBody">
+      
+        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/22">https://github.com/taoliujun/blog/issues/22</a></p>
+<!--hexo
+---
+url: typescript-means
+tags:
+  - typescript
+---
+-->
+
+<p>TypeScript有一些小手段，评论区见。</p>
+<ul>
+<li><a href="#issuecomment-1663199481">as断言的另外写法</a></li>
+<li><a href="#issuecomment-1663206615">as const</a></li>
+<li><a href="#issuecomment-1663206898">非null | undefined声明</a></li>
+<li><a href="#issuecomment-1838108783">const enum</a></li>
+<li><a href="#issuecomment-1841954904">@ts-expect-error</a></li>
+<li><a href="#issuecomment-1842016788">解构变量可标记为“不使用”</a></li>
+</ul>
+<!--hexo-->
+
+<h1 id="as断言的另外写法"><a href="#as断言的另外写法" class="headerlink" title="as断言的另外写法"></a>as断言的另外写法</h1><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">const</span> myCanvas = &lt;<span class="title class_">HTMLCanvasElement</span>&gt;<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;main_canvas&quot;</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> myCanvas = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;main_canvas&quot;</span>) <span class="keyword">as</span> <span class="title class_">HTMLCanvasElement</span>;</span><br></pre></td></tr></table></figure>
+
+<p>但是不能再<code>.tsx</code>中使用。</p>
+<!--hexo-->
+
+<h1 id="as-const"><a href="#as-const" class="headerlink" title="as const"></a>as const</h1><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><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_">test1</span>(<span class="params">name: <span class="string">&#x27;html&#x27;</span> | <span class="string">&#x27;css&#x27;</span></span>) &#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><br><span class="line"><span class="keyword">const</span> obj1 = &#123; <span class="attr">name</span>: <span class="string">&#x27;html&#x27;</span> &#125;;</span><br><span class="line"><span class="title function_">test1</span>(obj1.<span class="property">name</span>);</span><br></pre></td></tr></table></figure>
+
+<p>上面的例子有一个类型错误：<code>Argument of type &#39;string&#39; is not assignable to parameter of type &#39;&quot;html&quot; | &quot;css&quot;&#39;.</code>，这是因为，ts对可读写的变量，推断出的类型是非字面类型。</p>
+<p>改下代码：</p>
+<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">const</span> obj1 = &#123; <span class="attr">name</span>: <span class="string">&#x27;html&#x27;</span> &#125; <span class="keyword">as</span> <span class="keyword">const</span>;</span><br></pre></td></tr></table></figure>
+
+<p><code>as const</code>是断言成该变量的字面类型，关于<code>const</code>的字面类型断言解释如下。</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> a = <span class="string">&#x27;1&#x27;</span>;</span><br><span class="line"><span class="keyword">const</span> b = <span class="string">&#x27;2&#x27;</span>;</span><br></pre></td></tr></table></figure>
+
+<p>ts对<code>a</code>的推断是<code>string</code>，对<code>b</code>的推断是<code>&#39;2&#39;</code>。在ts的类型推断的设计中，它总是尽可能的推断出更广的类型，但是对于<code>readOnly variable</code>，因为不可变，它的更广的类型就是字面类型。</p>
+<p>得益于 <a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481">https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481</a> ，还可以写成<code>let a = &lt;const&gt;&#39;1&#39;;</code> </p>
+<!--hexo-->
+
+<h1 id="非null-undefined声明"><a href="#非null-undefined声明" class="headerlink" title="非null | undefined声明"></a>非null | undefined声明</h1><p>有时候虽然声明一个变量类型是<code>null</code>，但在某个逻辑中它不可能是<code>null</code>，可以使用<code>!</code>来表示它不是<code>null</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> d1 = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;test1&#x27;</span>);</span><br><span class="line"><span class="comment">// &#x27;d1&#x27; is possibly &#x27;null&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(d1.<span class="title function_">getBoundingClientRect</span>());</span><br><span class="line"><span class="comment">// it is fine</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(d1!.<span class="title function_">getBoundingClientRect</span>());</span><br></pre></td></tr></table></figure>
+<!--hexo-->
+
+<h1 id="const-enum"><a href="#const-enum" class="headerlink" title="const enum"></a>const enum</h1><p>ts会将<code>enum</code>完整的编译出来，如下分别是ts源码和编译后的代码：</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><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">enum</span> <span class="title class_">Sex</span> &#123;</span><br><span class="line">    <span class="title class_">Man</span>,</span><br><span class="line">    <span class="title class_">Woman</span>,</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> sex = <span class="title class_">Sex</span>.<span class="property">Man</span>;</span><br></pre></td></tr></table></figure>
+
+<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 编译结果</span></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">Sex</span>;</span><br><span class="line">(<span class="keyword">function</span> (<span class="params">Sex</span>) &#123;</span><br><span class="line">    <span class="title class_">Sex</span>[<span class="title class_">Sex</span>[<span class="string">&quot;Man&quot;</span>] = <span class="number">0</span>] = <span class="string">&quot;Man&quot;</span>;</span><br><span class="line">    <span class="title class_">Sex</span>[<span class="title class_">Sex</span>[<span class="string">&quot;Woman&quot;</span>] = <span class="number">1</span>] = <span class="string">&quot;Woman&quot;</span>;</span><br><span class="line">&#125;)(<span class="title class_">Sex</span> || (<span class="title class_">Sex</span> = &#123;&#125;));</span><br><span class="line"><span class="keyword">const</span> sex = <span class="title class_">Sex</span>.<span class="property">Man</span>;</span><br></pre></td></tr></table></figure>
+
+<p>而很多时候，我们只是将<code>enum</code>当安全值来用，编译后只保留安全值就行了。加上<code>const</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></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="keyword">enum</span> <span class="title class_">Sex</span> &#123;</span><br><span class="line">    <span class="title class_">Man</span>,</span><br><span class="line">    <span class="title class_">Woman</span>,</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> sex = <span class="title class_">Sex</span>.<span class="property">Man</span>;</span><br></pre></td></tr></table></figure>
+
+<figure class="highlight javascript"><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"><span class="keyword">const</span> sex = <span class="number">0</span>;</span><br></pre></td></tr></table></figure>
+<!--hexo-->
+
+<h1 id="ts-expect-error"><a href="#ts-expect-error" class="headerlink" title="@ts-expect-error"></a>@ts-expect-error</h1><p>在一些场景下，我们需要故意传一个错误类型的变量，比如在写单元测试的时候。如下：</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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">// util.ts</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">test1</span>(<span class="params">p1: <span class="built_in">number</span></span>) &#123;</span><br><span class="line">  <span class="comment">// do</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// __test__</span></span><br><span class="line"><span class="title function_">test1</span>(<span class="string">&#x27;hello&#x27;</span>);</span><br></pre></td></tr></table></figure>
+
+<p>在如上的单元测试代码中，ts会反馈<code>&#39;hello&#39;</code>不是一个number，但这个类型错误正是我们期望的。那么就增加一个标记来处理它：</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><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">// __test__</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// @ts-expect-error</span></span><br><span class="line"><span class="title function_">test1</span>(<span class="string">&#x27;hello&#x27;</span>);</span><br></pre></td></tr></table></figure>
+
+<p>并且，如果这行语句没有类型错误的话，该注释本身会被认为是一个错误，以及时提醒开发者。</p>
+<figure class="highlight ts"><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">// Unused &#x27;@ts-expect-error&#x27; directive.ts(2578)</span></span><br><span class="line"><span class="comment">// @ts-expect-error</span></span><br><span class="line"><span class="title function_">test1</span>(<span class="number">123</span>);</span><br></pre></td></tr></table></figure>
+
+<p>它和<code>ts-ignore</code>的区别在这：<a target="_blank" rel="noopener" href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error">https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error</a></p>
+<!--hexo-->
+
+<h1 id="解构变量可标记为“不使用”"><a href="#解构变量可标记为“不使用”" class="headerlink" title="解构变量可标记为“不使用”"></a>解构变量可标记为“不使用”</h1><p>如下语句，ts会告诉你<code>first</code>未使用。</p>
+<figure class="highlight ts"><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">// &#x27;first&#x27; is declared but its value is never read.ts(6133)</span></span><br><span class="line"><span class="keyword">const</span> [first, second] = [<span class="number">1</span>, <span class="number">2</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;==&#x27;</span>, second);</span><br></pre></td></tr></table></figure>
+
+<p>但在场景里，就不需要使用第一个变量，ts提供了一个写法标记来忽略检查未使用的解构变量，就是在变量前加<code>_</code>。</p>
+<figure class="highlight ts"><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> [_first, second] = [<span class="number">1</span>, <span class="number">2</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;==&#x27;</span>, second);</span><br></pre></td></tr></table></figure>
+
+<p><strong>补充：</strong> 以上是ts4.2的特性，在更新的版本里，只要这样写就行了：<code>const [, second] = [1, 2]</code>。</p>
+
+      
+    </div>
+    <footer class="article-footer">
+      <a data-url="https://taoliujun.github.io/blog/typescript-means/" data-id="clt8hne78001ui8ohbxt1guu9" data-title="TypeScript的小手段，最后更新2023/12月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      
+      
+      
+  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li></ul>
+
+    </footer>
+  </div>
+  
+</article>
+
+
+
+  
     <article id="post-ast-in-css-module-auto-match" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   <div class="article-meta">
     <a href="/blog/ast-in-css-module-auto-match/" class="article-date">
@@ -145,7 +520,7 @@ <h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/ast-in-css-module-auto-match/" data-id="clt84xvxl0000jaot4v3ac2xf" data-title="AST 在 css module 自动匹配中的应用" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/ast-in-css-module-auto-match/" data-id="clt8hne6g0000i8ohaup9dgy1" data-title="AST 在 css module 自动匹配中的应用" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -209,7 +584,7 @@ <h2 id="useDeferredValue"><a href="#useDeferredValue" class="headerlink" title="
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/react-usedeferredvalue/" data-id="clt84xvy8001djaotbiagf004" data-title="React useDeferredValue在性能优化中的使用" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/react-usedeferredvalue/" data-id="clt8hne74001di8ohdnmwdmji" data-title="React useDeferredValue在性能优化中的使用" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -296,7 +671,7 @@ <h2 id="注意事项"><a href="#注意事项" class="headerlink" title="注意
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/react-usetransition/" data-id="clt84xvy9001gjaot8o6ygvby" data-title="React useTransition在性能优化中的使用" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/react-usetransition/" data-id="clt8hne75001gi8oh0ik11rjp" data-title="React useTransition在性能优化中的使用" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -370,7 +745,7 @@ <h1 id="组件需要更细粒度"><a href="#组件需要更细粒度" class="hea
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/react-performance%20optimization/" data-id="clt84xvy8001ajaothnsy91na" data-title="React的性能优化项，最后更新2023年07月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/react-performance%20optimization/" data-id="clt8hne73001ai8ohb0bo3x82" data-title="React的性能优化项，最后更新2023年07月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -449,7 +824,7 @@ <h2 id="小技巧"><a href="#小技巧" class="headerlink" title="小技巧"></a
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-destructuring/" data-id="clt84xvxs0003jaot2s4a2okt" data-title="整理ES6：解构赋值" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/es6-destructuring/" data-id="clt8hne6m0003i8ohghnpfqye" data-title="整理ES6：解构赋值" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -519,7 +894,7 @@ <h2 id="Null-判断运算符"><a href="#Null-判断运算符" class="headerlink"
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-operator/" data-id="clt84xvxu0006jaotgwer6fef" data-title="整理ES6：运算符" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/es6-operator/" data-id="clt8hne6o0006i8oh1ydc6nlv" data-title="整理ES6：运算符" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -596,7 +971,7 @@ <h2 id="Symbol-的全局注册"><a href="#Symbol-的全局注册" class="headerl
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-symbol/" data-id="clt84xvy0000kjaotckrf1agv" data-title="整理ES6：聊一聊Symbol " class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/es6-symbol/" data-id="clt8hne6u000ki8ohhd0t9mcp" data-title="整理ES6：聊一聊Symbol " class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -667,148 +1042,7 @@ <h2 id="注意点"><a href="#注意点" class="headerlink" title="注意点"></a
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-set/" data-id="clt84xvxz000gjaot1ny4bgke" data-title="整理ES6：Set真的挺好的" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
-      
-      
-      
-  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li></ul>
-
-    </footer>
-  </div>
-  
-</article>
-
-
-
-  
-    <article id="post-es6-map" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
-  <div class="article-meta">
-    <a href="/blog/es6-map/" class="article-date">
-  <time class="dt-published" datetime="2023-07-05T22:34:11.000Z" itemprop="datePublished">2023-07-06</time>
-</a>
-    
-  <div class="article-category">
-    <a class="article-category-link" href="/blog/categories/JavaScript/">JavaScript</a>
-  </div>
-
-  </div>
-  <div class="article-inner">
-    
-    
-      <header class="article-header">
-        
-  
-    <h1 itemprop="name">
-      <a class="p-name article-title" href="/blog/es6-map/">整理ES6：Map真的挺好的</a>
-    </h1>
-  
-
-      </header>
-    
-    <div class="e-content article-entry" itemprop="articleBody">
-      
-        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/13">https://github.com/taoliujun/blog/issues/13</a></p>
-<!--hexo
----
-url: es6-map
-tags:
-  - es6
-  - javascript
----
--->
-
-<p>在以前，想要维护一个集合去处理dom和其附加信息的关系，使用Array方式如下：</p>
-<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><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> list = [</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">dom</span>: dom1,</span><br><span class="line">    <span class="attr">info</span>: &#123; <span class="attr">area</span>: <span class="number">123</span> &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">dom</span>: dom2,</span><br><span class="line">    <span class="attr">info</span>: &#123; <span class="attr">area</span>: <span class="number">123</span> &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">];</span><br></pre></td></tr></table></figure>
-
-<p>如上代码有个很难受的问题，就是读取某个dom的时候需要遍历，而且每次都需要遍历，如果数据量大的话，性能会很差。</p>
-<p>那么改成Object方式：</p>
-<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><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> list = &#123;</span><br><span class="line">  <span class="attr">key1</span>: &#123;</span><br><span class="line">    <span class="attr">dom</span>: dom1,</span><br><span class="line">    <span class="attr">info</span>: &#123; <span class="attr">area</span>: <span class="number">123</span> &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">key2</span>: &#123;</span><br><span class="line">    <span class="attr">dom</span>: dom1,</span><br><span class="line">    <span class="attr">info</span>: &#123; <span class="attr">area</span>: <span class="number">123</span> &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
-
-<p>这种方式虽然可以快速读取，但是如何处理key和dom的关系又是一个麻烦；并且如果需要遍历的话，就需要先转成Array，然后再遍历，这样也很麻烦。</p>
-<h2 id="Map的基础用法"><a href="#Map的基础用法" class="headerlink" title="Map的基础用法"></a>Map的基础用法</h2><p>但是使用Map可以方便的解决上面的问题：</p>
-<figure class="highlight ts"><table><tr><td class="gutter"><pre><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> list = <span class="keyword">new</span> <span class="title class_">Map</span>([</span><br><span class="line">  [dom1, &#123; <span class="attr">area</span>: <span class="number">123</span> &#125;],</span><br><span class="line">  [dom2, &#123; <span class="attr">area</span>: <span class="number">123</span> &#125;],</span><br><span class="line">]);</span><br></pre></td></tr></table></figure>
-
-<p>这样就可以快速的读取dom对应的信息，也可以快速的遍历。</p>
-<h2 id="注意点"><a href="#注意点" class="headerlink" title="注意点"></a>注意点</h2><ul>
-<li>Map的键是内存引用，所以两个相同值的对象实例，它们是两个键。</li>
-<li>Map采取了和Set一样的比较算法，所以虽然NaN不严格相等于自身，但 Map 将其视为同一个键。</li>
-</ul>
-
-      
-    </div>
-    <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-map/" data-id="clt84xvxt0005jaotgxzi6inn" data-title="整理ES6：Map真的挺好的" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
-      
-      
-      
-  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li></ul>
-
-    </footer>
-  </div>
-  
-</article>
-
-
-
-  
-    <article id="post-es6-proxy" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
-  <div class="article-meta">
-    <a href="/blog/es6-proxy/" class="article-date">
-  <time class="dt-published" datetime="2023-07-05T22:33:50.000Z" itemprop="datePublished">2023-07-06</time>
-</a>
-    
-  <div class="article-category">
-    <a class="article-category-link" href="/blog/categories/JavaScript/">JavaScript</a>
-  </div>
-
-  </div>
-  <div class="article-inner">
-    
-    
-      <header class="article-header">
-        
-  
-    <h1 itemprop="name">
-      <a class="p-name article-title" href="/blog/es6-proxy/">整理ES6：Proxy的应用场景</a>
-    </h1>
-  
-
-      </header>
-    
-    <div class="e-content article-entry" itemprop="articleBody">
-      
-        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/12">https://github.com/taoliujun/blog/issues/12</a></p>
-<!--hexo
----
-url: es6-proxy
-tags:
-  - es6
-  - javascript
----
--->
-
-<p>Proxy拦截对象的操作，这些操作有13种：get、set、apply等。</p>
-<h2 id="get、set"><a href="#get、set" class="headerlink" title="get、set"></a>get、set</h2><p>拦截对象的读取和赋值操作。如下场景，如果用户角色是管理员，那么期望在读取姓名的时候，补充上“管理员”角色名称，并且管理员的姓名不允许被修改。</p>
-<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><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> user = &#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">sex</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">const</span> admin = <span class="keyword">new</span> <span class="title class_">Proxy</span>(</span><br><span class="line">  &#123; ...user &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">get</span>: <span class="function">(<span class="params">target, key</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (key === <span class="string">&quot;name&quot;</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">`管理员：<span class="subst">$&#123;target[key]&#125;</span>`</span>;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> target[key];</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="attr">set</span>: <span class="function">(<span class="params">target, key, value</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (key === <span class="string">&quot;name&quot;</span>) &#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&quot;不能修改管理员姓名&quot;</span>);</span><br><span class="line">      &#125;</span><br><span class="line">      target[key] = value;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">true</span>;</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="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;admin信息1：&quot;</span>, admin.<span class="property">name</span>, admin.<span class="property">sex</span>);</span><br><span class="line">admin.<span class="property">sex</span> = <span class="string">&quot;女&quot;</span>;</span><br><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">  admin.<span class="property">name</span> = <span class="string">&quot;李四&quot;</span>;</span><br><span class="line">&#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(e);</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">&quot;admin信息2：&quot;</span>, admin.<span class="property">name</span>, admin.<span class="property">sex</span>);</span><br></pre></td></tr></table></figure>
-
-<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><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">admin信息1： 管理员：张三 男</span><br><span class="line">Error: 不能修改管理员姓名</span><br><span class="line">    at Object.set (/Users/stao2/www/learn/something/1.ts:18:15)</span><br><span class="line">    at Object.&lt;anonymous&gt; (/Users/stao2/www/learn/something/1.ts:29:14)</span><br><span class="line">    at Module._compile (node:internal/modules/cjs/loader:1254:14)</span><br><span class="line">    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)</span><br><span class="line">    at Module.load (node:internal/modules/cjs/loader:1117:32)</span><br><span class="line">    at Module._load (node:internal/modules/cjs/loader:958:12)</span><br><span class="line">    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)</span><br><span class="line">    at node:internal/main/run_main_module:23:47</span><br><span class="line">admin信息2： 管理员：张三 女</span><br></pre></td></tr></table></figure>
-
-<p>利用这个规则，可以方便的给对象做一层扩展，而不用修改原来的对象逻辑。</p>
-<h2 id="apply"><a href="#apply" class="headerlink" title="apply"></a>apply</h2><p>apply可以拦截函数的调用，对用户的年龄，但是对不同的角色，校验规则不一样，而且校验代码挺多，函数里的校验就耦合了。例如：</p>
-<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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">function</span> <span class="title function_">validate</span>(<span class="params">role, age</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (role === <span class="string">&quot;student&quot;</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (age &lt; <span class="number">7</span>) &#123;</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">  <span class="keyword">if</span> (role === <span class="string">&quot;teacher&quot;</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (age &lt; <span class="number">24</span> || age &gt; <span class="number">60</span>) &#123;</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">  <span class="comment">// ...其他公用的代码</span></span><br><span class="line">  <span class="keyword">return</span> <span class="string">&quot;validate success&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="title function_">validate</span>(<span class="string">&quot;student&quot;</span>, <span class="number">4</span>), <span class="title function_">validate</span>(<span class="string">&quot;teacher&quot;</span>, <span class="number">123</span>));</span><br></pre></td></tr></table></figure>
-
-<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">不满足学生年龄 不满足教室年龄</span><br></pre></td></tr></table></figure>
-
-<p>但是利用Proxy，可以这样做：</p>
-<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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">function</span> <span class="title function_">validate</span>(<span class="params">user</span>) &#123;</span><br><span class="line">  <span class="comment">// ...其他公用的代码</span></span><br><span class="line">  <span class="keyword">return</span> <span class="string">&quot;validate success&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> validateStudent = <span class="keyword">new</span> <span class="title class_">Proxy</span>(validate, &#123;</span><br><span class="line">  <span class="attr">apply</span>: <span class="function">(<span class="params">target, thisArg, args</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> [user] = args;</span><br><span class="line">    <span class="keyword">if</span> (user.<span class="property">age</span> &lt; <span class="number">7</span>) &#123;</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">    <span class="keyword">return</span> <span class="title function_">target</span>(args);</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 function_">validateStudent</span>(&#123; <span class="attr">age</span>: <span class="number">7</span> &#125;),<span class="title function_">validateStudent</span>(&#123; <span class="attr">age</span>: <span class="number">8</span> &#125;));</span><br></pre></td></tr></table></figure>
-
-<h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><p>Proxy还有<code>has</code>，<code>construct</code>等拦截，先知道有这些东西，用的时候看文档用Proxy实现，而不是自己两眼一抹黑写了半天自己杂乱的代码。</p>
-<p>值得一提的是，很多MVVM框架是用Proxy做数据劫持的，例如Vue3，这样可以监听到对象的变化，从而实现响应式。</p>
-
-      
-    </div>
-    <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-proxy/" data-id="clt84xvxw000ajaot16m5fl0w" data-title="整理ES6：Proxy的应用场景" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/es6-set/" data-id="clt8hne6t000gi8ohfc7n582s" data-title="整理ES6：Set真的挺好的" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -847,7 +1081,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -857,7 +1091,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -879,23 +1113,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/page/3/index.html b/dist/page/3/index.html
index eb3c750..36507e9 100644
--- a/dist/page/3/index.html
+++ b/dist/page/3/index.html
@@ -80,6 +80,147 @@ <h2 id="subtitle-wrap">
       <div class="outer">
         <section id="main">
   
+    <article id="post-es6-map" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+  <div class="article-meta">
+    <a href="/blog/es6-map/" class="article-date">
+  <time class="dt-published" datetime="2023-07-05T22:34:11.000Z" itemprop="datePublished">2023-07-06</time>
+</a>
+    
+  <div class="article-category">
+    <a class="article-category-link" href="/blog/categories/JavaScript/">JavaScript</a>
+  </div>
+
+  </div>
+  <div class="article-inner">
+    
+    
+      <header class="article-header">
+        
+  
+    <h1 itemprop="name">
+      <a class="p-name article-title" href="/blog/es6-map/">整理ES6：Map真的挺好的</a>
+    </h1>
+  
+
+      </header>
+    
+    <div class="e-content article-entry" itemprop="articleBody">
+      
+        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/13">https://github.com/taoliujun/blog/issues/13</a></p>
+<!--hexo
+---
+url: es6-map
+tags:
+  - es6
+  - javascript
+---
+-->
+
+<p>在以前，想要维护一个集合去处理dom和其附加信息的关系，使用Array方式如下：</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><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> list = [</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">dom</span>: dom1,</span><br><span class="line">    <span class="attr">info</span>: &#123; <span class="attr">area</span>: <span class="number">123</span> &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">dom</span>: dom2,</span><br><span class="line">    <span class="attr">info</span>: &#123; <span class="attr">area</span>: <span class="number">123</span> &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">];</span><br></pre></td></tr></table></figure>
+
+<p>如上代码有个很难受的问题，就是读取某个dom的时候需要遍历，而且每次都需要遍历，如果数据量大的话，性能会很差。</p>
+<p>那么改成Object方式：</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><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> list = &#123;</span><br><span class="line">  <span class="attr">key1</span>: &#123;</span><br><span class="line">    <span class="attr">dom</span>: dom1,</span><br><span class="line">    <span class="attr">info</span>: &#123; <span class="attr">area</span>: <span class="number">123</span> &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">key2</span>: &#123;</span><br><span class="line">    <span class="attr">dom</span>: dom1,</span><br><span class="line">    <span class="attr">info</span>: &#123; <span class="attr">area</span>: <span class="number">123</span> &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+
+<p>这种方式虽然可以快速读取，但是如何处理key和dom的关系又是一个麻烦；并且如果需要遍历的话，就需要先转成Array，然后再遍历，这样也很麻烦。</p>
+<h2 id="Map的基础用法"><a href="#Map的基础用法" class="headerlink" title="Map的基础用法"></a>Map的基础用法</h2><p>但是使用Map可以方便的解决上面的问题：</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><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> list = <span class="keyword">new</span> <span class="title class_">Map</span>([</span><br><span class="line">  [dom1, &#123; <span class="attr">area</span>: <span class="number">123</span> &#125;],</span><br><span class="line">  [dom2, &#123; <span class="attr">area</span>: <span class="number">123</span> &#125;],</span><br><span class="line">]);</span><br></pre></td></tr></table></figure>
+
+<p>这样就可以快速的读取dom对应的信息，也可以快速的遍历。</p>
+<h2 id="注意点"><a href="#注意点" class="headerlink" title="注意点"></a>注意点</h2><ul>
+<li>Map的键是内存引用，所以两个相同值的对象实例，它们是两个键。</li>
+<li>Map采取了和Set一样的比较算法，所以虽然NaN不严格相等于自身，但 Map 将其视为同一个键。</li>
+</ul>
+
+      
+    </div>
+    <footer class="article-footer">
+      <a data-url="https://taoliujun.github.io/blog/es6-map/" data-id="clt8hne6n0005i8ohal4i8rav" data-title="整理ES6：Map真的挺好的" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      
+      
+      
+  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li></ul>
+
+    </footer>
+  </div>
+  
+</article>
+
+
+
+  
+    <article id="post-es6-proxy" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+  <div class="article-meta">
+    <a href="/blog/es6-proxy/" class="article-date">
+  <time class="dt-published" datetime="2023-07-05T22:33:50.000Z" itemprop="datePublished">2023-07-06</time>
+</a>
+    
+  <div class="article-category">
+    <a class="article-category-link" href="/blog/categories/JavaScript/">JavaScript</a>
+  </div>
+
+  </div>
+  <div class="article-inner">
+    
+    
+      <header class="article-header">
+        
+  
+    <h1 itemprop="name">
+      <a class="p-name article-title" href="/blog/es6-proxy/">整理ES6：Proxy的应用场景</a>
+    </h1>
+  
+
+      </header>
+    
+    <div class="e-content article-entry" itemprop="articleBody">
+      
+        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/12">https://github.com/taoliujun/blog/issues/12</a></p>
+<!--hexo
+---
+url: es6-proxy
+tags:
+  - es6
+  - javascript
+---
+-->
+
+<p>Proxy拦截对象的操作，这些操作有13种：get、set、apply等。</p>
+<h2 id="get、set"><a href="#get、set" class="headerlink" title="get、set"></a>get、set</h2><p>拦截对象的读取和赋值操作。如下场景，如果用户角色是管理员，那么期望在读取姓名的时候，补充上“管理员”角色名称，并且管理员的姓名不允许被修改。</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><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> user = &#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">sex</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">const</span> admin = <span class="keyword">new</span> <span class="title class_">Proxy</span>(</span><br><span class="line">  &#123; ...user &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">get</span>: <span class="function">(<span class="params">target, key</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (key === <span class="string">&quot;name&quot;</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">`管理员：<span class="subst">$&#123;target[key]&#125;</span>`</span>;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> target[key];</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="attr">set</span>: <span class="function">(<span class="params">target, key, value</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (key === <span class="string">&quot;name&quot;</span>) &#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&quot;不能修改管理员姓名&quot;</span>);</span><br><span class="line">      &#125;</span><br><span class="line">      target[key] = value;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">true</span>;</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="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;admin信息1：&quot;</span>, admin.<span class="property">name</span>, admin.<span class="property">sex</span>);</span><br><span class="line">admin.<span class="property">sex</span> = <span class="string">&quot;女&quot;</span>;</span><br><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">  admin.<span class="property">name</span> = <span class="string">&quot;李四&quot;</span>;</span><br><span class="line">&#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(e);</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">&quot;admin信息2：&quot;</span>, admin.<span class="property">name</span>, admin.<span class="property">sex</span>);</span><br></pre></td></tr></table></figure>
+
+<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><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">admin信息1： 管理员：张三 男</span><br><span class="line">Error: 不能修改管理员姓名</span><br><span class="line">    at Object.set (/Users/stao2/www/learn/something/1.ts:18:15)</span><br><span class="line">    at Object.&lt;anonymous&gt; (/Users/stao2/www/learn/something/1.ts:29:14)</span><br><span class="line">    at Module._compile (node:internal/modules/cjs/loader:1254:14)</span><br><span class="line">    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)</span><br><span class="line">    at Module.load (node:internal/modules/cjs/loader:1117:32)</span><br><span class="line">    at Module._load (node:internal/modules/cjs/loader:958:12)</span><br><span class="line">    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)</span><br><span class="line">    at node:internal/main/run_main_module:23:47</span><br><span class="line">admin信息2： 管理员：张三 女</span><br></pre></td></tr></table></figure>
+
+<p>利用这个规则，可以方便的给对象做一层扩展，而不用修改原来的对象逻辑。</p>
+<h2 id="apply"><a href="#apply" class="headerlink" title="apply"></a>apply</h2><p>apply可以拦截函数的调用，对用户的年龄，但是对不同的角色，校验规则不一样，而且校验代码挺多，函数里的校验就耦合了。例如：</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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">function</span> <span class="title function_">validate</span>(<span class="params">role, age</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (role === <span class="string">&quot;student&quot;</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (age &lt; <span class="number">7</span>) &#123;</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">  <span class="keyword">if</span> (role === <span class="string">&quot;teacher&quot;</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (age &lt; <span class="number">24</span> || age &gt; <span class="number">60</span>) &#123;</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">  <span class="comment">// ...其他公用的代码</span></span><br><span class="line">  <span class="keyword">return</span> <span class="string">&quot;validate success&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="title function_">validate</span>(<span class="string">&quot;student&quot;</span>, <span class="number">4</span>), <span class="title function_">validate</span>(<span class="string">&quot;teacher&quot;</span>, <span class="number">123</span>));</span><br></pre></td></tr></table></figure>
+
+<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">不满足学生年龄 不满足教室年龄</span><br></pre></td></tr></table></figure>
+
+<p>但是利用Proxy，可以这样做：</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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">function</span> <span class="title function_">validate</span>(<span class="params">user</span>) &#123;</span><br><span class="line">  <span class="comment">// ...其他公用的代码</span></span><br><span class="line">  <span class="keyword">return</span> <span class="string">&quot;validate success&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> validateStudent = <span class="keyword">new</span> <span class="title class_">Proxy</span>(validate, &#123;</span><br><span class="line">  <span class="attr">apply</span>: <span class="function">(<span class="params">target, thisArg, args</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> [user] = args;</span><br><span class="line">    <span class="keyword">if</span> (user.<span class="property">age</span> &lt; <span class="number">7</span>) &#123;</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">    <span class="keyword">return</span> <span class="title function_">target</span>(args);</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 function_">validateStudent</span>(&#123; <span class="attr">age</span>: <span class="number">7</span> &#125;),<span class="title function_">validateStudent</span>(&#123; <span class="attr">age</span>: <span class="number">8</span> &#125;));</span><br></pre></td></tr></table></figure>
+
+<h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><p>Proxy还有<code>has</code>，<code>construct</code>等拦截，先知道有这些东西，用的时候看文档用Proxy实现，而不是自己两眼一抹黑写了半天自己杂乱的代码。</p>
+<p>值得一提的是，很多MVVM框架是用Proxy做数据劫持的，例如Vue3，这样可以监听到对象的变化，从而实现响应式。</p>
+
+      
+    </div>
+    <footer class="article-footer">
+      <a data-url="https://taoliujun.github.io/blog/es6-proxy/" data-id="clt8hne6q000ai8oh3czc7dtv" data-title="整理ES6：Proxy的应用场景" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      
+      
+      
+  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li></ul>
+
+    </footer>
+  </div>
+  
+</article>
+
+
+
+  
     <article id="post-es6-reflect" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   <div class="article-meta">
     <a href="/blog/es6-reflect/" class="article-date">
@@ -139,7 +280,7 @@ <h2 id="delete"><a href="#delete" class="headerlink" title="delete"></a>delete</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-reflect/" data-id="clt84xvxy000djaot35e97wk9" data-title="整理ES6：Reflect和Object的关系" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/es6-reflect/" data-id="clt8hne6s000di8ohhg557c68" data-title="整理ES6：Reflect和Object的关系" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -214,7 +355,7 @@ <h2 id="下载workflow归档"><a href="#下载workflow归档" class="headerlink"
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-runs/" data-id="clt84xvy50011jaot8v6xhhiy" data-title="6. GitHub Actions - Managing workflow runs" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-runs/" data-id="clt8hne710011i8oh7eok4ahc" data-title="6. GitHub Actions - Managing workflow runs" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -285,7 +426,7 @@ <h2 id="默认值"><a href="#默认值" class="headerlink" title="默认值"></a
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-jobs/" data-id="clt84xvy3000sjaot3njb3qkh" data-title="5. GitHub Actions - Using jobs" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-jobs/" data-id="clt8hne6y000si8oh4dkm54lp" data-title="5. GitHub Actions - Using jobs" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -360,7 +501,7 @@ <h2 id="缓存"><a href="#缓存" class="headerlink" title="缓存"></a>缓存</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-workflows/" data-id="clt84xvy70016jaotdutv2p3p" data-title="4. GitHub Actions - Using workflows" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-workflows/" data-id="clt8hne720016i8ohef8w3v84" data-title="4. GitHub Actions - Using workflows" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -421,7 +562,7 @@ <h1 itemprop="name">
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-examples/" data-id="clt84xvy1000njaotb0p72f0f" data-title="3. GitHub Actions - Examples" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-examples/" data-id="clt8hne6w000ni8oh3793hs4v" data-title="3. GitHub Actions - Examples" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -555,7 +696,7 @@ <h2 id="收费和限制"><a href="#收费和限制" class="headerlink" title="
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-learn/" data-id="clt84xvy3000ujaot0c50f62v" data-title="2. GitHub Actions - Learn GitHub Actions" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-learn/" data-id="clt8hne6z000ui8ohc8en5vzx" data-title="2. GitHub Actions - Learn GitHub Actions" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -622,7 +763,7 @@ <h1 itemprop="name">
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-quickstart/" data-id="clt84xvy4000yjaot9qx41ilj" data-title="1. GitHub Actions - Quickstart" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-quickstart/" data-id="clt8hne70000yi8ohfpzzd528" data-title="1. GitHub Actions - Quickstart" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -691,7 +832,7 @@ <h2 id="和CI的关系"><a href="#和CI的关系" class="headerlink" title="和C
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/github-actions-intro/" data-id="clt84xvy2000qjaot7pv5e9k6" data-title="0. GitHub Actions - Intro" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/github-actions-intro/" data-id="clt8hne6x000qi8ohhrsiazvn" data-title="0. GitHub Actions - Intro" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -705,199 +846,6 @@ <h2 id="和CI的关系"><a href="#和CI的关系" class="headerlink" title="和C
 
 
   
-    <article id="post-write-components-elegantly-using-radix" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
-  <div class="article-meta">
-    <a href="/blog/write-components-elegantly-using-radix/" class="article-date">
-  <time class="dt-published" datetime="2023-07-05T22:25:58.000Z" itemprop="datePublished">2023-07-06</time>
-</a>
-    
-  <div class="article-category">
-    <a class="article-category-link" href="/blog/categories/React/">React</a>
-  </div>
-
-  </div>
-  <div class="article-inner">
-    
-    
-      <header class="article-header">
-        
-  
-    <h1 itemprop="name">
-      <a class="p-name article-title" href="/blog/write-components-elegantly-using-radix/">从Radix看如何优雅写组件</a>
-    </h1>
-  
-
-      </header>
-    
-    <div class="e-content article-entry" itemprop="articleBody">
-      
-        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/3">https://github.com/taoliujun/blog/issues/3</a></p>
-<!--hexo
----
-url: write-components-elegantly-using-radix
-tags:
-  - radix
----
--->
-
-<h2 id="组件的困扰"><a href="#组件的困扰" class="headerlink" title="组件的困扰"></a>组件的困扰</h2><p>在更早以前，网页应用很简单，开发者自己维护简单的交互组件，通过入参去控制组件有不一样的渲染、样式、交互。后来React&#x2F;Vue等框架的到来，使网页应用变得愈发复杂，于是使用Element、Ant、Mui之类的UI组件来提高开发效率，但使用后发现一些问题，其中常见的是：  </p>
-<ol>
-<li>难以改变样式。</li>
-<li>几乎不能改变dom结构。</li>
-</ol>
-<p>虽然很多组件库提供了css variables、less&#x2F;sass包等方式让人们来定义样式，但离精细定义差些距离。而且固化的组件dom结构让开发者难以完成产品、UI设计师要求的定制化二次开发。</p>
-<p>于是部分人开始从0或基于更基础的UI组件来开发自定义组件以满足自定义样式和dom结构的目的，但问题是维护这些基础组件又是一个麻烦，或者说这些组件放到另一个项目中，是否又需要是另一个dom结构？</p>
-<p>于是，有开源项目在解决这样的事，比较出众的是Mui-Base、Radix，它们都旨在提供一套Uncontrolled、Unstyled、Opened的基础组件以便大家二次封装。我在阅读实践了这两个方案后，选择了使用Radix继续深入下去，主要是因为Radix将组件拆分的更为精细。</p>
-<h2 id="Radix的理念"><a href="#Radix的理念" class="headerlink" title="Radix的理念"></a>Radix的理念</h2><p>它提出了几个特性，一起看看吧。</p>
-<h3 id="Accessible-可访问性"><a href="#Accessible-可访问性" class="headerlink" title="Accessible 可访问性"></a>Accessible 可访问性</h3><p>如果你的应用对可访问性有要求，那Radix会有很大帮助，它遵循了一个 <code>WAI-ARIA</code> 的设计规范。但我对可访问性的研究不多，在此不表了。</p>
-<h3 id="Unstyled-无样式"><a href="#Unstyled-无样式" class="headerlink" title="Unstyled 无样式"></a>Unstyled 无样式</h3><p>顾名思义的是，它提供的组件都是不带任何样式的，你可以使用任意样式方案去开发。这也解决了上文提到的重要问题：自定义样式。</p>
-<h3 id="Opened-开放"><a href="#Opened-开放" class="headerlink" title="Opened 开放"></a>Opened 开放</h3><p>我认为Radix的开发性做到了优秀的程度，它的每个组件都太颗粒了，你可以精细的自由搭配，组装成想要的。</p>
-<h3 id="Incremental-渐进的"><a href="#Incremental-渐进的" class="headerlink" title="Incremental 渐进的"></a>Incremental 渐进的</h3><p>可以只安装我们需要用到的组件库，比如<code>npm install @radix-ui/react-tooltip</code>。</p>
-<h2 id="一个小例子"><a href="#一个小例子" class="headerlink" title="一个小例子"></a>一个小例子</h2><p>我们要做一个tooltip，如果自己写，需要考虑样式、状态控制、可访问性等。但是在Radix里，采用简单的封装和自定义样式即可：</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> <span class="title class_">Popover</span> <span class="keyword">from</span> <span class="string">&#x27;@radix-ui/react-popover&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; <span class="variable constant_">FC</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title class_">Main</span>: <span class="variable constant_">FC</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">Popover.Root</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Popover.Trigger</span>&gt;</span>点击我<span class="tag">&lt;/<span class="name">Popover.Trigger</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Popover.Portal</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">Popover.Content</span> <span class="attr">sideOffset</span>=<span class="string">&#123;5&#125;</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">Popover.Arrow</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;/<span class="name">Popover.Content</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">Popover.Portal</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">Popover.Root</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
-
-<p>在上面的代码中，组装Radix提供的popover组件的颗粒，不加任意className就得到一个简单的tooltip，并且”点击我”可进行交互。如图：</p>
-<p><img src="https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271427990.png"></p>
-<p>接着，我随便加了点tailwindcss。</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">return</span> (</span><br><span class="line">       <span class="language-xml"><span class="tag">&lt;<span class="name">Popover.Root</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">           <span class="tag">&lt;<span class="name">Popover.Trigger</span> <span class="attr">className</span>=<span class="string">&quot;text-red&quot;</span>&gt;</span>点击我<span class="tag">&lt;/<span class="name">Popover.Trigger</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">           <span class="tag">&lt;<span class="name">Popover.Portal</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">               <span class="tag">&lt;<span class="name">Popover.Content</span> <span class="attr">className</span>=<span class="string">&quot;border border-solid border-black&quot;</span> <span class="attr">sideOffset</span>=<span class="string">&#123;5&#125;</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">Popover.Arrow</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">               <span class="tag">&lt;/<span class="name">Popover.Content</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">           <span class="tag">&lt;/<span class="name">Popover.Portal</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">       <span class="tag">&lt;/<span class="name">Popover.Root</span>&gt;</span></span></span><br><span class="line">   );</span><br></pre></td></tr></table></figure>
-
-<p>就得到如图的效果：</p>
-<p><img src="https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271430207.png"></p>
-<p>Radix的组件将几乎所有的state变化，反馈到<code>data-state</code>上方便你精细的定制样式了。</p>
-<h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><p>Radix提供了很多小细节让你可以优雅的封装组件，不限于：</p>
-<ul>
-<li>提供<code>forceMount</code>以方便你的组件能运行完整的动画。</li>
-<li>提供<code>asChild</code>以方便你更精细的自定义dom。</li>
-<li>支持SSR。</li>
-<li>提供了许多现成组件，并且足够颗粒化，让你更快更优化的定制出自己的组件哟。</li>
-</ul>
-<p>相比较使用它，理解它的理念才能消化为自己的知识，个人认为即便是自己开发的基础组件，以精细颗粒控制为目标，也不失为一个很棒的思路。</p>
-<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><ul>
-<li><a target="_blank" rel="noopener" href="https://www.radix-ui.com/">https://www.radix-ui.com/</a></li>
-</ul>
-
-      
-    </div>
-    <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/write-components-elegantly-using-radix/" data-id="clt84xvyh002fjaot22n7hlil" data-title="从Radix看如何优雅写组件" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
-      
-      
-      
-  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li></ul>
-
-    </footer>
-  </div>
-  
-</article>
-
-
-
-  
-    <article id="post-es6-promise" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
-  <div class="article-meta">
-    <a href="/blog/es6-promise/" class="article-date">
-  <time class="dt-published" datetime="2023-07-05T22:21:12.000Z" itemprop="datePublished">2023-07-06</time>
-</a>
-    
-  <div class="article-category">
-    <a class="article-category-link" href="/blog/categories/JavaScript/">JavaScript</a>
-  </div>
-
-  </div>
-  <div class="article-inner">
-    
-    
-      <header class="article-header">
-        
-  
-    <h1 itemprop="name">
-      <a class="p-name article-title" href="/blog/es6-promise/">整理ES6：Promise的忽略点和几个方法的区别</a>
-    </h1>
-  
-
-      </header>
-    
-    <div class="e-content article-entry" itemprop="articleBody">
-      
-        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/2">https://github.com/taoliujun/blog/issues/2</a></p>
-<!--hexo
----
-url: es6-promise
-tags:
-  - es6
-  - javascript
----
--->
-
-<p><strong>Promise</strong>是业务开发中使用率最高的ES6方法了，但日常容易忽略几个点，以及记不得它几个方法的区别，现记录。</p>
-<h2 id="容易忽略的点"><a href="#容易忽略的点" class="headerlink" title="容易忽略的点"></a>容易忽略的点</h2><ul>
-<li><code>catch</code>是<code>then</code>的语法糖，但是<code>catch</code>可以捕获<code>then</code>中的异常，而<code>then</code>的第二个回调函数不行。</li>
-<li>如果没有使用<code>catch</code>捕获错误，那么Promise的错误不会传递到外层，即使外层有<code>try...catch</code>也捕获不到。</li>
-<li>因为<code>catch</code>捕获了<code>rejected</code>且返回新的实例，所以在<code>all</code>等方法中，p1实现了<code>catch</code>方法，则p1的<code>rejected</code>不会触发p的<code>catch</code>。</li>
-</ul>
-<h2 id="几个方法的区别"><a href="#几个方法的区别" class="headerlink" title="几个方法的区别"></a>几个方法的区别</h2><table>
-<thead>
-<tr>
-<th>方法</th>
-<th>resolved的前提</th>
-<th>rejected的前提</th>
-<th>说明</th>
-</tr>
-</thead>
-<tbody><tr>
-<td>all</td>
-<td>全部resolved</td>
-<td>任一rejected</td>
-<td>-</td>
-</tr>
-<tr>
-<td>race</td>
-<td>任一resolved</td>
-<td>任一rejected</td>
-<td>任一率先改变的状态，传递给p</td>
-</tr>
-<tr>
-<td>allSettled</td>
-<td>全部改变</td>
-<td>-</td>
-<td>状态全部改变，传递给p。格式为: <br /> <code>&#123;status: &#39;fulfilled&#39;, value: value&#125;</code> <br/> 或者 <br/> <code>&#123;status: &#39;rejected&#39;, reason: reason&#125;</code></td>
-</tr>
-<tr>
-<td>any</td>
-<td>任一resolved</td>
-<td>全部rejected</td>
-<td>传递给<code>catch</code>的是一个<code>AggregateError</code>实例</td>
-</tr>
-</tbody></table>
-<!--hexo-->
-
-<h1 id="AggregateError"><a href="#AggregateError" class="headerlink" title="AggregateError"></a>AggregateError</h1><p>AggregateError封装了Error数组，它的结构是：</p>
-<blockquote>
-<p>AggregateError(errors[, message])</p>
-</blockquote>
-<p><code>AggregateError()</code>构造函数可以接受两个参数。</p>
-<ul>
-<li>errors：数组，它的每个成员都是一个错误对象。该参数是必须的。</li>
-<li>message：字符串，表示 AggregateError 抛出时的提示信息。该参数是可选的。</li>
-</ul>
-
-      
-    </div>
-    <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/es6-promise/" data-id="clt84xvxv0009jaotepjnf3w0" data-title="整理ES6：Promise的忽略点和几个方法的区别" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
-      
-      
-      
-  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li></ul>
-
-    </footer>
-  </div>
-  
-</article>
-
-
-
-  
 
 
   <nav id="page-nav">
@@ -923,7 +871,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -933,7 +881,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -955,23 +903,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/page/4/index.html b/dist/page/4/index.html
index bf4d15f..d276225 100644
--- a/dist/page/4/index.html
+++ b/dist/page/4/index.html
@@ -80,6 +80,199 @@ <h2 id="subtitle-wrap">
       <div class="outer">
         <section id="main">
   
+    <article id="post-write-components-elegantly-using-radix" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+  <div class="article-meta">
+    <a href="/blog/write-components-elegantly-using-radix/" class="article-date">
+  <time class="dt-published" datetime="2023-07-05T22:25:58.000Z" itemprop="datePublished">2023-07-06</time>
+</a>
+    
+  <div class="article-category">
+    <a class="article-category-link" href="/blog/categories/React/">React</a>
+  </div>
+
+  </div>
+  <div class="article-inner">
+    
+    
+      <header class="article-header">
+        
+  
+    <h1 itemprop="name">
+      <a class="p-name article-title" href="/blog/write-components-elegantly-using-radix/">从Radix看如何优雅写组件</a>
+    </h1>
+  
+
+      </header>
+    
+    <div class="e-content article-entry" itemprop="articleBody">
+      
+        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/3">https://github.com/taoliujun/blog/issues/3</a></p>
+<!--hexo
+---
+url: write-components-elegantly-using-radix
+tags:
+  - radix
+---
+-->
+
+<h2 id="组件的困扰"><a href="#组件的困扰" class="headerlink" title="组件的困扰"></a>组件的困扰</h2><p>在更早以前，网页应用很简单，开发者自己维护简单的交互组件，通过入参去控制组件有不一样的渲染、样式、交互。后来React&#x2F;Vue等框架的到来，使网页应用变得愈发复杂，于是使用Element、Ant、Mui之类的UI组件来提高开发效率，但使用后发现一些问题，其中常见的是：  </p>
+<ol>
+<li>难以改变样式。</li>
+<li>几乎不能改变dom结构。</li>
+</ol>
+<p>虽然很多组件库提供了css variables、less&#x2F;sass包等方式让人们来定义样式，但离精细定义差些距离。而且固化的组件dom结构让开发者难以完成产品、UI设计师要求的定制化二次开发。</p>
+<p>于是部分人开始从0或基于更基础的UI组件来开发自定义组件以满足自定义样式和dom结构的目的，但问题是维护这些基础组件又是一个麻烦，或者说这些组件放到另一个项目中，是否又需要是另一个dom结构？</p>
+<p>于是，有开源项目在解决这样的事，比较出众的是Mui-Base、Radix，它们都旨在提供一套Uncontrolled、Unstyled、Opened的基础组件以便大家二次封装。我在阅读实践了这两个方案后，选择了使用Radix继续深入下去，主要是因为Radix将组件拆分的更为精细。</p>
+<h2 id="Radix的理念"><a href="#Radix的理念" class="headerlink" title="Radix的理念"></a>Radix的理念</h2><p>它提出了几个特性，一起看看吧。</p>
+<h3 id="Accessible-可访问性"><a href="#Accessible-可访问性" class="headerlink" title="Accessible 可访问性"></a>Accessible 可访问性</h3><p>如果你的应用对可访问性有要求，那Radix会有很大帮助，它遵循了一个 <code>WAI-ARIA</code> 的设计规范。但我对可访问性的研究不多，在此不表了。</p>
+<h3 id="Unstyled-无样式"><a href="#Unstyled-无样式" class="headerlink" title="Unstyled 无样式"></a>Unstyled 无样式</h3><p>顾名思义的是，它提供的组件都是不带任何样式的，你可以使用任意样式方案去开发。这也解决了上文提到的重要问题：自定义样式。</p>
+<h3 id="Opened-开放"><a href="#Opened-开放" class="headerlink" title="Opened 开放"></a>Opened 开放</h3><p>我认为Radix的开发性做到了优秀的程度，它的每个组件都太颗粒了，你可以精细的自由搭配，组装成想要的。</p>
+<h3 id="Incremental-渐进的"><a href="#Incremental-渐进的" class="headerlink" title="Incremental 渐进的"></a>Incremental 渐进的</h3><p>可以只安装我们需要用到的组件库，比如<code>npm install @radix-ui/react-tooltip</code>。</p>
+<h2 id="一个小例子"><a href="#一个小例子" class="headerlink" title="一个小例子"></a>一个小例子</h2><p>我们要做一个tooltip，如果自己写，需要考虑样式、状态控制、可访问性等。但是在Radix里，采用简单的封装和自定义样式即可：</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> <span class="title class_">Popover</span> <span class="keyword">from</span> <span class="string">&#x27;@radix-ui/react-popover&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; <span class="variable constant_">FC</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title class_">Main</span>: <span class="variable constant_">FC</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">Popover.Root</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Popover.Trigger</span>&gt;</span>点击我<span class="tag">&lt;/<span class="name">Popover.Trigger</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Popover.Portal</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">Popover.Content</span> <span class="attr">sideOffset</span>=<span class="string">&#123;5&#125;</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">Popover.Arrow</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;/<span class="name">Popover.Content</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">Popover.Portal</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">Popover.Root</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
+
+<p>在上面的代码中，组装Radix提供的popover组件的颗粒，不加任意className就得到一个简单的tooltip，并且”点击我”可进行交互。如图：</p>
+<p><img src="https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271427990.png"></p>
+<p>接着，我随便加了点tailwindcss。</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">return</span> (</span><br><span class="line">       <span class="language-xml"><span class="tag">&lt;<span class="name">Popover.Root</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">           <span class="tag">&lt;<span class="name">Popover.Trigger</span> <span class="attr">className</span>=<span class="string">&quot;text-red&quot;</span>&gt;</span>点击我<span class="tag">&lt;/<span class="name">Popover.Trigger</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">           <span class="tag">&lt;<span class="name">Popover.Portal</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">               <span class="tag">&lt;<span class="name">Popover.Content</span> <span class="attr">className</span>=<span class="string">&quot;border border-solid border-black&quot;</span> <span class="attr">sideOffset</span>=<span class="string">&#123;5&#125;</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">Popover.Arrow</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">               <span class="tag">&lt;/<span class="name">Popover.Content</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">           <span class="tag">&lt;/<span class="name">Popover.Portal</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">       <span class="tag">&lt;/<span class="name">Popover.Root</span>&gt;</span></span></span><br><span class="line">   );</span><br></pre></td></tr></table></figure>
+
+<p>就得到如图的效果：</p>
+<p><img src="https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271430207.png"></p>
+<p>Radix的组件将几乎所有的state变化，反馈到<code>data-state</code>上方便你精细的定制样式了。</p>
+<h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><p>Radix提供了很多小细节让你可以优雅的封装组件，不限于：</p>
+<ul>
+<li>提供<code>forceMount</code>以方便你的组件能运行完整的动画。</li>
+<li>提供<code>asChild</code>以方便你更精细的自定义dom。</li>
+<li>支持SSR。</li>
+<li>提供了许多现成组件，并且足够颗粒化，让你更快更优化的定制出自己的组件哟。</li>
+</ul>
+<p>相比较使用它，理解它的理念才能消化为自己的知识，个人认为即便是自己开发的基础组件，以精细颗粒控制为目标，也不失为一个很棒的思路。</p>
+<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><ul>
+<li><a target="_blank" rel="noopener" href="https://www.radix-ui.com/">https://www.radix-ui.com/</a></li>
+</ul>
+
+      
+    </div>
+    <footer class="article-footer">
+      <a data-url="https://taoliujun.github.io/blog/write-components-elegantly-using-radix/" data-id="clt8hne7e002li8ohcgku7isj" data-title="从Radix看如何优雅写组件" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      
+      
+      
+  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li></ul>
+
+    </footer>
+  </div>
+  
+</article>
+
+
+
+  
+    <article id="post-es6-promise" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+  <div class="article-meta">
+    <a href="/blog/es6-promise/" class="article-date">
+  <time class="dt-published" datetime="2023-07-05T22:21:12.000Z" itemprop="datePublished">2023-07-06</time>
+</a>
+    
+  <div class="article-category">
+    <a class="article-category-link" href="/blog/categories/JavaScript/">JavaScript</a>
+  </div>
+
+  </div>
+  <div class="article-inner">
+    
+    
+      <header class="article-header">
+        
+  
+    <h1 itemprop="name">
+      <a class="p-name article-title" href="/blog/es6-promise/">整理ES6：Promise的忽略点和几个方法的区别</a>
+    </h1>
+  
+
+      </header>
+    
+    <div class="e-content article-entry" itemprop="articleBody">
+      
+        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/2">https://github.com/taoliujun/blog/issues/2</a></p>
+<!--hexo
+---
+url: es6-promise
+tags:
+  - es6
+  - javascript
+---
+-->
+
+<p><strong>Promise</strong>是业务开发中使用率最高的ES6方法了，但日常容易忽略几个点，以及记不得它几个方法的区别，现记录。</p>
+<h2 id="容易忽略的点"><a href="#容易忽略的点" class="headerlink" title="容易忽略的点"></a>容易忽略的点</h2><ul>
+<li><code>catch</code>是<code>then</code>的语法糖，但是<code>catch</code>可以捕获<code>then</code>中的异常，而<code>then</code>的第二个回调函数不行。</li>
+<li>如果没有使用<code>catch</code>捕获错误，那么Promise的错误不会传递到外层，即使外层有<code>try...catch</code>也捕获不到。</li>
+<li>因为<code>catch</code>捕获了<code>rejected</code>且返回新的实例，所以在<code>all</code>等方法中，p1实现了<code>catch</code>方法，则p1的<code>rejected</code>不会触发p的<code>catch</code>。</li>
+</ul>
+<h2 id="几个方法的区别"><a href="#几个方法的区别" class="headerlink" title="几个方法的区别"></a>几个方法的区别</h2><table>
+<thead>
+<tr>
+<th>方法</th>
+<th>resolved的前提</th>
+<th>rejected的前提</th>
+<th>说明</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>all</td>
+<td>全部resolved</td>
+<td>任一rejected</td>
+<td>-</td>
+</tr>
+<tr>
+<td>race</td>
+<td>任一resolved</td>
+<td>任一rejected</td>
+<td>任一率先改变的状态，传递给p</td>
+</tr>
+<tr>
+<td>allSettled</td>
+<td>全部改变</td>
+<td>-</td>
+<td>状态全部改变，传递给p。格式为: <br /> <code>&#123;status: &#39;fulfilled&#39;, value: value&#125;</code> <br/> 或者 <br/> <code>&#123;status: &#39;rejected&#39;, reason: reason&#125;</code></td>
+</tr>
+<tr>
+<td>any</td>
+<td>任一resolved</td>
+<td>全部rejected</td>
+<td>传递给<code>catch</code>的是一个<code>AggregateError</code>实例</td>
+</tr>
+</tbody></table>
+<!--hexo-->
+
+<h1 id="AggregateError"><a href="#AggregateError" class="headerlink" title="AggregateError"></a>AggregateError</h1><p>AggregateError封装了Error数组，它的结构是：</p>
+<blockquote>
+<p>AggregateError(errors[, message])</p>
+</blockquote>
+<p><code>AggregateError()</code>构造函数可以接受两个参数。</p>
+<ul>
+<li>errors：数组，它的每个成员都是一个错误对象。该参数是必须的。</li>
+<li>message：字符串，表示 AggregateError 抛出时的提示信息。该参数是可选的。</li>
+</ul>
+
+      
+    </div>
+    <footer class="article-footer">
+      <a data-url="https://taoliujun.github.io/blog/es6-promise/" data-id="clt8hne6p0009i8ohdlk8aqi7" data-title="整理ES6：Promise的忽略点和几个方法的区别" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      
+      
+      
+  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li></ul>
+
+    </footer>
+  </div>
+  
+</article>
+
+
+
+  
     <article id="post-what-is-es6" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   <div class="article-meta">
     <a href="/blog/what-is-es6/" class="article-date">
@@ -137,7 +330,7 @@ <h1 id="core-js"><a href="#core-js" class="headerlink" title="core-js"></a>core-
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/what-is-es6/" data-id="clt84xvyg002bjaotfpai10mk" data-title="整理ES6：ES6是什么？" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/what-is-es6/" data-id="clt8hne7d002ii8oh9zf55mq6" data-title="整理ES6：ES6是什么？" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -176,7 +369,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -186,7 +379,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -208,23 +401,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/react-performance optimization/index.html b/dist/react-performance optimization/index.html
index bae0b11..4f91c38 100644
--- a/dist/react-performance optimization/index.html	
+++ b/dist/react-performance optimization/index.html	
@@ -16,7 +16,7 @@
 <meta property="og:image" content="https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061103775.png">
 <meta property="og:image" content="https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061111086.png">
 <meta property="article:published_time" content="2023-07-05T22:37:20.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="react">
 <meta name="twitter:card" content="summary">
@@ -143,7 +143,7 @@ <h1 id="组件需要更细粒度"><a href="#组件需要更细粒度" class="hea
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/react-performance%20optimization/" data-id="clt84xvy8001ajaothnsy91na" data-title="React的性能优化项，最后更新2023年07月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/react-performance%20optimization/" data-id="clt8hne73001ai8ohb0bo3x82" data-title="React的性能优化项，最后更新2023年07月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -194,7 +194,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -204,7 +204,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -226,23 +226,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/react-usedeferredvalue/index.html b/dist/react-usedeferredvalue/index.html
index 0b8b785..a359b94 100644
--- a/dist/react-usedeferredvalue/index.html
+++ b/dist/react-usedeferredvalue/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;20   一个卡顿场景已知浏览器在一帧时间里（默认16.6毫秒）要完成好多工作，其中最耗时的是js脚本执行和页面渲染。如果js脚本耗时太长，那要引起页面渲染掉帧，在用户的体验上就是卡顿。 这里有一个处理用户输入的搜索词语，将结果渲染到一个dom列表上的场景： 123456789101112131415161">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-05T22:38:14.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="react">
 <meta name="twitter:card" content="summary">
@@ -130,7 +130,7 @@ <h2 id="useDeferredValue"><a href="#useDeferredValue" class="headerlink" title="
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/react-usedeferredvalue/" data-id="clt84xvy8001djaotbiagf004" data-title="React useDeferredValue在性能优化中的使用" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/react-usedeferredvalue/" data-id="clt8hne74001di8ohdnmwdmji" data-title="React useDeferredValue在性能优化中的使用" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -181,7 +181,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -191,7 +191,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -213,23 +213,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/react-usetransition/index.html b/dist/react-usetransition/index.html
index c503669..a58ba8d 100644
--- a/dist/react-usetransition/index.html
+++ b/dist/react-usetransition/index.html
@@ -20,7 +20,7 @@
 <meta property="og:image" content="https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041629743.png">
 <meta property="og:image" content="https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041631650.png">
 <meta property="article:published_time" content="2023-07-05T22:37:42.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="react">
 <meta name="twitter:card" content="summary">
@@ -160,7 +160,7 @@ <h2 id="注意事项"><a href="#注意事项" class="headerlink" title="注意
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/react-usetransition/" data-id="clt84xvy9001gjaot8o6ygvby" data-title="React useTransition在性能优化中的使用" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/react-usetransition/" data-id="clt8hne75001gi8oh0ik11rjp" data-title="React useTransition在性能优化中的使用" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -211,7 +211,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -221,7 +221,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -243,23 +243,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/react-zustand/index.html b/dist/react-zustand/index.html
index 3320ec6..1b1fc9c 100644
--- a/dist/react-zustand/index.html
+++ b/dist/react-zustand/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;35   官方文档：https:&#x2F;&#x2F;docs.pmnd.rs&#x2F;zustand 如何使用Zustand 是一个非常简单粗暴的全局状态管理库，它的使用有多简单呢？如下： 1&gt; pnpm add zustand  12345678910111213141516&#x2F;&#x2F; useFormStateStore.tsi">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-12-12T22:46:26.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="zustand">
 <meta property="article:tag" content="react store">
@@ -139,7 +139,7 @@ <h1 id="相比React-Context"><a href="#相比React-Context" class="headerlink" t
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/react-zustand/" data-id="clt84xvya001jjaotaulf9tew" data-title="React公共状态利器 - Zustand" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/react-zustand/" data-id="clt8hne75001ji8oh9i2l3g9s" data-title="React公共状态利器 - Zustand" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -190,7 +190,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -200,7 +200,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -222,23 +222,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/sitemap.xml b/dist/sitemap.xml
index 54f301e..ea3680f 100644
--- a/dist/sitemap.xml
+++ b/dist/sitemap.xml
@@ -1,6 +1,51 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   
+  <url>
+    <loc>https://taoliujun.github.io/blog/web-api-Badging_API/</loc>
+    
+    <lastmod>2024-03-01</lastmod>
+    
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  
+  <url>
+    <loc>https://taoliujun.github.io/blog/web-api-Beacon_API/</loc>
+    
+    <lastmod>2024-03-01</lastmod>
+    
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  
+  <url>
+    <loc>https://taoliujun.github.io/blog/web-api-Battery_Status_API/</loc>
+    
+    <lastmod>2024-03-01</lastmod>
+    
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  
+  <url>
+    <loc>https://taoliujun.github.io/blog/web-api-Broadcast_Channel_API/</loc>
+    
+    <lastmod>2024-03-01</lastmod>
+    
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  
+  <url>
+    <loc>https://taoliujun.github.io/blog/web-api-Background_Tasks_API/</loc>
+    
+    <lastmod>2024-03-01</lastmod>
+    
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  
   <url>
     <loc>https://taoliujun.github.io/blog/web-api-readme/</loc>
     
@@ -235,33 +280,6 @@
     <priority>0.6</priority>
   </url>
   
-  <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Background_Tasks_API/</loc>
-    
-    <lastmod>2024-03-01</lastmod>
-    
-    <changefreq>monthly</changefreq>
-    <priority>0.6</priority>
-  </url>
-  
-  <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Badging_api/</loc>
-    
-    <lastmod>2024-03-01</lastmod>
-    
-    <changefreq>monthly</changefreq>
-    <priority>0.6</priority>
-  </url>
-  
-  <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Beacon_api/</loc>
-    
-    <lastmod>2024-03-01</lastmod>
-    
-    <changefreq>monthly</changefreq>
-    <priority>0.6</priority>
-  </url>
-  
   <url>
     <loc>https://taoliujun.github.io/blog/what-is-es6/</loc>
     
@@ -380,6 +398,13 @@
     <priority>0.2</priority>
   </url>
   
+  <url>
+    <loc>https://taoliujun.github.io/blog/tags/Battery-Status/</loc>
+    <lastmod>2024-03-01</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.2</priority>
+  </url>
+  
   <url>
     <loc>https://taoliujun.github.io/blog/tags/Badging/</loc>
     <lastmod>2024-03-01</lastmod>
@@ -394,6 +419,13 @@
     <priority>0.2</priority>
   </url>
   
+  <url>
+    <loc>https://taoliujun.github.io/blog/tags/Broadcast-Channel/</loc>
+    <lastmod>2024-03-01</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.2</priority>
+  </url>
+  
   <url>
     <loc>https://taoliujun.github.io/blog/tags/radix/</loc>
     <lastmod>2024-03-01</lastmod>
diff --git a/dist/snapshot-impact-on-coverage/index.html b/dist/snapshot-impact-on-coverage/index.html
index e9636d9..184f491 100644
--- a/dist/snapshot-impact-on-coverage/index.html
+++ b/dist/snapshot-impact-on-coverage/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;46   Jest snapshot是把双刃剑，虽然使用它可以快速的编写测试用例，但它导致开发者忽略了测试用例的细节设计。 问题试想一个场景，有一个方法返回了复杂的结构，开发者A由于懒惰或自信以后能根据snapshot的结果来修复问题，而只写了snapshot。过了一段时间，开发者A或B修改了该方法，发现s">
 <meta property="og:locale">
 <meta property="article:published_time" content="2024-01-09T00:44:02.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="jest">
 <meta name="twitter:card" content="summary">
@@ -142,7 +142,7 @@ <h2 id="方案"><a href="#方案" class="headerlink" title="方案"></a>方案</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/snapshot-impact-on-coverage/" data-id="clt84xvyb001njaotgf4c4r3y" data-title="snapshot对单测覆盖率的影响以及应对方案" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/snapshot-impact-on-coverage/" data-id="clt8hne76001ni8oh2e325nn8" data-title="snapshot对单测覆盖率的影响以及应对方案" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -193,7 +193,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -203,7 +203,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -225,23 +225,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/Background-Tasks/index.html b/dist/tags/Background-Tasks/index.html
index f8f4dc5..ae8430e 100644
--- a/dist/tags/Background-Tasks/index.html
+++ b/dist/tags/Background-Tasks/index.html
@@ -131,7 +131,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -141,7 +141,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -163,23 +163,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/Badging/index.html b/dist/tags/Badging/index.html
index 7571980..eeafd83 100644
--- a/dist/tags/Badging/index.html
+++ b/dist/tags/Badging/index.html
@@ -94,13 +94,13 @@ <h2 id="subtitle-wrap">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-Badging_api/" class="archive-article-date">
+      <a href="/blog/web-api-Badging_API/" class="archive-article-date">
   <time class="dt-published" datetime="2024-02-28T00:22:00.000Z" itemprop="datePublished">Feb 28</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-Badging_api/">Web API - Badging</a>
+      <a class="archive-article-title" href="/blog/web-api-Badging_API/">Web API - Badging</a>
     </h1>
   
 
@@ -131,7 +131,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -141,7 +141,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -163,23 +163,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/Battery-Status/index.html b/dist/tags/Battery-Status/index.html
new file mode 100644
index 0000000..34ecac8
--- /dev/null
+++ b/dist/tags/Battery-Status/index.html
@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  
+  
+  <title>Tag: Battery Status | TaoLiuJun&#39;s Blog</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="Html&#x2F;Css&#x2F;JavaScript&#x2F;TypeScript的学习心得；React的学习心得；技术设计思想；生活随想；">
+<meta property="og:type" content="website">
+<meta property="og:title" content="TaoLiuJun&#39;s Blog">
+<meta property="og:url" content="https://taoliujun.github.io/blog/tags/Battery-Status/index.html">
+<meta property="og:site_name" content="TaoLiuJun&#39;s Blog">
+<meta property="og:description" content="Html&#x2F;Css&#x2F;JavaScript&#x2F;TypeScript的学习心得；React的学习心得；技术设计思想；生活随想；">
+<meta property="og:locale">
+<meta property="article:author" content="taoliujun">
+<meta property="article:tag" content="前端 JavaScript TypeScript React NodeJS">
+<meta name="twitter:card" content="summary">
+  
+    <link rel="alternate" href="/blog/atom.xml" title="TaoLiuJun's Blog" type="application/atom+xml">
+  
+  
+    <link rel="shortcut icon" href="/blog/favicon.png">
+  
+  
+    
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">
+
+  
+  
+<link rel="stylesheet" href="/blog/css/style.css">
+
+  
+    
+<link rel="stylesheet" href="/blog/fancybox/jquery.fancybox.min.css">
+
+  
+  
+<meta name="generator" content="Hexo 6.3.0"></head>
+
+<body>
+  <div id="container">
+    <div id="wrap">
+      <header id="header">
+  <div id="banner"></div>
+  <div id="header-outer" class="outer">
+    <div id="header-title" class="inner">
+      <h1 id="logo-wrap">
+        <a href="/blog/" id="logo">TaoLiuJun&#39;s Blog</a>
+      </h1>
+      
+        <h2 id="subtitle-wrap">
+          <a href="/blog/" id="subtitle">博客更新有延迟，在 https://github.com/taoliujun/blog/issues 获取最新文章和讨论</a>
+        </h2>
+      
+    </div>
+    <div id="header-inner" class="inner">
+      <nav id="main-nav">
+        <a id="main-nav-toggle" class="nav-icon"><span class="fa fa-bars"></span></a>
+        
+          <a class="main-nav-link" href="/blog/">Home</a>
+        
+          <a class="main-nav-link" href="/blog/archives">Archives</a>
+        
+      </nav>
+      <nav id="sub-nav">
+        
+        
+          <a class="nav-icon" href="/blog/atom.xml" title="RSS Feed"><span class="fa fa-rss"></span></a>
+        
+        <a class="nav-icon nav-search-btn" title="Suche"><span class="fa fa-search"></span></a>
+      </nav>
+      <div id="search-form-wrap">
+        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Suche"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://taoliujun.github.io/blog"></form>
+      </div>
+    </div>
+  </div>
+</header>
+
+      <div class="outer">
+        <section id="main">
+  
+  
+    
+    
+      
+      
+      <section class="archives-wrap">
+        <div class="archive-year-wrap">
+          <a href="/blog/archives/2024" class="archive-year">2024</a>
+        </div>
+        <div class="archives">
+    
+    <article class="archive-article archive-type-post">
+  <div class="archive-article-inner">
+    <header class="archive-article-header">
+      <a href="/blog/web-api-Battery_Status_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-03-01T01:34:25.000Z" itemprop="datePublished">Mar 1</time>
+</a>
+      
+  
+    <h1 itemprop="name">
+      <a class="archive-article-title" href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
+    </h1>
+  
+
+    </header>
+  </div>
+</article>
+  
+  
+    </div></section>
+  
+
+
+</section>
+        
+          <aside id="sidebar">
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Kategorien</h3>
+    <div class="widget">
+      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/JavaScript/">JavaScript</a></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/React/">React</a></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/TypeScript/">TypeScript</a></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">工程化</a></li></ul>
+    </div>
+  </div>
+
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Tags</h3>
+    <div class="widget">
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+    </div>
+  </div>
+
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Tag Cloud</h3>
+    <div class="widget tagcloud">
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+    </div>
+  </div>
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Archiv</h3>
+    <div class="widget">
+      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/03/">March 2024</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/02/">February 2024</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/01/">January 2024</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/12/">December 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/09/">September 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/08/">August 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/07/">July 2023</a></li></ul>
+    </div>
+  </div>
+
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">letzter Beitrag</h3>
+    <div class="widget">
+      <ul>
+        
+          <li>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
+          </li>
+        
+      </ul>
+    </div>
+  </div>
+
+  
+</aside>
+        
+      </div>
+      <footer id="footer">
+  
+  <div class="outer">
+    <div id="footer-info" class="inner">
+      
+      &copy; 2024 taoliujun<br>
+      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
+    </div>
+  </div>
+</footer>
+
+    </div>
+    <nav id="mobile-nav">
+  
+    <a href="/blog/" class="mobile-nav-link">Home</a>
+  
+    <a href="/blog/archives" class="mobile-nav-link">Archives</a>
+  
+</nav>
+    
+
+
+<script src="/blog/js/jquery-3.6.4.min.js"></script>
+
+
+
+  
+<script src="/blog/fancybox/jquery.fancybox.min.js"></script>
+
+
+
+
+<script src="/blog/js/script.js"></script>
+
+
+
+
+
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/dist/tags/Beacon/index.html b/dist/tags/Beacon/index.html
index 14dd3b7..173ca0c 100644
--- a/dist/tags/Beacon/index.html
+++ b/dist/tags/Beacon/index.html
@@ -94,13 +94,13 @@ <h2 id="subtitle-wrap">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-Beacon_api/" class="archive-article-date">
+      <a href="/blog/web-api-Beacon_API/" class="archive-article-date">
   <time class="dt-published" datetime="2024-02-28T23:21:58.000Z" itemprop="datePublished">Feb 29</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+      <a class="archive-article-title" href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
     </h1>
   
 
@@ -131,7 +131,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -141,7 +141,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -163,23 +163,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/Broadcast-Channel/index.html b/dist/tags/Broadcast-Channel/index.html
new file mode 100644
index 0000000..422ccdb
--- /dev/null
+++ b/dist/tags/Broadcast-Channel/index.html
@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  
+  
+  <title>Tag: Broadcast Channel | TaoLiuJun&#39;s Blog</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="Html&#x2F;Css&#x2F;JavaScript&#x2F;TypeScript的学习心得；React的学习心得；技术设计思想；生活随想；">
+<meta property="og:type" content="website">
+<meta property="og:title" content="TaoLiuJun&#39;s Blog">
+<meta property="og:url" content="https://taoliujun.github.io/blog/tags/Broadcast-Channel/index.html">
+<meta property="og:site_name" content="TaoLiuJun&#39;s Blog">
+<meta property="og:description" content="Html&#x2F;Css&#x2F;JavaScript&#x2F;TypeScript的学习心得；React的学习心得；技术设计思想；生活随想；">
+<meta property="og:locale">
+<meta property="article:author" content="taoliujun">
+<meta property="article:tag" content="前端 JavaScript TypeScript React NodeJS">
+<meta name="twitter:card" content="summary">
+  
+    <link rel="alternate" href="/blog/atom.xml" title="TaoLiuJun's Blog" type="application/atom+xml">
+  
+  
+    <link rel="shortcut icon" href="/blog/favicon.png">
+  
+  
+    
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">
+
+  
+  
+<link rel="stylesheet" href="/blog/css/style.css">
+
+  
+    
+<link rel="stylesheet" href="/blog/fancybox/jquery.fancybox.min.css">
+
+  
+  
+<meta name="generator" content="Hexo 6.3.0"></head>
+
+<body>
+  <div id="container">
+    <div id="wrap">
+      <header id="header">
+  <div id="banner"></div>
+  <div id="header-outer" class="outer">
+    <div id="header-title" class="inner">
+      <h1 id="logo-wrap">
+        <a href="/blog/" id="logo">TaoLiuJun&#39;s Blog</a>
+      </h1>
+      
+        <h2 id="subtitle-wrap">
+          <a href="/blog/" id="subtitle">博客更新有延迟，在 https://github.com/taoliujun/blog/issues 获取最新文章和讨论</a>
+        </h2>
+      
+    </div>
+    <div id="header-inner" class="inner">
+      <nav id="main-nav">
+        <a id="main-nav-toggle" class="nav-icon"><span class="fa fa-bars"></span></a>
+        
+          <a class="main-nav-link" href="/blog/">Home</a>
+        
+          <a class="main-nav-link" href="/blog/archives">Archives</a>
+        
+      </nav>
+      <nav id="sub-nav">
+        
+        
+          <a class="nav-icon" href="/blog/atom.xml" title="RSS Feed"><span class="fa fa-rss"></span></a>
+        
+        <a class="nav-icon nav-search-btn" title="Suche"><span class="fa fa-search"></span></a>
+      </nav>
+      <div id="search-form-wrap">
+        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Suche"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://taoliujun.github.io/blog"></form>
+      </div>
+    </div>
+  </div>
+</header>
+
+      <div class="outer">
+        <section id="main">
+  
+  
+    
+    
+      
+      
+      <section class="archives-wrap">
+        <div class="archive-year-wrap">
+          <a href="/blog/archives/2024" class="archive-year">2024</a>
+        </div>
+        <div class="archives">
+    
+    <article class="archive-article archive-type-post">
+  <div class="archive-article-inner">
+    <header class="archive-article-header">
+      <a href="/blog/web-api-Broadcast_Channel_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-03-01T02:00:22.000Z" itemprop="datePublished">Mar 1</time>
+</a>
+      
+  
+    <h1 itemprop="name">
+      <a class="archive-article-title" href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
+    </h1>
+  
+
+    </header>
+  </div>
+</article>
+  
+  
+    </div></section>
+  
+
+
+</section>
+        
+          <aside id="sidebar">
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Kategorien</h3>
+    <div class="widget">
+      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/JavaScript/">JavaScript</a></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/React/">React</a></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/TypeScript/">TypeScript</a></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">工程化</a></li></ul>
+    </div>
+  </div>
+
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Tags</h3>
+    <div class="widget">
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+    </div>
+  </div>
+
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Tag Cloud</h3>
+    <div class="widget tagcloud">
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+    </div>
+  </div>
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Archiv</h3>
+    <div class="widget">
+      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/03/">March 2024</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/02/">February 2024</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/01/">January 2024</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/12/">December 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/09/">September 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/08/">August 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/07/">July 2023</a></li></ul>
+    </div>
+  </div>
+
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">letzter Beitrag</h3>
+    <div class="widget">
+      <ul>
+        
+          <li>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
+          </li>
+        
+      </ul>
+    </div>
+  </div>
+
+  
+</aside>
+        
+      </div>
+      <footer id="footer">
+  
+  <div class="outer">
+    <div id="footer-info" class="inner">
+      
+      &copy; 2024 taoliujun<br>
+      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
+    </div>
+  </div>
+</footer>
+
+    </div>
+    <nav id="mobile-nav">
+  
+    <a href="/blog/" class="mobile-nav-link">Home</a>
+  
+    <a href="/blog/archives" class="mobile-nav-link">Archives</a>
+  
+</nav>
+    
+
+
+<script src="/blog/js/jquery-3.6.4.min.js"></script>
+
+
+
+  
+<script src="/blog/fancybox/jquery.fancybox.min.js"></script>
+
+
+
+
+<script src="/blog/js/script.js"></script>
+
+
+
+
+
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/dist/tags/ast/index.html b/dist/tags/ast/index.html
index efddf13..eb20ff1 100644
--- a/dist/tags/ast/index.html
+++ b/dist/tags/ast/index.html
@@ -131,7 +131,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -141,7 +141,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -163,23 +163,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/changesets/index.html b/dist/tags/changesets/index.html
index fca61c1..1ba44e4 100644
--- a/dist/tags/changesets/index.html
+++ b/dist/tags/changesets/index.html
@@ -131,7 +131,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -141,7 +141,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -163,23 +163,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/css-module/index.html b/dist/tags/css-module/index.html
index fd96a74..6860234 100644
--- a/dist/tags/css-module/index.html
+++ b/dist/tags/css-module/index.html
@@ -131,7 +131,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -141,7 +141,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -163,23 +163,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/es6/index.html b/dist/tags/es6/index.html
index 8f33ef2..527fccf 100644
--- a/dist/tags/es6/index.html
+++ b/dist/tags/es6/index.html
@@ -283,7 +283,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -293,7 +293,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -315,23 +315,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/github-actions/index.html b/dist/tags/github-actions/index.html
index 8560a03..197b894 100644
--- a/dist/tags/github-actions/index.html
+++ b/dist/tags/github-actions/index.html
@@ -264,7 +264,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -274,7 +274,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -296,23 +296,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/javascript/index.html b/dist/tags/javascript/index.html
index 2a4e771..8b41d74 100644
--- a/dist/tags/javascript/index.html
+++ b/dist/tags/javascript/index.html
@@ -283,7 +283,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -293,7 +293,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -315,23 +315,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/jest/index.html b/dist/tags/jest/index.html
index 76e4d3d..16c8702 100644
--- a/dist/tags/jest/index.html
+++ b/dist/tags/jest/index.html
@@ -131,7 +131,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -141,7 +141,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -163,23 +163,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/radix/index.html b/dist/tags/radix/index.html
index 74c7d25..1ac0192 100644
--- a/dist/tags/radix/index.html
+++ b/dist/tags/radix/index.html
@@ -131,7 +131,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -141,7 +141,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -163,23 +163,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/react-store/index.html b/dist/tags/react-store/index.html
index 5ecbe9b..cc949eb 100644
--- a/dist/tags/react-store/index.html
+++ b/dist/tags/react-store/index.html
@@ -131,7 +131,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -141,7 +141,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -163,23 +163,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/react/index.html b/dist/tags/react/index.html
index 4d6e19a..cd19b54 100644
--- a/dist/tags/react/index.html
+++ b/dist/tags/react/index.html
@@ -169,7 +169,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -179,7 +179,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -201,23 +201,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/typescript/index.html b/dist/tags/typescript/index.html
index 0c5b2c0..5d8f09b 100644
--- a/dist/tags/typescript/index.html
+++ b/dist/tags/typescript/index.html
@@ -150,7 +150,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -160,7 +160,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -182,23 +182,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/webapi/index.html b/dist/tags/webapi/index.html
index 2498b55..62008ad 100644
--- a/dist/tags/webapi/index.html
+++ b/dist/tags/webapi/index.html
@@ -91,6 +91,44 @@ <h2 id="subtitle-wrap">
         </div>
         <div class="archives">
     
+    <article class="archive-article archive-type-post">
+  <div class="archive-article-inner">
+    <header class="archive-article-header">
+      <a href="/blog/web-api-Broadcast_Channel_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-03-01T02:00:22.000Z" itemprop="datePublished">Mar 1</time>
+</a>
+      
+  
+    <h1 itemprop="name">
+      <a class="archive-article-title" href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
+    </h1>
+  
+
+    </header>
+  </div>
+</article>
+  
+    
+    
+    <article class="archive-article archive-type-post">
+  <div class="archive-article-inner">
+    <header class="archive-article-header">
+      <a href="/blog/web-api-Battery_Status_API/" class="archive-article-date">
+  <time class="dt-published" datetime="2024-03-01T01:34:25.000Z" itemprop="datePublished">Mar 1</time>
+</a>
+      
+  
+    <h1 itemprop="name">
+      <a class="archive-article-title" href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
+    </h1>
+  
+
+    </header>
+  </div>
+</article>
+  
+    
+    
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
@@ -113,13 +151,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-Beacon_api/" class="archive-article-date">
+      <a href="/blog/web-api-Beacon_API/" class="archive-article-date">
   <time class="dt-published" datetime="2024-02-28T23:21:58.000Z" itemprop="datePublished">Feb 29</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+      <a class="archive-article-title" href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
     </h1>
   
 
@@ -132,13 +170,13 @@ <h1 itemprop="name">
     <article class="archive-article archive-type-post">
   <div class="archive-article-inner">
     <header class="archive-article-header">
-      <a href="/blog/web-api-Badging_api/" class="archive-article-date">
+      <a href="/blog/web-api-Badging_API/" class="archive-article-date">
   <time class="dt-published" datetime="2024-02-28T00:22:00.000Z" itemprop="datePublished">Feb 28</time>
 </a>
       
   
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/blog/web-api-Badging_api/">Web API - Badging</a>
+      <a class="archive-article-title" href="/blog/web-api-Badging_API/">Web API - Badging</a>
     </h1>
   
 
@@ -188,7 +226,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -198,7 +236,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -220,23 +258,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tags/zustand/index.html b/dist/tags/zustand/index.html
index 52ab469..ba69e69 100644
--- a/dist/tags/zustand/index.html
+++ b/dist/tags/zustand/index.html
@@ -131,7 +131,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -141,7 +141,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -163,23 +163,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/tsconfig-json/index.html b/dist/tsconfig-json/index.html
index 2dc4731..7449e1d 100644
--- a/dist/tsconfig-json/index.html
+++ b/dist/tsconfig-json/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;23   截至TypeScript 5.2，tsconfig.json的配置项已经有百十个之多，它的某些选项甚至影响了项目的执行结果，所以尽量多的了解它们能让程序员更深的了解ts，写出优美语句让CTO赞赏，甚至避免写出bug。 本issue的内容，只是个人在工作经验的影响下，对官方文档的内容理解。且内容有所">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-09-04T18:51:45.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="typescript">
 <meta name="twitter:card" content="summary">
@@ -322,7 +322,7 @@ <h2 id="skipLibCheck"><a href="#skipLibCheck" class="headerlink" title="skipLibC
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/tsconfig-json/" data-id="clt84xvyc001rjaot9mbxbgnc" data-title="关于tsconfig.json，最后更新2023/11月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/tsconfig-json/" data-id="clt8hne77001ri8oh2t85c2e4" data-title="关于tsconfig.json，最后更新2023/11月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -373,7 +373,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -383,7 +383,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -405,23 +405,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/typescript-means/index.html b/dist/typescript-means/index.html
index ddfbbd9..eddc1ec 100644
--- a/dist/typescript-means/index.html
+++ b/dist/typescript-means/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;22   TypeScript有一些小手段，评论区见。  as断言的另外写法 as const 非null | undefined声明 const enum @ts-expect-error 解构变量可标记为“不使用”    as断言的另外写法1const myCanvas &#x3D; &lt;HTMLCanvas">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-08-02T17:52:04.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="typescript">
 <meta name="twitter:card" content="summary">
@@ -185,7 +185,7 @@ <h1 id="解构变量可标记为“不使用”"><a href="#解构变量可标记
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/typescript-means/" data-id="clt84xvyd001ujaot1vergh6f" data-title="TypeScript的小手段，最后更新2023/12月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/typescript-means/" data-id="clt8hne78001ui8ohbxt1guu9" data-title="TypeScript的小手段，最后更新2023/12月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -236,7 +236,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -246,7 +246,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -268,23 +268,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/web-api-Background_Tasks_API/index.html b/dist/web-api-Background_Tasks_API/index.html
index ee0a0f9..d45ed6c 100644
--- a/dist/web-api-Background_Tasks_API/index.html
+++ b/dist/web-api-Background_Tasks_API/index.html
@@ -17,7 +17,7 @@
 <meta property="og:image" content="https://github.com/taoliujun/blog/assets/5689134/485c6005-7543-42ab-9096-c5b4fcc9681b">
 <meta property="og:image" content="https://github.com/taoliujun/blog/assets/5689134/3b67b0ff-df48-45e9-8c34-6d7327bea1c9">
 <meta property="article:published_time" content="2024-02-29T19:56:11.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:05:05.916Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="webapi">
 <meta property="article:tag" content="Background Tasks">
@@ -141,7 +141,7 @@ <h1 id="Background-Task"><a href="#Background-Task" class="headerlink" title="Ba
 </ul>
 </blockquote>
 <h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><h3 id="requestIdleCallback"><a href="#requestIdleCallback" class="headerlink" title="requestIdleCallback"></a>requestIdleCallback</h3><p>在空闲时间执行回调。</p>
-<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-apis/Background_Tasks_API/index.html">https://taoliujun.github.io/example/web-apis/Background_Tasks_API/index.html</a></p>
+<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-api/Background_Tasks_API/index.html">https://taoliujun.github.io/example/web-api/Background_Tasks_API/index.html</a></p>
 <ol>
 <li>点击几次”add task”按钮，此时没有任务在运行，发现每一秒都流畅打印出任务量。</li>
 </ol>
@@ -158,7 +158,7 @@ <h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/web-api-Background_Tasks_API/" data-id="clt84xvyd001xjaotciex7a91" data-title="Web API - Background Tasks" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/web-api-Background_Tasks_API/" data-id="clt8hne79001xi8oh5ietgq6s" data-title="Web API - Background Tasks" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -170,8 +170,17 @@ <h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</
     
 <nav id="article-nav">
   
+    <a href="/blog/web-api-Battery_Status_API/" id="article-nav-newer" class="article-nav-link-wrap">
+      <strong class="article-nav-caption">Neuer</strong>
+      <div class="article-nav-title">
+        
+          Web API - Battery Status
+        
+      </div>
+    </a>
   
-    <a href="/blog/web-api-Beacon_api/" id="article-nav-older" class="article-nav-link-wrap">
+  
+    <a href="/blog/web-api-Beacon_API/" id="article-nav-older" class="article-nav-link-wrap">
       <strong class="article-nav-caption">Älter</strong>
       <div class="article-nav-title">Web API - Beacon</div>
     </a>
@@ -200,7 +209,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -210,7 +219,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -232,23 +241,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/web-api-Badging_api/index.html b/dist/web-api-Badging_API/index.html
similarity index 77%
rename from dist/web-api-Badging_api/index.html
rename to dist/web-api-Badging_API/index.html
index 25fe59b..97538b3 100644
--- a/dist/web-api-Badging_api/index.html
+++ b/dist/web-api-Badging_API/index.html
@@ -9,7 +9,7 @@
   <meta name="description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;50   Badging MDN: https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Badging_API  Badging用于在Web APP的图标上标记徽章，常用于通知用户有新消息啦，它有3种状态：    状态 描述 效果    nothing 什么都没">
 <meta property="og:type" content="article">
 <meta property="og:title" content="Web API - Badging">
-<meta property="og:url" content="https://taoliujun.github.io/blog/web-api-Badging_api/index.html">
+<meta property="og:url" content="https://taoliujun.github.io/blog/web-api-Badging_API/index.html">
 <meta property="og:site_name" content="TaoLiuJun&#39;s Blog">
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;50   Badging MDN: https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Badging_API  Badging用于在Web APP的图标上标记徽章，常用于通知用户有新消息啦，它有3种状态：    状态 描述 效果    nothing 什么都没">
 <meta property="og:locale">
@@ -17,7 +17,7 @@
 <meta property="og:image" content="https://github.com/taoliujun/blog/assets/5689134/965f2c77-8b85-443f-8f97-da491df88354">
 <meta property="og:image" content="https://github.com/taoliujun/blog/assets/5689134/f0333758-125b-40b9-a88b-285346730816">
 <meta property="article:published_time" content="2024-02-28T00:22:00.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:05:05.952Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="webapi">
 <meta property="article:tag" content="Badging">
@@ -85,9 +85,9 @@ <h2 id="subtitle-wrap">
 </header>
 
       <div class="outer">
-        <section id="main"><article id="post-web-api-Badging_api" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+        <section id="main"><article id="post-web-api-Badging_API" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   <div class="article-meta">
-    <a href="/blog/web-api-Badging_api/" class="article-date">
+    <a href="/blog/web-api-Badging_API/" class="article-date">
   <time class="dt-published" datetime="2024-02-28T00:22:00.000Z" itemprop="datePublished">2024-02-28</time>
 </a>
     
@@ -114,7 +114,7 @@ <h1 class="p-name article-title" itemprop="headline name">
         <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/50">https://github.com/taoliujun/blog/issues/50</a></p>
 <!--hexo
 ---
-url: web-api-Badging_api
+url: web-api-Badging_API
 tags:
   - webapi
   - Badging
@@ -155,13 +155,13 @@ <h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</
 <h3 id="clearAppBadge"><a href="#clearAppBadge" class="headerlink" title="clearAppBadge"></a>clearAppBadge</h3><p>清空徽章。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">navigator.<span class="title function_">clearAppBadge</span>();</span><br></pre></td></tr></table></figure>
 
-<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-apis/Badging_API/index.html">https://taoliujun.github.io/example/web-apis/Badging_API/index.html</a></p>
+<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-api/Badging_API/index.html">https://taoliujun.github.io/example/web-api/Badging_API/index.html</a></p>
 <p>本示例代码较为简单，直接打开查看源码即可。</p>
 
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/web-api-Badging_api/" data-id="clt84xvye0021jaot1re21auq" data-title="Web API - Badging" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/web-api-Badging_API/" data-id="clt8hne7a0025i8ohhasq15oj" data-title="Web API - Badging" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -173,7 +173,7 @@ <h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</
     
 <nav id="article-nav">
   
-    <a href="/blog/web-api-Beacon_api/" id="article-nav-newer" class="article-nav-link-wrap">
+    <a href="/blog/web-api-Beacon_API/" id="article-nav-newer" class="article-nav-link-wrap">
       <strong class="article-nav-caption">Neuer</strong>
       <div class="article-nav-title">
         
@@ -212,7 +212,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -222,7 +222,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -244,23 +244,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/web-api-Battery_Status_API/index.html b/dist/web-api-Battery_Status_API/index.html
new file mode 100644
index 0000000..fd18671
--- /dev/null
+++ b/dist/web-api-Battery_Status_API/index.html
@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  
+  
+  <title>Web API - Battery Status | TaoLiuJun&#39;s Blog</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;58   Battery Status MDN: https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Battery_Status_API  Battery Status可以查看电池信息、监听充电状态变化。 接口BatteryManager设备电池对象。 方法g">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Web API - Battery Status">
+<meta property="og:url" content="https://taoliujun.github.io/blog/web-api-Battery_Status_API/index.html">
+<meta property="og:site_name" content="TaoLiuJun&#39;s Blog">
+<meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;58   Battery Status MDN: https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Battery_Status_API  Battery Status可以查看电池信息、监听充电状态变化。 接口BatteryManager设备电池对象。 方法g">
+<meta property="og:locale">
+<meta property="og:image" content="https://github.com/taoliujun/blog/assets/5689134/9944f20b-95b2-4bc2-b2c6-01c7cdcdf80d">
+<meta property="article:published_time" content="2024-03-01T01:34:25.000Z">
+<meta property="article:modified_time" content="2024-03-01T10:05:05.932Z">
+<meta property="article:author" content="taoliujun">
+<meta property="article:tag" content="webapi">
+<meta property="article:tag" content="Battery Status">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://github.com/taoliujun/blog/assets/5689134/9944f20b-95b2-4bc2-b2c6-01c7cdcdf80d">
+  
+    <link rel="alternate" href="/blog/atom.xml" title="TaoLiuJun's Blog" type="application/atom+xml">
+  
+  
+    <link rel="shortcut icon" href="/blog/favicon.png">
+  
+  
+    
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">
+
+  
+  
+<link rel="stylesheet" href="/blog/css/style.css">
+
+  
+    
+<link rel="stylesheet" href="/blog/fancybox/jquery.fancybox.min.css">
+
+  
+  
+<meta name="generator" content="Hexo 6.3.0"></head>
+
+<body>
+  <div id="container">
+    <div id="wrap">
+      <header id="header">
+  <div id="banner"></div>
+  <div id="header-outer" class="outer">
+    <div id="header-title" class="inner">
+      <h1 id="logo-wrap">
+        <a href="/blog/" id="logo">TaoLiuJun&#39;s Blog</a>
+      </h1>
+      
+        <h2 id="subtitle-wrap">
+          <a href="/blog/" id="subtitle">博客更新有延迟，在 https://github.com/taoliujun/blog/issues 获取最新文章和讨论</a>
+        </h2>
+      
+    </div>
+    <div id="header-inner" class="inner">
+      <nav id="main-nav">
+        <a id="main-nav-toggle" class="nav-icon"><span class="fa fa-bars"></span></a>
+        
+          <a class="main-nav-link" href="/blog/">Home</a>
+        
+          <a class="main-nav-link" href="/blog/archives">Archives</a>
+        
+      </nav>
+      <nav id="sub-nav">
+        
+        
+          <a class="nav-icon" href="/blog/atom.xml" title="RSS Feed"><span class="fa fa-rss"></span></a>
+        
+        <a class="nav-icon nav-search-btn" title="Suche"><span class="fa fa-search"></span></a>
+      </nav>
+      <div id="search-form-wrap">
+        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Suche"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://taoliujun.github.io/blog"></form>
+      </div>
+    </div>
+  </div>
+</header>
+
+      <div class="outer">
+        <section id="main"><article id="post-web-api-Battery_Status_API" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+  <div class="article-meta">
+    <a href="/blog/web-api-Battery_Status_API/" class="article-date">
+  <time class="dt-published" datetime="2024-03-01T01:34:25.000Z" itemprop="datePublished">2024-03-01</time>
+</a>
+    
+  <div class="article-category">
+    <a class="article-category-link" href="/blog/categories/JavaScript/">JavaScript</a>
+  </div>
+
+  </div>
+  <div class="article-inner">
+    
+    
+      <header class="article-header">
+        
+  
+    <h1 class="p-name article-title" itemprop="headline name">
+      Web API - Battery Status
+    </h1>
+  
+
+      </header>
+    
+    <div class="e-content article-entry" itemprop="articleBody">
+      
+        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/58">https://github.com/taoliujun/blog/issues/58</a></p>
+<!--hexo
+---
+url: web-api-Battery_Status_API
+tags:
+  - webapi
+  - Battery Status
+---
+-->
+
+<h1 id="Battery-Status"><a href="#Battery-Status" class="headerlink" title="Battery Status"></a>Battery Status</h1><blockquote>
+<p>MDN: <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API">https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API</a></p>
+</blockquote>
+<p><strong>Battery Status</strong>可以查看电池信息、监听充电状态变化。</p>
+<h2 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h2><h3 id="BatteryManager"><a href="#BatteryManager" class="headerlink" title="BatteryManager"></a>BatteryManager</h3><p>设备电池对象。</p>
+<h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><h3 id="getBattery"><a href="#getBattery" class="headerlink" title="getBattery"></a>getBattery</h3><p>返回<code>Promise&lt;BatteryManager&gt;</code></p>
+<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-apis/Battery_Status_API/index.html">https://taoliujun.github.io/example/web-apis/Battery_Status_API/index.html</a></p>
+<ol>
+<li>拔掉笔记本充电线，再插上充电线，可以看到监听到充电状态变化。</li>
+</ol>
+<p><img src="https://github.com/taoliujun/blog/assets/5689134/9944f20b-95b2-4bc2-b2c6-01c7cdcdf80d" alt="image"></p>
+
+      
+    </div>
+    <footer class="article-footer">
+      <a data-url="https://taoliujun.github.io/blog/web-api-Battery_Status_API/" data-id="clt8hne7a0021i8ohdd78avcq" data-title="Web API - Battery Status" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      
+      
+      
+  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li></ul>
+
+    </footer>
+  </div>
+  
+    
+<nav id="article-nav">
+  
+    <a href="/blog/web-api-Broadcast_Channel_API/" id="article-nav-newer" class="article-nav-link-wrap">
+      <strong class="article-nav-caption">Neuer</strong>
+      <div class="article-nav-title">
+        
+          Web API - Broadcast Channel
+        
+      </div>
+    </a>
+  
+  
+    <a href="/blog/web-api-Background_Tasks_API/" id="article-nav-older" class="article-nav-link-wrap">
+      <strong class="article-nav-caption">Älter</strong>
+      <div class="article-nav-title">Web API - Background Tasks</div>
+    </a>
+  
+</nav>
+
+  
+</article>
+
+
+</section>
+        
+          <aside id="sidebar">
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Kategorien</h3>
+    <div class="widget">
+      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/JavaScript/">JavaScript</a></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/React/">React</a></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/TypeScript/">TypeScript</a></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">工程化</a></li></ul>
+    </div>
+  </div>
+
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Tags</h3>
+    <div class="widget">
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+    </div>
+  </div>
+
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Tag Cloud</h3>
+    <div class="widget tagcloud">
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+    </div>
+  </div>
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Archiv</h3>
+    <div class="widget">
+      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/03/">March 2024</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/02/">February 2024</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/01/">January 2024</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/12/">December 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/09/">September 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/08/">August 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/07/">July 2023</a></li></ul>
+    </div>
+  </div>
+
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">letzter Beitrag</h3>
+    <div class="widget">
+      <ul>
+        
+          <li>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
+          </li>
+        
+      </ul>
+    </div>
+  </div>
+
+  
+</aside>
+        
+      </div>
+      <footer id="footer">
+  
+  <div class="outer">
+    <div id="footer-info" class="inner">
+      
+      &copy; 2024 taoliujun<br>
+      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
+    </div>
+  </div>
+</footer>
+
+    </div>
+    <nav id="mobile-nav">
+  
+    <a href="/blog/" class="mobile-nav-link">Home</a>
+  
+    <a href="/blog/archives" class="mobile-nav-link">Archives</a>
+  
+</nav>
+    
+
+
+<script src="/blog/js/jquery-3.6.4.min.js"></script>
+
+
+
+  
+<script src="/blog/fancybox/jquery.fancybox.min.js"></script>
+
+
+
+
+<script src="/blog/js/script.js"></script>
+
+
+
+
+
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/dist/web-api-Beacon_api/index.html b/dist/web-api-Beacon_API/index.html
similarity index 78%
rename from dist/web-api-Beacon_api/index.html
rename to dist/web-api-Beacon_API/index.html
index 4c2380d..9af6795 100644
--- a/dist/web-api-Beacon_api/index.html
+++ b/dist/web-api-Beacon_API/index.html
@@ -6,15 +6,15 @@
   
   <title>Web API - Beacon | TaoLiuJun&#39;s Blog</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;53   Beacon MDN: https:&#x2F;&#x2F;developer.mozilla.org&#x2F;zh-CN&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Beacon_API  Beacon用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。主要使用场景是发送统计数据。 方法sendBeacon通过PO">
+  <meta name="description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;53   Beacon MDN: https:&#x2F;&#x2F;developer.mozilla.org&#x2F;zh-CN&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Beacon_API  Beacon用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。 方法sendBeacon通过POST发送少量数据到服务器。">
 <meta property="og:type" content="article">
 <meta property="og:title" content="Web API - Beacon">
-<meta property="og:url" content="https://taoliujun.github.io/blog/web-api-Beacon_api/index.html">
+<meta property="og:url" content="https://taoliujun.github.io/blog/web-api-Beacon_API/index.html">
 <meta property="og:site_name" content="TaoLiuJun&#39;s Blog">
-<meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;53   Beacon MDN: https:&#x2F;&#x2F;developer.mozilla.org&#x2F;zh-CN&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Beacon_API  Beacon用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。主要使用场景是发送统计数据。 方法sendBeacon通过PO">
+<meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;53   Beacon MDN: https:&#x2F;&#x2F;developer.mozilla.org&#x2F;zh-CN&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Beacon_API  Beacon用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。 方法sendBeacon通过POST发送少量数据到服务器。">
 <meta property="og:locale">
 <meta property="article:published_time" content="2024-02-28T23:21:58.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:05:05.952Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="webapi">
 <meta property="article:tag" content="Beacon">
@@ -81,9 +81,9 @@ <h2 id="subtitle-wrap">
 </header>
 
       <div class="outer">
-        <section id="main"><article id="post-web-api-Beacon_api" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+        <section id="main"><article id="post-web-api-Beacon_API" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
   <div class="article-meta">
-    <a href="/blog/web-api-Beacon_api/" class="article-date">
+    <a href="/blog/web-api-Beacon_API/" class="article-date">
   <time class="dt-published" datetime="2024-02-28T23:21:58.000Z" itemprop="datePublished">2024-02-29</time>
 </a>
     
@@ -110,7 +110,7 @@ <h1 class="p-name article-title" itemprop="headline name">
         <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/53">https://github.com/taoliujun/blog/issues/53</a></p>
 <!--hexo
 ---
-url: web-api-Beacon_api
+url: web-api-Beacon_API
 tags:
   - webapi
   - Beacon
@@ -120,11 +120,11 @@ <h1 class="p-name article-title" itemprop="headline name">
 <h1 id="Beacon"><a href="#Beacon" class="headerlink" title="Beacon"></a>Beacon</h1><blockquote>
 <p>MDN: <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API">https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API</a></p>
 </blockquote>
-<p><strong>Beacon</strong>用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。主要使用场景是发送统计数据。</p>
+<p><strong>Beacon</strong>用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。</p>
 <h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><h3 id="sendBeacon"><a href="#sendBeacon" class="headerlink" title="sendBeacon"></a>sendBeacon</h3><p>通过<em>POST</em>发送少量数据到服务器。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">navigator.<span class="title function_">sendBeacon</span>(url, data);</span><br></pre></td></tr></table></figure>
 
-<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-apis/Beacon_API/index.html">https://taoliujun.github.io/example/web-apis/Beacon_API/index.html</a></p>
+<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-api/Beacon_API/index.html">https://taoliujun.github.io/example/web-api/Beacon_API/index.html</a></p>
 <ol>
 <li>创建一个页面，放一个按钮用于发送<code>manual</code>统计数据：</li>
 </ol>
@@ -150,7 +150,7 @@ <h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/web-api-Beacon_api/" data-id="clt84xvyf0025jaot2f5xho76" data-title="Web API - Beacon" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/web-api-Beacon_API/" data-id="clt8hne7b0028i8oh6rf36zu9" data-title="Web API - Beacon" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -172,7 +172,7 @@ <h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</
     </a>
   
   
-    <a href="/blog/web-api-Badging_api/" id="article-nav-older" class="article-nav-link-wrap">
+    <a href="/blog/web-api-Badging_API/" id="article-nav-older" class="article-nav-link-wrap">
       <strong class="article-nav-caption">Älter</strong>
       <div class="article-nav-title">Web API - Badging</div>
     </a>
@@ -201,7 +201,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -211,7 +211,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -233,23 +233,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/web-api-Broadcast_Channel_API/index.html b/dist/web-api-Broadcast_Channel_API/index.html
new file mode 100644
index 0000000..bc1eead
--- /dev/null
+++ b/dist/web-api-Broadcast_Channel_API/index.html
@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  
+  
+  <title>Web API - Broadcast Channel | TaoLiuJun&#39;s Blog</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;59   Broadcast Channel MDN: https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Broadcast_Channel_API  Broadcast Channel可以在同源情况下，在一种浏览器的不同窗口、标签页、frame中简单通信。">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Web API - Broadcast Channel">
+<meta property="og:url" content="https://taoliujun.github.io/blog/web-api-Broadcast_Channel_API/index.html">
+<meta property="og:site_name" content="TaoLiuJun&#39;s Blog">
+<meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;59   Broadcast Channel MDN: https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Broadcast_Channel_API  Broadcast Channel可以在同源情况下，在一种浏览器的不同窗口、标签页、frame中简单通信。">
+<meta property="og:locale">
+<meta property="og:image" content="https://github.com/taoliujun/blog/assets/5689134/8c0fdb6e-0318-49cd-8040-f90ca0738a13">
+<meta property="article:published_time" content="2024-03-01T02:00:22.000Z">
+<meta property="article:modified_time" content="2024-03-01T10:05:05.924Z">
+<meta property="article:author" content="taoliujun">
+<meta property="article:tag" content="webapi">
+<meta property="article:tag" content="Broadcast Channel">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://github.com/taoliujun/blog/assets/5689134/8c0fdb6e-0318-49cd-8040-f90ca0738a13">
+  
+    <link rel="alternate" href="/blog/atom.xml" title="TaoLiuJun's Blog" type="application/atom+xml">
+  
+  
+    <link rel="shortcut icon" href="/blog/favicon.png">
+  
+  
+    
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">
+
+  
+  
+<link rel="stylesheet" href="/blog/css/style.css">
+
+  
+    
+<link rel="stylesheet" href="/blog/fancybox/jquery.fancybox.min.css">
+
+  
+  
+<meta name="generator" content="Hexo 6.3.0"></head>
+
+<body>
+  <div id="container">
+    <div id="wrap">
+      <header id="header">
+  <div id="banner"></div>
+  <div id="header-outer" class="outer">
+    <div id="header-title" class="inner">
+      <h1 id="logo-wrap">
+        <a href="/blog/" id="logo">TaoLiuJun&#39;s Blog</a>
+      </h1>
+      
+        <h2 id="subtitle-wrap">
+          <a href="/blog/" id="subtitle">博客更新有延迟，在 https://github.com/taoliujun/blog/issues 获取最新文章和讨论</a>
+        </h2>
+      
+    </div>
+    <div id="header-inner" class="inner">
+      <nav id="main-nav">
+        <a id="main-nav-toggle" class="nav-icon"><span class="fa fa-bars"></span></a>
+        
+          <a class="main-nav-link" href="/blog/">Home</a>
+        
+          <a class="main-nav-link" href="/blog/archives">Archives</a>
+        
+      </nav>
+      <nav id="sub-nav">
+        
+        
+          <a class="nav-icon" href="/blog/atom.xml" title="RSS Feed"><span class="fa fa-rss"></span></a>
+        
+        <a class="nav-icon nav-search-btn" title="Suche"><span class="fa fa-search"></span></a>
+      </nav>
+      <div id="search-form-wrap">
+        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Suche"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://taoliujun.github.io/blog"></form>
+      </div>
+    </div>
+  </div>
+</header>
+
+      <div class="outer">
+        <section id="main"><article id="post-web-api-Broadcast_Channel_API" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
+  <div class="article-meta">
+    <a href="/blog/web-api-Broadcast_Channel_API/" class="article-date">
+  <time class="dt-published" datetime="2024-03-01T02:00:22.000Z" itemprop="datePublished">2024-03-01</time>
+</a>
+    
+  <div class="article-category">
+    <a class="article-category-link" href="/blog/categories/JavaScript/">JavaScript</a>
+  </div>
+
+  </div>
+  <div class="article-inner">
+    
+    
+      <header class="article-header">
+        
+  
+    <h1 class="p-name article-title" itemprop="headline name">
+      Web API - Broadcast Channel
+    </h1>
+  
+
+      </header>
+    
+    <div class="e-content article-entry" itemprop="articleBody">
+      
+        <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/59">https://github.com/taoliujun/blog/issues/59</a></p>
+<!--hexo
+---
+url: web-api-Broadcast_Channel_API
+tags:
+  - webapi
+  - Broadcast Channel
+---
+-->
+
+<h1 id="Broadcast-Channel"><a href="#Broadcast-Channel" class="headerlink" title="Broadcast Channel"></a>Broadcast Channel</h1><blockquote>
+<p>MDN: <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API">https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API</a></p>
+</blockquote>
+<p><strong>Broadcast Channel</strong>可以在<strong>同源</strong>情况下，在一种浏览器的不同窗口、标签页、frame中简单通信。</p>
+<h2 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h2><h3 id="BroadcastChannel"><a href="#BroadcastChannel" class="headerlink" title="BroadcastChannel"></a>BroadcastChannel</h3><p>传入频道名称，返回实例，包含了<code>message</code>事件来监听消息、<code>postMessage</code>方法来发送信息。</p>
+<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-apis/Broadcast_Channel_API/index.html">https://taoliujun.github.io/example/web-apis/Broadcast_Channel_API/index.html</a></p>
+<ol>
+<li>打开两个Chrome窗口，查看日志：</li>
+</ol>
+<p><img src="https://github.com/taoliujun/blog/assets/5689134/8c0fdb6e-0318-49cd-8040-f90ca0738a13" alt="image"></p>
+
+      
+    </div>
+    <footer class="article-footer">
+      <a data-url="https://taoliujun.github.io/blog/web-api-Broadcast_Channel_API/" data-id="clt8hne7c002bi8ohfzyr9vej" data-title="Web API - Broadcast Channel" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      
+      
+      
+  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li></ul>
+
+    </footer>
+  </div>
+  
+    
+<nav id="article-nav">
+  
+  
+    <a href="/blog/web-api-Battery_Status_API/" id="article-nav-older" class="article-nav-link-wrap">
+      <strong class="article-nav-caption">Älter</strong>
+      <div class="article-nav-title">Web API - Battery Status</div>
+    </a>
+  
+</nav>
+
+  
+</article>
+
+
+</section>
+        
+          <aside id="sidebar">
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Kategorien</h3>
+    <div class="widget">
+      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/JavaScript/">JavaScript</a></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/React/">React</a></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/TypeScript/">TypeScript</a></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">工程化</a></li></ul>
+    </div>
+  </div>
+
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Tags</h3>
+    <div class="widget">
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+    </div>
+  </div>
+
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Tag Cloud</h3>
+    <div class="widget tagcloud">
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+    </div>
+  </div>
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">Archiv</h3>
+    <div class="widget">
+      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/03/">March 2024</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/02/">February 2024</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/01/">January 2024</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/12/">December 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/09/">September 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/08/">August 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/07/">July 2023</a></li></ul>
+    </div>
+  </div>
+
+
+  
+    
+  <div class="widget-wrap">
+    <h3 class="widget-title">letzter Beitrag</h3>
+    <div class="widget">
+      <ul>
+        
+          <li>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
+          </li>
+        
+          <li>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
+          </li>
+        
+      </ul>
+    </div>
+  </div>
+
+  
+</aside>
+        
+      </div>
+      <footer id="footer">
+  
+  <div class="outer">
+    <div id="footer-info" class="inner">
+      
+      &copy; 2024 taoliujun<br>
+      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
+    </div>
+  </div>
+</footer>
+
+    </div>
+    <nav id="mobile-nav">
+  
+    <a href="/blog/" class="mobile-nav-link">Home</a>
+  
+    <a href="/blog/archives" class="mobile-nav-link">Archives</a>
+  
+</nav>
+    
+
+
+<script src="/blog/js/jquery-3.6.4.min.js"></script>
+
+
+
+  
+<script src="/blog/fancybox/jquery.fancybox.min.js"></script>
+
+
+
+
+<script src="/blog/js/script.js"></script>
+
+
+
+
+
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/dist/web-api-readme/index.html b/dist/web-api-readme/index.html
index af7548b..245c111 100644
--- a/dist/web-api-readme/index.html
+++ b/dist/web-api-readme/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;49   Web API的发展日新月异，稍不留神就偷偷的出了新规范，这些规范为项目方案提供了更多的可能性。话说读百遍不如写一遍，计划在一段时间内，对大部分API进行demo实践以加深印象。  以 https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API 为基础，只实践">
 <meta property="og:locale">
 <meta property="article:published_time" content="2024-02-28T00:10:53.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:20.459Z">
+<meta property="article:modified_time" content="2024-03-01T10:05:05.908Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="webapi">
 <meta name="twitter:card" content="summary">
@@ -120,15 +120,17 @@ <h1 class="p-name article-title" itemprop="headline name">
 <p>以 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API">https://developer.mozilla.org/en-US/docs/Web/API</a> 为基础，只实践W3C Recommendation状态的API。</p>
 </blockquote>
 <h2 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h2><ul>
-<li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/50">https://github.com/taoliujun/blog/issues/50</a></li>
-<li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/53">https://github.com/taoliujun/blog/issues/53</a></li>
-<li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/55">https://github.com/taoliujun/blog/issues/55</a></li>
+<li><input checked="" disabled="" type="checkbox"> #50 </li>
+<li><input checked="" disabled="" type="checkbox"> #53 </li>
+<li><input checked="" disabled="" type="checkbox"> #55 </li>
+<li><input checked="" disabled="" type="checkbox"> #58 </li>
+<li><input disabled="" type="checkbox"> #59</li>
 </ul>
 
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/web-api-readme/" data-id="clt84xvyg0028jaotdpc922u5" data-title="Web API 实践，最后更新2024/02月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/web-api-readme/" data-id="clt8hne7d002fi8oh4cqmc2up" data-title="Web API 实践，最后更新2024/02月..." class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -140,7 +142,7 @@ <h2 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</
     
 <nav id="article-nav">
   
-    <a href="/blog/web-api-Badging_api/" id="article-nav-newer" class="article-nav-link-wrap">
+    <a href="/blog/web-api-Badging_API/" id="article-nav-newer" class="article-nav-link-wrap">
       <strong class="article-nav-caption">Neuer</strong>
       <div class="article-nav-title">
         
@@ -179,7 +181,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -189,7 +191,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -211,23 +213,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/what-is-es6/index.html b/dist/what-is-es6/index.html
index ad6dd1a..93a6614 100644
--- a/dist/what-is-es6/index.html
+++ b/dist/what-is-es6/index.html
@@ -14,7 +14,7 @@
 <meta property="og:description" content="原文链接：https:&#x2F;&#x2F;github.com&#x2F;taoliujun&#x2F;blog&#x2F;issues&#x2F;1   注本系列文章不是技术教程，只是个人的知识点整理。 第一段废话就在昨晚，我突然冒出了奇怪的心思想要对10年学习工作生涯做一个总结。但今早起来发现无从下手，一是没有优秀的文笔能力，不能科学优雅地整理出重点；二是实在没有牛逼的技术能力，羞于展示于众，这么多年的成长也不过是不断咀嚼大神们的产出。得益于互联网">
 <meta property="og:locale">
 <meta property="article:published_time" content="2023-07-05T22:18:38.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="es6">
 <meta property="article:tag" content="javascript">
@@ -138,7 +138,7 @@ <h1 id="core-js"><a href="#core-js" class="headerlink" title="core-js"></a>core-
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/what-is-es6/" data-id="clt84xvyg002bjaotfpai10mk" data-title="整理ES6：ES6是什么？" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/what-is-es6/" data-id="clt8hne7d002ii8oh9zf55mq6" data-title="整理ES6：ES6是什么？" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -184,7 +184,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -194,7 +194,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -216,23 +216,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/dist/write-components-elegantly-using-radix/index.html b/dist/write-components-elegantly-using-radix/index.html
index 7222411..c15b2cf 100644
--- a/dist/write-components-elegantly-using-radix/index.html
+++ b/dist/write-components-elegantly-using-radix/index.html
@@ -16,7 +16,7 @@
 <meta property="og:image" content="https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271427990.png">
 <meta property="og:image" content="https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271430207.png">
 <meta property="article:published_time" content="2023-07-05T22:25:58.000Z">
-<meta property="article:modified_time" content="2024-03-01T04:09:14.475Z">
+<meta property="article:modified_time" content="2024-03-01T10:04:58.540Z">
 <meta property="article:author" content="taoliujun">
 <meta property="article:tag" content="radix">
 <meta name="twitter:card" content="summary">
@@ -157,7 +157,7 @@ <h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</
       
     </div>
     <footer class="article-footer">
-      <a data-url="https://taoliujun.github.io/blog/write-components-elegantly-using-radix/" data-id="clt84xvyh002fjaot22n7hlil" data-title="从Radix看如何优雅写组件" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
+      <a data-url="https://taoliujun.github.io/blog/write-components-elegantly-using-radix/" data-id="clt8hne7e002li8ohcgku7isj" data-title="从Radix看如何优雅写组件" class="article-share-link"><span class="fa fa-share">Teilen</span></a>
       
       
       
@@ -208,7 +208,7 @@ <h3 class="widget-title">Kategorien</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tags</h3>
     <div class="widget">
-      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
+      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Background-Tasks/" rel="tag">Background Tasks</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Badging/" rel="tag">Badging</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Battery-Status/" rel="tag">Battery Status</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Beacon/" rel="tag">Beacon</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/Broadcast-Channel/" rel="tag">Broadcast Channel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/ast/" rel="tag">ast</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/changesets/" rel="tag">changesets</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/css-module/" rel="tag">css module</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/es6/" rel="tag">es6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/github-actions/" rel="tag">github actions</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/jest/" rel="tag">jest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/radix/" rel="tag">radix</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react/" rel="tag">react</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/react-store/" rel="tag">react store</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/typescript/" rel="tag">typescript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/webapi/" rel="tag">webapi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/blog/tags/zustand/" rel="tag">zustand</a></li></ul>
     </div>
   </div>
 
@@ -218,7 +218,7 @@ <h3 class="widget-title">Tags</h3>
   <div class="widget-wrap">
     <h3 class="widget-title">Tag Cloud</h3>
     <div class="widget tagcloud">
-      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
+      <a href="/blog/tags/Background-Tasks/" style="font-size: 10px;">Background Tasks</a> <a href="/blog/tags/Badging/" style="font-size: 10px;">Badging</a> <a href="/blog/tags/Battery-Status/" style="font-size: 10px;">Battery Status</a> <a href="/blog/tags/Beacon/" style="font-size: 10px;">Beacon</a> <a href="/blog/tags/Broadcast-Channel/" style="font-size: 10px;">Broadcast Channel</a> <a href="/blog/tags/ast/" style="font-size: 10px;">ast</a> <a href="/blog/tags/changesets/" style="font-size: 10px;">changesets</a> <a href="/blog/tags/css-module/" style="font-size: 10px;">css module</a> <a href="/blog/tags/es6/" style="font-size: 20px;">es6</a> <a href="/blog/tags/github-actions/" style="font-size: 18px;">github actions</a> <a href="/blog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/blog/tags/jest/" style="font-size: 10px;">jest</a> <a href="/blog/tags/radix/" style="font-size: 10px;">radix</a> <a href="/blog/tags/react/" style="font-size: 14px;">react</a> <a href="/blog/tags/react-store/" style="font-size: 10px;">react store</a> <a href="/blog/tags/typescript/" style="font-size: 12px;">typescript</a> <a href="/blog/tags/webapi/" style="font-size: 16px;">webapi</a> <a href="/blog/tags/zustand/" style="font-size: 10px;">zustand</a>
     </div>
   </div>
 
@@ -240,23 +240,23 @@ <h3 class="widget-title">letzter Beitrag</h3>
       <ul>
         
           <li>
-            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
+            <a href="/blog/web-api-Broadcast_Channel_API/">Web API - Broadcast Channel</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Beacon_api/">Web API - Beacon</a>
+            <a href="/blog/web-api-Battery_Status_API/">Web API - Battery Status</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-Badging_api/">Web API - Badging</a>
+            <a href="/blog/web-api-Background_Tasks_API/">Web API - Background Tasks</a>
           </li>
         
           <li>
-            <a href="/blog/web-api-readme/">Web API 实践，最后更新2024/02月...</a>
+            <a href="/blog/web-api-Beacon_API/">Web API - Beacon</a>
           </li>
         
           <li>
-            <a href="/blog/snapshot-impact-on-coverage/">snapshot对单测覆盖率的影响以及应对方案</a>
+            <a href="/blog/web-api-Badging_API/">Web API - Badging</a>
           </li>
         
       </ul>
diff --git a/src/db.json b/src/db.json
index 2e4b86f..14f80a7 100644
--- a/src/db.json
+++ b/src/db.json
@@ -1 +1 @@
-{"meta":{"version":1,"warehouse":"4.0.2"},"models":{"Asset":[{"_id":"node_modules/hexo-theme-landscape/source/css/style.styl","path":"css/style.styl","modified":1,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/fancybox/jquery.fancybox.min.css","path":"fancybox/jquery.fancybox.min.css","modified":1,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/fancybox/jquery.fancybox.min.js","path":"fancybox/jquery.fancybox.min.js","modified":1,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/js/jquery-3.6.4.min.js","path":"js/jquery-3.6.4.min.js","modified":1,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/js/script.js","path":"js/script.js","modified":1,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/css/images/banner.jpg","path":"css/images/banner.jpg","modified":1,"renderable":1}],"Cache":[{"_id":"source/_posts/ast-in-css-module-auto-match.md","hash":"57243d11328b5b236e753cf43e3aeaf92581d5c8","modified":1709266154475},{"_id":"source/_posts/changesets-in-monorepo.md","hash":"028e5a939286e4d64d530cfce91dfd8ce48ff8bc","modified":1709266154475},{"_id":"source/_posts/es6-destructuring.md","hash":"14256da572743cb2ec5dfa96e7bfbe36f0d1662c","modified":1709266154475},{"_id":"source/_posts/es6-map.md","hash":"1c004ce951d740f148ac18fc64df7261bdac2c94","modified":1709266154475},{"_id":"source/_posts/es6-operator.md","hash":"3ea73f56b24d7c69d59810aa2d1abc9d850a79f4","modified":1709266154475},{"_id":"source/_posts/es6-promise.md","hash":"65ecdccb17128c0680d96667944dc9c89a386ac5","modified":1709266154475},{"_id":"source/_posts/es6-proxy.md","hash":"b90e92ade7360df923dc577c4a82a8a7b1cd1e55","modified":1709266154475},{"_id":"source/_posts/es6-reflect.md","hash":"2106ce9eeba6a2fde6b0a1b745ec45aa18dfcc3c","modified":1709266154475},{"_id":"source/_posts/es6-set.md","hash":"90c7946c5ff3c077400cc0b41c39e12577f4839a","modified":1709266154475},{"_id":"source/_posts/es6-symbol.md","hash":"de300a1125fb2b54db5c5ed2159603ef76af7584","modified":1709266154475},{"_id":"source/_posts/github-actions-examples.md","hash":"447bddffb8264f48acf58ad353b7fc217564f892","modified":1709266154475},{"_id":"source/_posts/github-actions-intro.md","hash":"a83c76905a6e0914c86b1a926a8796ed856a0d5e","modified":1709266154475},{"_id":"source/_posts/github-actions-jobs.md","hash":"e9a026ecf09a82d48e770e2f92f095e3a27cbde8","modified":1709266154475},{"_id":"source/_posts/github-actions-learn.md","hash":"0c0b4c67d64f84b9824a2ddef979dcd76fb438e5","modified":1709266154475},{"_id":"source/_posts/github-actions-quickstart.md","hash":"74ba308dae7aed5228948aa59b7cc2b5b200b2fa","modified":1709266154475},{"_id":"source/_posts/github-actions-runs.md","hash":"8c85a6c4f08c951e1418e4dc0098a720d8b93e34","modified":1709266154475},{"_id":"source/_posts/github-actions-sample-eslint-in-pull-request.md","hash":"90053841520f1e0bc092fbf24ac1f975ab2e8070","modified":1709266154475},{"_id":"source/_posts/github-actions-workflows.md","hash":"c741cbe78aaacf2cd443d5de96826ca6c850fea0","modified":1709266154475},{"_id":"source/_posts/react-performance optimization.md","hash":"4c5ab18461891d2786c41e8993815e6135dfb1a4","modified":1709266154475},{"_id":"source/_posts/react-usedeferredvalue.md","hash":"f33a9314f722fe6eca1fcbf090ae11385dfe0771","modified":1709266154475},{"_id":"source/_posts/react-usetransition.md","hash":"6c1e1d0c887c1d92d76590a8059e369ba96b9409","modified":1709266154475},{"_id":"source/_posts/react-zustand.md","hash":"346576eb884e3157eb3e630225a314d9f0cd36fe","modified":1709266154475},{"_id":"source/_posts/snapshot-impact-on-coverage.md","hash":"58a3c96463a7f8f98f131e868f53f4d313d3af30","modified":1709266154475},{"_id":"source/_posts/tsconfig-json.md","hash":"7b1afc50798072eb2c6872bf14a39e362b5a9384","modified":1709266154475},{"_id":"source/_posts/typescript-means.md","hash":"bc4c5fbcdf3d022678d478ee7393daeb696ee0b8","modified":1709266154475},{"_id":"source/_posts/web-api-Background_Tasks_API.md","hash":"67c7d0881e16e7caaa9b5f2023326addb8d0f8fb","modified":1709266154475},{"_id":"source/_posts/web-api-Badging_api.md","hash":"d3715b37378201cd64e86830ff262ffd1abb0f46","modified":1709266154475},{"_id":"source/_posts/web-api-Beacon_api.md","hash":"1ebf0a1ceeebcf69df59bfc283a1791d5e3dd122","modified":1709266154475},{"_id":"source/_posts/web-api-readme.md","hash":"9a5802813a80c44b200a493f09eddf9402aa8af7","modified":1709266160459},{"_id":"source/_posts/what-is-es6.md","hash":"fd3d6c8c60ca914b00153cba27a84b3ad395a0b3","modified":1709266154475},{"_id":"source/_posts/write-components-elegantly-using-radix.md","hash":"a50deb6fbb3d782319c9c426dd24547d95d9298e","modified":1709266154475},{"_id":"node_modules/hexo-theme-landscape/LICENSE","hash":"c480fce396b23997ee23cc535518ffaaf7f458f8","modified":1709113853716},{"_id":"node_modules/hexo-theme-landscape/README.md","hash":"1a9b279e6dd29fd19245f913f0c4a316ffaa62db","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/_config.yml","hash":"b608c1f1322760dce9805285a602a95832730a2e","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/package.json","hash":"4bf95d52f77edf811f23f6d264a7493311a8d078","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/languages/de-DE.yml","hash":"d29d1c4256b7ed9df42f511c2ff0a23ad5fd6c1f","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/de.yml","hash":"3ebf0775abbee928c8d7bda943c191d166ded0d3","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/default.yml","hash":"ea5e6aee4cb14510793ac4593a3bddffe23e530c","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/en-GB.yml","hash":"ea5e6aee4cb14510793ac4593a3bddffe23e530c","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/en-US.yml","hash":"ea5e6aee4cb14510793ac4593a3bddffe23e530c","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/en.yml","hash":"3083f319b352d21d80fc5e20113ddf27889c9d11","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/es-ES.yml","hash":"7008a8fc91f18d2a735864817b8ebda30c7a2c66","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/es.yml","hash":"76edb1171b86532ef12cfd15f5f2c1ac3949f061","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/fr-FR.yml","hash":"8d09dbdab00a30a2870b56f7c0a7ca7deafa7b88","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/fr.yml","hash":"415e1c580ced8e4ce20b3b0aeedc3610341c76fb","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/hu-HU.yml","hash":"712d18664898fa21ba38d4973e90ef41a324ea25","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/hu.yml","hash":"284d557130bf54a74e7dcef9d42096130e4d9550","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/it-IT.yml","hash":"2cb6dc2fab9bd2dbe1c8bb869a9e8bf85a564fdd","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/it.yml","hash":"89b7d91306b2c1a0f3ac023b657bf974f798a1e8","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/ja-JP.yml","hash":"08481267e0c112e1f6855620f2837ec4c4a98bbd","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/ja.yml","hash":"a73e1b9c80fd6e930e2628b393bfe3fb716a21a9","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/ko-KR.yml","hash":"19209ad8f9d4057e8df808937f950eb265e1db69","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/ko.yml","hash":"881d6a0a101706e0452af81c580218e0bfddd9cf","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/mn-MN.yml","hash":"b9e5f3e7c0c2f779cf2cfded6db847b5941637ca","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/mn.yml","hash":"2e7523951072a9403ead3840ad823edd1084c116","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/nl-NL.yml","hash":"5ebbc30021f05d99938f96dfff280392df7f91f0","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/nl.yml","hash":"12ed59faba1fc4e8cdd1d42ab55ef518dde8039c","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/no.yml","hash":"965a171e70347215ec726952e63f5b47930931ef","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/pt-PT.yml","hash":"0f852b6b228e6ea59aa3540574bb89b233f2a098","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/pt.yml","hash":"57d07b75d434fbfc33b0ddb543021cb5f53318a8","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/ru-RU.yml","hash":"360d11a28bb768afb1dd15f63fa7fd3a8cc547ee","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/ru.yml","hash":"4fda301bbd8b39f2c714e2c934eccc4b27c0a2b0","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/th-TH.yml","hash":"ebfdba9bc4842c829473c1e6e4544344f182724d","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/th.yml","hash":"84a55b00aa01f03982be294e43c33a20e6d32862","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/tr.yml","hash":"a1cdbfa17682d7a971de8ab8588bf57c74224b5b","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/zh-CN.yml","hash":"1efd95774f401c80193eac6ee3f1794bfe93dc5a","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/zh-TW.yml","hash":"53ce3000c5f767759c7d2c4efcaa9049788599c3","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/layout/archive.ejs","hash":"2703b07cc8ac64ae46d1d263f4653013c7e1666b","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/category.ejs","hash":"765426a9c8236828dc34759e604cc2c52292835a","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/index.ejs","hash":"aa1b4456907bdb43e629be3931547e2d29ac58c8","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/layout.ejs","hash":"0d1765036e4874500e68256fedb7470e96eeb6ee","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/page.ejs","hash":"7d80e4e36b14d30a7cd2ac1f61376d9ebf264e8b","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/post.ejs","hash":"7d80e4e36b14d30a7cd2ac1f61376d9ebf264e8b","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/tag.ejs","hash":"eaa7b4ccb2ca7befb90142e4e68995fb1ea68b2e","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/scripts/fancybox.js","hash":"c857d7a5e4a5d71c743a009c5932bf84229db428","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/after-footer.ejs","hash":"377d257d5d16e0158a4405c72401517b074fd7ff","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/archive-post.ejs","hash":"c7a71425a946d05414c069ec91811b5c09a92c47","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/archive.ejs","hash":"7cb70a7a54f8c7ae49b10d1f37c0a9b74eab8826","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/article.ejs","hash":"56597e951203dd662a6d2c817c7c4f1c920d4a25","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/footer.ejs","hash":"3656eb692254346671abc03cb3ba1459829e0dce","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/gauges-analytics.ejs","hash":"21a1e2a3907d1a3dad1cd0ab855fe6735f233c74","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/google-analytics.ejs","hash":"2ea7442ea1e1a8ab4e41e26c563f58413b59a3d0","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/head.ejs","hash":"f05bced793b0314d4f2ef0c993b3a51d0b7d203a","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/header.ejs","hash":"6a5033d189554c9a6d42e2ef7952ae5c9742648e","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/mobile-nav.ejs","hash":"e952a532dfc583930a666b9d4479c32d4a84b44e","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/sidebar.ejs","hash":"930da35cc2d447a92e5ee8f835735e6fd2232469","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_widget/archive.ejs","hash":"beb4a86fcc82a9bdda9289b59db5a1988918bec3","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_widget/recent_posts.ejs","hash":"60c4b012dcc656438ff59997e60367e5a21ab746","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_widget/category.ejs","hash":"dd1e5af3c6af3f5d6c85dfd5ca1766faed6a0b05","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_widget/tag.ejs","hash":"2de380865df9ab5f577f7d3bcadf44261eb5faae","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_widget/tagcloud.ejs","hash":"b4a2079101643f63993dcdb32925c9b071763b46","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/source/css/_extend.styl","hash":"222fbe6d222531d61c1ef0f868c90f747b1c2ced","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_variables.styl","hash":"ca28281423ae57d76b6c1eb91cd845fd4e518bd6","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/style.styl","hash":"e55a1d92954ed20f6887f92dc727bb995a010a43","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/fancybox/jquery.fancybox.min.css","hash":"1be9b79be02a1cfc5d96c4a5e0feb8f472babd95","modified":1709113854184},{"_id":"node_modules/hexo-theme-landscape/source/js/script.js","hash":"49773efcb2221bbdf2d86f3f5c5ff2d841b528cc","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/category.ejs","hash":"c6bcd0e04271ffca81da25bcff5adf3d46f02fc0","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/date.ejs","hash":"f1458584b679545830b75bef2526e2f3eb931045","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/gallery.ejs","hash":"3d9d81a3c693ff2378ef06ddb6810254e509de5b","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/nav.ejs","hash":"16a904de7bceccbb36b4267565f2215704db2880","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/tag.ejs","hash":"2fcb0bf9c8847a644167a27824c9bb19ac74dd14","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/archive.styl","hash":"db15f5677dc68f1730e82190bab69c24611ca292","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/title.ejs","hash":"4d7e62574ddf46de9b41605fe3140d77b5ddb26d","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/article.styl","hash":"2d1f6f79ebf9cb55ebdb3865a2474437eb2b37c6","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/comment.styl","hash":"79d280d8d203abb3bd933ca9b8e38c78ec684987","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/footer.styl","hash":"e35a060b8512031048919709a8e7b1ec0e40bc1b","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/header.styl","hash":"268d2989acb06e2ddd06cc36a6918c6cd865476b","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/highlight.styl","hash":"9cc3b2927d814f2f6e8e188f9d3657b94f4c6ef3","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/mobile.styl","hash":"a399cf9e1e1cec3e4269066e2948d7ae5854d745","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/sidebar-bottom.styl","hash":"8fd4f30d319542babfd31f087ddbac550f000a8a","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/sidebar-aside.styl","hash":"890349df5145abf46ce7712010c89237900b3713","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/sidebar.styl","hash":"404ec059dc674a48b9ab89cd83f258dec4dcb24d","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_util/grid.styl","hash":"0bf55ee5d09f193e249083602ac5fcdb1e571aed","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_util/mixin.styl","hash":"44f32767d9fd3c1c08a60d91f181ee53c8f0dbb3","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/fancybox/jquery.fancybox.min.js","hash":"6181412e73966696d08e1e5b1243a572d0f22ba6","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/js/jquery-3.6.4.min.js","hash":"eda46747c71d38a880bee44f9a439c3858bb8f99","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/images/banner.jpg","hash":"f44aa591089fcb3ec79770a1e102fd3289a7c6a6","modified":1709113854192},{"_id":"public/sitemap.xml","hash":"ca72e3621327c17aaa74e3b550e78aa40eeb5860","modified":1709266162468},{"_id":"public/web-api-Background_Tasks_API/index.html","hash":"d9cb22a1d238addbf24f4453980ce2202344bc04","modified":1709266162468},{"_id":"public/web-api-Beacon_api/index.html","hash":"d87649e195b44accafecf460eb415f22f5557957","modified":1709266162468},{"_id":"public/web-api-Badging_api/index.html","hash":"8b1b6d90d5abc95c7597af38c05639e512fb1d48","modified":1709266162468},{"_id":"public/web-api-readme/index.html","hash":"8ea29aa86fec7a7ff9dc884903d1f7dd64c388af","modified":1709266162468},{"_id":"public/snapshot-impact-on-coverage/index.html","hash":"b94110f3333b003c66457e9db01171db6565538f","modified":1709266162468},{"_id":"public/github-actions-sample-eslint-in-pull-request/index.html","hash":"2231ad864e5723ac2c3d5c7c21938a301e9f1622","modified":1709266162468},{"_id":"public/react-zustand/index.html","hash":"ca7ea4bcdddc11efce432cdfaa7648b195dd3ce4","modified":1709266162468},{"_id":"public/changesets-in-monorepo/index.html","hash":"cc7a40176f7da19e4f611d91109cc633539194e1","modified":1709266162468},{"_id":"public/tsconfig-json/index.html","hash":"820ca96215242c67352bacd288ac946ce2bfeb2d","modified":1709266162468},{"_id":"public/typescript-means/index.html","hash":"9809853d42878d0fc063e6ccecf4945e734e1ce8","modified":1709266162468},{"_id":"public/ast-in-css-module-auto-match/index.html","hash":"de4964d59c3bd97b49cad3b484180c8f37e5365b","modified":1709266162468},{"_id":"public/react-usedeferredvalue/index.html","hash":"f79a26323552708bf46ff4f361d066615b6b6a43","modified":1709266162468},{"_id":"public/react-usetransition/index.html","hash":"f79ae6210e02cce4d4deb78f0c67bf6aa7724e26","modified":1709266162468},{"_id":"public/react-performance optimization/index.html","hash":"53612e2f222f98ae5b5323b946a735d50ef8be41","modified":1709266162468},{"_id":"public/es6-destructuring/index.html","hash":"e08e9299b6e34bf121d7ee4076ec3bfe2a4a6978","modified":1709266162468},{"_id":"public/es6-operator/index.html","hash":"e51b6054a3d0433ced088f87be6fdd9d47dc9eeb","modified":1709266162468},{"_id":"public/es6-symbol/index.html","hash":"5df9d208f418d7ef7ff6fba3ef427953b9e89ad6","modified":1709266162468},{"_id":"public/es6-set/index.html","hash":"345d8d92f7912299d62ed8ec53c3a6438f8a1069","modified":1709266162468},{"_id":"public/es6-map/index.html","hash":"ac67459574018f052da93fe13658f3f6de2935d5","modified":1709266162468},{"_id":"public/es6-proxy/index.html","hash":"1cb5b1986760950ead919e966718a3e1cdf7ef4e","modified":1709266162468},{"_id":"public/es6-reflect/index.html","hash":"04d31d300ab1dcb6c362e0c949aed9568f51420e","modified":1709266162468},{"_id":"public/github-actions-runs/index.html","hash":"9bf5bb6b0397cbed95c2494f684ac3ea5877e67a","modified":1709266162468},{"_id":"public/github-actions-jobs/index.html","hash":"d9874ff66439c57d0d4286d956c666f2859b667c","modified":1709266162468},{"_id":"public/github-actions-workflows/index.html","hash":"71e277909a198fd1c40096c386fed225b732d1ea","modified":1709266162468},{"_id":"public/github-actions-examples/index.html","hash":"5ce5d044e92f5d36331f8917c43ea2f8d3c11272","modified":1709266162468},{"_id":"public/github-actions-learn/index.html","hash":"1ef19be25e02a654b8ac396bc932c46c0131771a","modified":1709266162468},{"_id":"public/github-actions-quickstart/index.html","hash":"9cced6ac3f6200fac78086c2a7cfff15fe2986d6","modified":1709266162468},{"_id":"public/github-actions-intro/index.html","hash":"dca117f7921b0916284b477d4845739d135193b7","modified":1709266162468},{"_id":"public/write-components-elegantly-using-radix/index.html","hash":"401c060c1ea1c339bd926a7963617387847ebb13","modified":1709266162468},{"_id":"public/es6-promise/index.html","hash":"682ab81d195f2c189bf0e4f2f56f8b51af0b09a6","modified":1709266162468},{"_id":"public/what-is-es6/index.html","hash":"567c88a70884eb110385bf01e4e1b816e8252a74","modified":1709266162468},{"_id":"public/archives/index.html","hash":"795f00a19d31cf84bf5d6ccf7d3f86f2c6961a1d","modified":1709266162468},{"_id":"public/archives/page/2/index.html","hash":"29b7fd1c8675ea97a438e9b707b208d1a8777cd2","modified":1709266162468},{"_id":"public/archives/page/3/index.html","hash":"e83b410f17957a1605d339a46cd9d23523017ad5","modified":1709266162468},{"_id":"public/archives/page/4/index.html","hash":"ea880d49cedf80f546ec5c5dce0fd1ce318699cf","modified":1709266162468},{"_id":"public/archives/2023/index.html","hash":"630299823b6ce5d22a155f998a34d3a5450bafc5","modified":1709266162468},{"_id":"public/archives/2023/page/2/index.html","hash":"a553c0b6753a1571daf1019d3db2c93213706306","modified":1709266162468},{"_id":"public/archives/2023/page/3/index.html","hash":"f27acb84ce26d055a6494bfed76fbd1ed9bc64e1","modified":1709266162468},{"_id":"public/archives/2023/07/index.html","hash":"5845cda9ae2ec9989d1b1f9b2b05ba1dd34a030d","modified":1709266162468},{"_id":"public/archives/2023/07/page/2/index.html","hash":"cf71b6edeb3d1560b0d39537da384eaf44f48109","modified":1709266162468},{"_id":"public/archives/2023/07/page/3/index.html","hash":"13973424a1ecbc824446c10a35a352117e686d41","modified":1709266162468},{"_id":"public/archives/2023/08/index.html","hash":"87344d98bbeed87cff6f914c5edf937709b01536","modified":1709266162468},{"_id":"public/archives/2023/09/index.html","hash":"26f11ac8ddf70ec5399f9ae0d7c23b5857f6303d","modified":1709266162468},{"_id":"public/archives/2023/12/index.html","hash":"2aec9aca8034d075fe1ddc0033b809af2774ed97","modified":1709266162468},{"_id":"public/archives/2024/index.html","hash":"07cee3fb6b20bc7a6d8175919a0dc4ba03317432","modified":1709266162468},{"_id":"public/archives/2024/01/index.html","hash":"e029b2c4b90a49c6ecae6285caba5e9f552cec47","modified":1709266162468},{"_id":"public/archives/2024/02/index.html","hash":"4d8937b7bfcfa42e5f52187b1b5c28cc01ccd382","modified":1709266162468},{"_id":"public/categories/JavaScript/index.html","hash":"a6a8cee2fd97b14c5616a78cd59af1f82f9dabfb","modified":1709266162468},{"_id":"public/categories/JavaScript/page/2/index.html","hash":"f5625be9d05d330e55b2fcb3fd89c8a8c4413ed2","modified":1709266162468},{"_id":"public/categories/工程化/index.html","hash":"bb65dddc1a5459740e3ec919aacc95382e08bac0","modified":1709266162468},{"_id":"public/categories/工程化/page/2/index.html","hash":"ec460aa6f36a136ef820ffec74c81fcab0c4f3cc","modified":1709266162468},{"_id":"public/categories/React/index.html","hash":"911f6014573168e05694b529b45c8758af7ad6cc","modified":1709266162468},{"_id":"public/categories/TypeScript/index.html","hash":"3dc8fe5022ffab389ddd5e166e4947b02db3bb8b","modified":1709266162468},{"_id":"public/index.html","hash":"55007083450a855d97b48ecce0cdee7dd1ac2c70","modified":1709266162468},{"_id":"public/page/2/index.html","hash":"ff5f3f0090d466c04532903ff142cda1ebc29a00","modified":1709266162468},{"_id":"public/page/3/index.html","hash":"4d061331a7b909aecfe57ca4c7883e82c73ed7e2","modified":1709266162468},{"_id":"public/page/4/index.html","hash":"347fd18691afb031a11ed0d561c2b8c8e963e099","modified":1709266162468},{"_id":"public/tags/ast/index.html","hash":"ccec85cbb28460fe4b783849d0a21a45afb399e3","modified":1709266162468},{"_id":"public/tags/css-module/index.html","hash":"d31cf7ec56dfee1d9b4abe4f10293c6c75051b72","modified":1709266162468},{"_id":"public/tags/changesets/index.html","hash":"0c4bce0e6a8d3529698fc4750fd95e2a8ad9cb37","modified":1709266162468},{"_id":"public/tags/es6/index.html","hash":"0178cf3d3e704da53c14747bf91bee7b5a222b26","modified":1709266162468},{"_id":"public/tags/javascript/index.html","hash":"ff36885bfcbf000b6a672291a2d2cc0d158cbfa0","modified":1709266162468},{"_id":"public/tags/github-actions/index.html","hash":"3c38a86d0a4dd60a169bf8ff2d28bb15812e70ec","modified":1709266162468},{"_id":"public/tags/react/index.html","hash":"c12666f23f9269999262b0f091af75c6119171e1","modified":1709266162468},{"_id":"public/tags/zustand/index.html","hash":"33cb56b95b0b051b13d3293b06595b440d3d2b0f","modified":1709266162468},{"_id":"public/tags/react-store/index.html","hash":"e41d985bd669be863a5d5655c9c88b4627b1a3bf","modified":1709266162468},{"_id":"public/tags/jest/index.html","hash":"001159f8ba3640cf52c2a8e40d64b339af137996","modified":1709266162468},{"_id":"public/tags/typescript/index.html","hash":"28cae5be3c27f2153ed13c100631fd0db3b6c5ee","modified":1709266162468},{"_id":"public/tags/webapi/index.html","hash":"2ad131d7a0d55ebc883d9119e98e9db223f84787","modified":1709266162468},{"_id":"public/tags/Background-Tasks/index.html","hash":"023cdae1cc95bd9c218246b222a5addcebbe7ae3","modified":1709266162468},{"_id":"public/tags/Badging/index.html","hash":"5077e96478c0d0bd86566ceef34aa9fc3b7bcba7","modified":1709266162468},{"_id":"public/tags/Beacon/index.html","hash":"c76f03fc38bc31093b37f8a12341710ea81369ba","modified":1709266162468},{"_id":"public/tags/radix/index.html","hash":"771466669b271b3a718af2e8a20c3be4580da0b9","modified":1709266162468},{"_id":"public/css/style.css","hash":"ddb3792605d744ab3d9f0a649c82b62e9b16daa6","modified":1709266162468},{"_id":"public/fancybox/jquery.fancybox.min.css","hash":"1be9b79be02a1cfc5d96c4a5e0feb8f472babd95","modified":1709266162468},{"_id":"public/fancybox/jquery.fancybox.min.js","hash":"6181412e73966696d08e1e5b1243a572d0f22ba6","modified":1709266162468},{"_id":"public/js/script.js","hash":"49773efcb2221bbdf2d86f3f5c5ff2d841b528cc","modified":1709266162468},{"_id":"public/js/jquery-3.6.4.min.js","hash":"eda46747c71d38a880bee44f9a439c3858bb8f99","modified":1709266162468},{"_id":"public/css/images/banner.jpg","hash":"f44aa591089fcb3ec79770a1e102fd3289a7c6a6","modified":1709266162468}],"Category":[{"name":"JavaScript","_id":"clt84xvxs0004jaot848oets5"},{"name":"工程化","_id":"clt84xvxv0008jaot37r83p59"},{"name":"React","_id":"clt84xvy9001hjaotahwy1md9"},{"name":"TypeScript","_id":"clt84xvyf0023jaot9nt14vdm"}],"Data":[],"Page":[],"Post":[{"title":"AST 在 css module 自动匹配中的应用","date":"2023-07-26T00:03:32.000Z","url":"ast-in-css-module-auto-match","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/21](https://github.com/taoliujun/blog/issues/21)\n\n<!--hexo\n---\nurl: ast-in-css-module-auto-match\ntags:\n  - ast\n  - css module\n---\n-->\n\n# AST 在 css module 自动匹配中的应用\n\n我们已经非常明白为什么在项目中要使用 css modules，可直接说到“自动匹配”有点莫名其妙，所以有必要介绍下为什么提出这个问题。\n\n第一步，我想用官方的话来镇住大家。\n\n> [css modules](https://github.com/css-modules/css-modules)的官方描述：A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.\n\n官方只提供了一个规范的描述，本身并未提供工具去实现。但无需担心，常见的打包工具都支持了 css modules。比如 webpack 的[css-loader](https://webpack.js.org/loaders/css-loader/)。\n\n## css-loader\n\ncss-loader 在很早就支持 modules，只需要配置`modules`属性，程序员们使用它的方式是各种各样的。有设置 local modules，在 css 文件中使用`:global`来支持全局样式的；有设置 global modules，在 css 文件中使用`:local`来支持局部样式的。这些都是可以的，但是都需要在 css 文件中做一些特殊的标记，这样就会导致 css 文件的可读性变差。\n\n后来人们学会了配置根据 css 文件名中是否包含`.modules.`或`.global.`字符串来启用/禁用该文件的 modules 功能。于是项目里有大量的*.modules.css/*.global.css 文件，而通过文件名去匹配某个功能的开关却恰恰是程序设计的忌讳。\n\n## 符合直觉的自动识别\n\n我就在 \\*.modules.css 文件堆中浑浑噩噩的度过了好多年，直到近两年的某一天在[UmiJS](https://umijs.org/)脚手架中发现了这个奇特的细节。\n\n**使用`import xxx from './styles.css'`启用 modules，使用`import './styles.css'`启用 global。**\n\n这思路对我来说简直是惊为天人，无关乎它的技术细节。因为在直觉中，`import module`就是要直接执行它，而`import xxx from module`就是要使用它的某些东西。对于 css 是同样的，既要直接引入全局样式，又要使用局部样式。\n\n## 技术细节\n\nwebpack 的 module rules 支持使用`resourceQuery`去匹配模块文件名的 query 部分，所以为 css-loader 增加一个 rules 如下：\n\n```typescript\n{\n  test: /\\.css$/,\n  oneOf: [\n    {\n      resourceQuery: /modules/,\n      use: [\n        { loader: 'style-loader' },\n        { loader: 'css-loader', options: { modules: true } },\n      ],\n    },\n    {\n      use: [\n        { loader: 'style-loader' },\n        { loader: 'css-loader' },\n      ],\n    },\n  ],\n}\n```\n\n如此，使用`import xxx from './styles.css?modules'`就会命中第一个规则而启用 modules 功能了。\n\n但显然这样写太麻烦了，有什么办法让它在写`import xxx from './styles.css'`时候，自动加上`?modules`而启用 css modules 呢？\n\n答案就是使用 AST。由于项目几乎都在使用 babel 去处理 js 文件，所以可以直接使用 babel 插件去分析 AST 从而给 css 文件加上`?modules`后缀即可。就直接看[umijs 的插件代码](https://github.com/umijs/umi/blob/master/packages/babel-preset-umi/src/plugins/autoCSSModules.ts):\n\n```typescript\nimport * as Babel from \"@umijs/bundler-utils/compiled/babel/core\";\nimport * as t from \"@umijs/bundler-utils/compiled/babel/types\";\nimport { extname } from \"path\";\n\nconst CSS_EXT_NAMES = [\".css\", \".less\", \".sass\", \".scss\", \".stylus\", \".styl\"];\n\nexport default function () {\n  return {\n    visitor: {\n      ImportDeclaration(path: Babel.NodePath<t.ImportDeclaration>) {\n        const {\n          specifiers,\n          source,\n          source: { value },\n        } = path.node;\n        if (specifiers.length && CSS_EXT_NAMES.includes(extname(value))) {\n          source.value = `${value}?modules`;\n        }\n      },\n\n      // more codes\n    },\n  };\n}\n```\n\n如上代码中，AST `specifiers` 里有内容，说明是`import xxx from module`的形式，而`source.value`就是 css 文件的路径，所以直接加上`?modules`后缀即可。\n\n## 参考\n\n- https://github.com/css-modules/css-modules\n- https://webpack.js.org/loaders/css-loader/#modules\n- https://www.npmjs.com/package/@umijs/babel-plugin-auto-css-modules\n\n\n\n\n","source":"_posts/ast-in-css-module-auto-match.md","raw":"---\ntitle: \"AST 在 css module 自动匹配中的应用\"\ndate: \"2023-07-26T08:03:32Z\"\ncategories:\n  - [JavaScript]\n  - [工程化]\n\nurl: ast-in-css-module-auto-match\ntags:\n  - ast\n  - css module\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/21](https://github.com/taoliujun/blog/issues/21)\n\n<!--hexo\n---\nurl: ast-in-css-module-auto-match\ntags:\n  - ast\n  - css module\n---\n-->\n\n# AST 在 css module 自动匹配中的应用\n\n我们已经非常明白为什么在项目中要使用 css modules，可直接说到“自动匹配”有点莫名其妙，所以有必要介绍下为什么提出这个问题。\n\n第一步，我想用官方的话来镇住大家。\n\n> [css modules](https://github.com/css-modules/css-modules)的官方描述：A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.\n\n官方只提供了一个规范的描述，本身并未提供工具去实现。但无需担心，常见的打包工具都支持了 css modules。比如 webpack 的[css-loader](https://webpack.js.org/loaders/css-loader/)。\n\n## css-loader\n\ncss-loader 在很早就支持 modules，只需要配置`modules`属性，程序员们使用它的方式是各种各样的。有设置 local modules，在 css 文件中使用`:global`来支持全局样式的；有设置 global modules，在 css 文件中使用`:local`来支持局部样式的。这些都是可以的，但是都需要在 css 文件中做一些特殊的标记，这样就会导致 css 文件的可读性变差。\n\n后来人们学会了配置根据 css 文件名中是否包含`.modules.`或`.global.`字符串来启用/禁用该文件的 modules 功能。于是项目里有大量的*.modules.css/*.global.css 文件，而通过文件名去匹配某个功能的开关却恰恰是程序设计的忌讳。\n\n## 符合直觉的自动识别\n\n我就在 \\*.modules.css 文件堆中浑浑噩噩的度过了好多年，直到近两年的某一天在[UmiJS](https://umijs.org/)脚手架中发现了这个奇特的细节。\n\n**使用`import xxx from './styles.css'`启用 modules，使用`import './styles.css'`启用 global。**\n\n这思路对我来说简直是惊为天人，无关乎它的技术细节。因为在直觉中，`import module`就是要直接执行它，而`import xxx from module`就是要使用它的某些东西。对于 css 是同样的，既要直接引入全局样式，又要使用局部样式。\n\n## 技术细节\n\nwebpack 的 module rules 支持使用`resourceQuery`去匹配模块文件名的 query 部分，所以为 css-loader 增加一个 rules 如下：\n\n```typescript\n{\n  test: /\\.css$/,\n  oneOf: [\n    {\n      resourceQuery: /modules/,\n      use: [\n        { loader: 'style-loader' },\n        { loader: 'css-loader', options: { modules: true } },\n      ],\n    },\n    {\n      use: [\n        { loader: 'style-loader' },\n        { loader: 'css-loader' },\n      ],\n    },\n  ],\n}\n```\n\n如此，使用`import xxx from './styles.css?modules'`就会命中第一个规则而启用 modules 功能了。\n\n但显然这样写太麻烦了，有什么办法让它在写`import xxx from './styles.css'`时候，自动加上`?modules`而启用 css modules 呢？\n\n答案就是使用 AST。由于项目几乎都在使用 babel 去处理 js 文件，所以可以直接使用 babel 插件去分析 AST 从而给 css 文件加上`?modules`后缀即可。就直接看[umijs 的插件代码](https://github.com/umijs/umi/blob/master/packages/babel-preset-umi/src/plugins/autoCSSModules.ts):\n\n```typescript\nimport * as Babel from \"@umijs/bundler-utils/compiled/babel/core\";\nimport * as t from \"@umijs/bundler-utils/compiled/babel/types\";\nimport { extname } from \"path\";\n\nconst CSS_EXT_NAMES = [\".css\", \".less\", \".sass\", \".scss\", \".stylus\", \".styl\"];\n\nexport default function () {\n  return {\n    visitor: {\n      ImportDeclaration(path: Babel.NodePath<t.ImportDeclaration>) {\n        const {\n          specifiers,\n          source,\n          source: { value },\n        } = path.node;\n        if (specifiers.length && CSS_EXT_NAMES.includes(extname(value))) {\n          source.value = `${value}?modules`;\n        }\n      },\n\n      // more codes\n    },\n  };\n}\n```\n\n如上代码中，AST `specifiers` 里有内容，说明是`import xxx from module`的形式，而`source.value`就是 css 文件的路径，所以直接加上`?modules`后缀即可。\n\n## 参考\n\n- https://github.com/css-modules/css-modules\n- https://webpack.js.org/loaders/css-loader/#modules\n- https://www.npmjs.com/package/@umijs/babel-plugin-auto-css-modules\n\n\n\n\n","slug":"ast-in-css-module-auto-match","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvxl0000jaot4v3ac2xf","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/21\">https://github.com/taoliujun/blog/issues/21</a></p>\n<!--hexo\n---\nurl: ast-in-css-module-auto-match\ntags:\n  - ast\n  - css module\n---\n-->\n\n<h1 id=\"AST-在-css-module-自动匹配中的应用\"><a href=\"#AST-在-css-module-自动匹配中的应用\" class=\"headerlink\" title=\"AST 在 css module 自动匹配中的应用\"></a>AST 在 css module 自动匹配中的应用</h1><p>我们已经非常明白为什么在项目中要使用 css modules，可直接说到“自动匹配”有点莫名其妙，所以有必要介绍下为什么提出这个问题。</p>\n<p>第一步，我想用官方的话来镇住大家。</p>\n<blockquote>\n<p><a href=\"https://github.com/css-modules/css-modules\">css modules</a>的官方描述：A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.</p>\n</blockquote>\n<p>官方只提供了一个规范的描述，本身并未提供工具去实现。但无需担心，常见的打包工具都支持了 css modules。比如 webpack 的<a href=\"https://webpack.js.org/loaders/css-loader/\">css-loader</a>。</p>\n<h2 id=\"css-loader\"><a href=\"#css-loader\" class=\"headerlink\" title=\"css-loader\"></a>css-loader</h2><p>css-loader 在很早就支持 modules，只需要配置<code>modules</code>属性，程序员们使用它的方式是各种各样的。有设置 local modules，在 css 文件中使用<code>:global</code>来支持全局样式的；有设置 global modules，在 css 文件中使用<code>:local</code>来支持局部样式的。这些都是可以的，但是都需要在 css 文件中做一些特殊的标记，这样就会导致 css 文件的可读性变差。</p>\n<p>后来人们学会了配置根据 css 文件名中是否包含<code>.modules.</code>或<code>.global.</code>字符串来启用&#x2F;禁用该文件的 modules 功能。于是项目里有大量的*.modules.css&#x2F;*.global.css 文件，而通过文件名去匹配某个功能的开关却恰恰是程序设计的忌讳。</p>\n<h2 id=\"符合直觉的自动识别\"><a href=\"#符合直觉的自动识别\" class=\"headerlink\" title=\"符合直觉的自动识别\"></a>符合直觉的自动识别</h2><p>我就在 *.modules.css 文件堆中浑浑噩噩的度过了好多年，直到近两年的某一天在<a href=\"https://umijs.org/\">UmiJS</a>脚手架中发现了这个奇特的细节。</p>\n<p><strong>使用<code>import xxx from &#39;./styles.css&#39;</code>启用 modules，使用<code>import &#39;./styles.css&#39;</code>启用 global。</strong></p>\n<p>这思路对我来说简直是惊为天人，无关乎它的技术细节。因为在直觉中，<code>import module</code>就是要直接执行它，而<code>import xxx from module</code>就是要使用它的某些东西。对于 css 是同样的，既要直接引入全局样式，又要使用局部样式。</p>\n<h2 id=\"技术细节\"><a href=\"#技术细节\" class=\"headerlink\" title=\"技术细节\"></a>技术细节</h2><p>webpack 的 module rules 支持使用<code>resourceQuery</code>去匹配模块文件名的 query 部分，所以为 css-loader 增加一个 rules 如下：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><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\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">test</span>: <span class=\"regexp\">/\\.css$/</span>,</span><br><span class=\"line\">  <span class=\"attr\">oneOf</span>: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">resourceQuery</span>: <span class=\"regexp\">/modules/</span>,</span><br><span class=\"line\">      <span class=\"attr\">use</span>: [</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;style-loader&#x27;</span> &#125;,</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;css-loader&#x27;</span>, <span class=\"attr\">options</span>: &#123; <span class=\"attr\">modules</span>: <span class=\"literal\">true</span> &#125; &#125;,</span><br><span class=\"line\">      ],</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">use</span>: [</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;style-loader&#x27;</span> &#125;,</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;css-loader&#x27;</span> &#125;,</span><br><span class=\"line\">      ],</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">  ],</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>如此，使用<code>import xxx from &#39;./styles.css?modules&#39;</code>就会命中第一个规则而启用 modules 功能了。</p>\n<p>但显然这样写太麻烦了，有什么办法让它在写<code>import xxx from &#39;./styles.css&#39;</code>时候，自动加上<code>?modules</code>而启用 css modules 呢？</p>\n<p>答案就是使用 AST。由于项目几乎都在使用 babel 去处理 js 文件，所以可以直接使用 babel 插件去分析 AST 从而给 css 文件加上<code>?modules</code>后缀即可。就直接看<a href=\"https://github.com/umijs/umi/blob/master/packages/babel-preset-umi/src/plugins/autoCSSModules.ts\">umijs 的插件代码</a>:</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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\">import</span> * <span class=\"keyword\">as</span> <span class=\"title class_\">Babel</span> <span class=\"keyword\">from</span> <span class=\"string\">&quot;@umijs/bundler-utils/compiled/babel/core&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> * <span class=\"keyword\">as</span> t <span class=\"keyword\">from</span> <span class=\"string\">&quot;@umijs/bundler-utils/compiled/babel/types&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; extname &#125; <span class=\"keyword\">from</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_\">CSS_EXT_NAMES</span> = [<span class=\"string\">&quot;.css&quot;</span>, <span class=\"string\">&quot;.less&quot;</span>, <span class=\"string\">&quot;.sass&quot;</span>, <span class=\"string\">&quot;.scss&quot;</span>, <span class=\"string\">&quot;.stylus&quot;</span>, <span class=\"string\">&quot;.styl&quot;</span>];</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</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\">visitor</span>: &#123;</span><br><span class=\"line\">      <span class=\"title class_\">ImportDeclaration</span>(<span class=\"attr\">path</span>: <span class=\"title class_\">Babel</span>.<span class=\"property\">NodePath</span>&lt;t.<span class=\"property\">ImportDeclaration</span>&gt;) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">const</span> &#123;</span><br><span class=\"line\">          specifiers,</span><br><span class=\"line\">          source,</span><br><span class=\"line\">          <span class=\"attr\">source</span>: &#123; value &#125;,</span><br><span class=\"line\">        &#125; = path.<span class=\"property\">node</span>;</span><br><span class=\"line\">        <span class=\"keyword\">if</span> (specifiers.<span class=\"property\">length</span> &amp;&amp; <span class=\"variable constant_\">CSS_EXT_NAMES</span>.<span class=\"title function_\">includes</span>(<span class=\"title function_\">extname</span>(value))) &#123;</span><br><span class=\"line\">          source.<span class=\"property\">value</span> = <span class=\"string\">`<span class=\"subst\">$&#123;value&#125;</span>?modules`</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\">// more codes</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>\n\n<p>如上代码中，AST <code>specifiers</code> 里有内容，说明是<code>import xxx from module</code>的形式，而<code>source.value</code>就是 css 文件的路径，所以直接加上<code>?modules</code>后缀即可。</p>\n<h2 id=\"参考\"><a href=\"#参考\" class=\"headerlink\" title=\"参考\"></a>参考</h2><ul>\n<li><a href=\"https://github.com/css-modules/css-modules\">https://github.com/css-modules/css-modules</a></li>\n<li><a href=\"https://webpack.js.org/loaders/css-loader/#modules\">https://webpack.js.org/loaders/css-loader/#modules</a></li>\n<li><a href=\"https://www.npmjs.com/package/@umijs/babel-plugin-auto-css-modules\">https://www.npmjs.com/package/@umijs/babel-plugin-auto-css-modules</a></li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/21\">https://github.com/taoliujun/blog/issues/21</a></p>\n<!--hexo\n---\nurl: ast-in-css-module-auto-match\ntags:\n  - ast\n  - css module\n---\n-->\n\n<h1 id=\"AST-在-css-module-自动匹配中的应用\"><a href=\"#AST-在-css-module-自动匹配中的应用\" class=\"headerlink\" title=\"AST 在 css module 自动匹配中的应用\"></a>AST 在 css module 自动匹配中的应用</h1><p>我们已经非常明白为什么在项目中要使用 css modules，可直接说到“自动匹配”有点莫名其妙，所以有必要介绍下为什么提出这个问题。</p>\n<p>第一步，我想用官方的话来镇住大家。</p>\n<blockquote>\n<p><a href=\"https://github.com/css-modules/css-modules\">css modules</a>的官方描述：A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.</p>\n</blockquote>\n<p>官方只提供了一个规范的描述，本身并未提供工具去实现。但无需担心，常见的打包工具都支持了 css modules。比如 webpack 的<a href=\"https://webpack.js.org/loaders/css-loader/\">css-loader</a>。</p>\n<h2 id=\"css-loader\"><a href=\"#css-loader\" class=\"headerlink\" title=\"css-loader\"></a>css-loader</h2><p>css-loader 在很早就支持 modules，只需要配置<code>modules</code>属性，程序员们使用它的方式是各种各样的。有设置 local modules，在 css 文件中使用<code>:global</code>来支持全局样式的；有设置 global modules，在 css 文件中使用<code>:local</code>来支持局部样式的。这些都是可以的，但是都需要在 css 文件中做一些特殊的标记，这样就会导致 css 文件的可读性变差。</p>\n<p>后来人们学会了配置根据 css 文件名中是否包含<code>.modules.</code>或<code>.global.</code>字符串来启用&#x2F;禁用该文件的 modules 功能。于是项目里有大量的*.modules.css&#x2F;*.global.css 文件，而通过文件名去匹配某个功能的开关却恰恰是程序设计的忌讳。</p>\n<h2 id=\"符合直觉的自动识别\"><a href=\"#符合直觉的自动识别\" class=\"headerlink\" title=\"符合直觉的自动识别\"></a>符合直觉的自动识别</h2><p>我就在 *.modules.css 文件堆中浑浑噩噩的度过了好多年，直到近两年的某一天在<a href=\"https://umijs.org/\">UmiJS</a>脚手架中发现了这个奇特的细节。</p>\n<p><strong>使用<code>import xxx from &#39;./styles.css&#39;</code>启用 modules，使用<code>import &#39;./styles.css&#39;</code>启用 global。</strong></p>\n<p>这思路对我来说简直是惊为天人，无关乎它的技术细节。因为在直觉中，<code>import module</code>就是要直接执行它，而<code>import xxx from module</code>就是要使用它的某些东西。对于 css 是同样的，既要直接引入全局样式，又要使用局部样式。</p>\n<h2 id=\"技术细节\"><a href=\"#技术细节\" class=\"headerlink\" title=\"技术细节\"></a>技术细节</h2><p>webpack 的 module rules 支持使用<code>resourceQuery</code>去匹配模块文件名的 query 部分，所以为 css-loader 增加一个 rules 如下：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><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\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">test</span>: <span class=\"regexp\">/\\.css$/</span>,</span><br><span class=\"line\">  <span class=\"attr\">oneOf</span>: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">resourceQuery</span>: <span class=\"regexp\">/modules/</span>,</span><br><span class=\"line\">      <span class=\"attr\">use</span>: [</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;style-loader&#x27;</span> &#125;,</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;css-loader&#x27;</span>, <span class=\"attr\">options</span>: &#123; <span class=\"attr\">modules</span>: <span class=\"literal\">true</span> &#125; &#125;,</span><br><span class=\"line\">      ],</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">use</span>: [</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;style-loader&#x27;</span> &#125;,</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;css-loader&#x27;</span> &#125;,</span><br><span class=\"line\">      ],</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">  ],</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>如此，使用<code>import xxx from &#39;./styles.css?modules&#39;</code>就会命中第一个规则而启用 modules 功能了。</p>\n<p>但显然这样写太麻烦了，有什么办法让它在写<code>import xxx from &#39;./styles.css&#39;</code>时候，自动加上<code>?modules</code>而启用 css modules 呢？</p>\n<p>答案就是使用 AST。由于项目几乎都在使用 babel 去处理 js 文件，所以可以直接使用 babel 插件去分析 AST 从而给 css 文件加上<code>?modules</code>后缀即可。就直接看<a href=\"https://github.com/umijs/umi/blob/master/packages/babel-preset-umi/src/plugins/autoCSSModules.ts\">umijs 的插件代码</a>:</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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\">import</span> * <span class=\"keyword\">as</span> <span class=\"title class_\">Babel</span> <span class=\"keyword\">from</span> <span class=\"string\">&quot;@umijs/bundler-utils/compiled/babel/core&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> * <span class=\"keyword\">as</span> t <span class=\"keyword\">from</span> <span class=\"string\">&quot;@umijs/bundler-utils/compiled/babel/types&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; extname &#125; <span class=\"keyword\">from</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_\">CSS_EXT_NAMES</span> = [<span class=\"string\">&quot;.css&quot;</span>, <span class=\"string\">&quot;.less&quot;</span>, <span class=\"string\">&quot;.sass&quot;</span>, <span class=\"string\">&quot;.scss&quot;</span>, <span class=\"string\">&quot;.stylus&quot;</span>, <span class=\"string\">&quot;.styl&quot;</span>];</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</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\">visitor</span>: &#123;</span><br><span class=\"line\">      <span class=\"title class_\">ImportDeclaration</span>(<span class=\"attr\">path</span>: <span class=\"title class_\">Babel</span>.<span class=\"property\">NodePath</span>&lt;t.<span class=\"property\">ImportDeclaration</span>&gt;) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">const</span> &#123;</span><br><span class=\"line\">          specifiers,</span><br><span class=\"line\">          source,</span><br><span class=\"line\">          <span class=\"attr\">source</span>: &#123; value &#125;,</span><br><span class=\"line\">        &#125; = path.<span class=\"property\">node</span>;</span><br><span class=\"line\">        <span class=\"keyword\">if</span> (specifiers.<span class=\"property\">length</span> &amp;&amp; <span class=\"variable constant_\">CSS_EXT_NAMES</span>.<span class=\"title function_\">includes</span>(<span class=\"title function_\">extname</span>(value))) &#123;</span><br><span class=\"line\">          source.<span class=\"property\">value</span> = <span class=\"string\">`<span class=\"subst\">$&#123;value&#125;</span>?modules`</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\">// more codes</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>\n\n<p>如上代码中，AST <code>specifiers</code> 里有内容，说明是<code>import xxx from module</code>的形式，而<code>source.value</code>就是 css 文件的路径，所以直接加上<code>?modules</code>后缀即可。</p>\n<h2 id=\"参考\"><a href=\"#参考\" class=\"headerlink\" title=\"参考\"></a>参考</h2><ul>\n<li><a href=\"https://github.com/css-modules/css-modules\">https://github.com/css-modules/css-modules</a></li>\n<li><a href=\"https://webpack.js.org/loaders/css-loader/#modules\">https://webpack.js.org/loaders/css-loader/#modules</a></li>\n<li><a href=\"https://www.npmjs.com/package/@umijs/babel-plugin-auto-css-modules\">https://www.npmjs.com/package/@umijs/babel-plugin-auto-css-modules</a></li>\n</ul>\n"},{"title":"在monorepo中使用changesets","date":"2023-12-08T01:44:30.000Z","url":"changesets-in-monorepo","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/33](https://github.com/taoliujun/blog/issues/33)\n\n<!--hexo\n---\nurl: changesets-in-monorepo\ntags:\n  - changesets\n---\n-->\n\n`changesets`是目前(2023年)最流行的(多)包管理和发布工具了，使用它可以方便的生成CHANGELOG、打版本号和发布。\n\n项目链接：[changesets](https://github.com/changesets/changesets)\n\n我这有个[pnpm monorepo](https://github.com/taoliujun/npm-packages)库，现在在用`changesets`管理发布版本了。\n\n## 安装\n\n```shell\npnpm add -Dw @changesets/cli @changesets/changelog-git\n```\n\n`@changesets/cli`是必须安装的，`@changesets/changelog-git`是CHANGELOG生成风格，可以选择其他的，也可以不安装，用默认的。\n\n## 初始化\n\n```shell\npnpm changeset init\n```\n\n生成`.changeset`目录，里面有`config.json`，我修改了一下，如下：\n\n```json\n{\n  \"$schema\": \"https://unpkg.com/@changesets/config@3.0.0/schema.json\",\n  \"changelog\": \"@changesets/changelog-git\",\n  // 在changeset add和changeset version后，自动运行git commit\n  \"commit\": true,\n  // 如果要发布到npm官方仓库，就设置成public\n  \"access\": \"public\",\n  // 我的仓库的主分支是master\n  \"baseBranch\": \"master\",\n  \"fixed\": [],\n  \"linked\": [],\n  \"updateInternalDependencies\": \"patch\",\n  \"ignore\": []\n}\n```\n\n## 发布一个包\n\n现在，我要给包pack1添加一些新特性，和修复一些bug。\n\n特性代码有点长，我要写好几天的代码。仍然按照以往的commit message的频率和风格去提交代码。这个commit message里的type和subject，**都不会影响CHANGELOG和包版本号**。\n\n### 随时添加一个changeset\n\n当我完成一个特性，或修复了一个bug，可以随时打一个changeset标记，这样就可以记录下来，方便后面生成CHANGELOG。再次说明，这个changeset标记和commit message是互不冲突的，changeset标记是用来管理包版本的，而commit message是用来管理代码的。\n\n*这和之前使用lerna有点区别，lerna是根据commit message来决定版本号和CHANGLOG的，而`changesets`是根据`changeset add`和`changeset version`来决定的。*\n\n`changeset`这么做的目的是，让开发者将包管理和代码管理分开，这样更加灵活。\n\n```base\n// 添加一个changeset标记\npnpm changeset add\n```\n\n会出现交互，让你选择要打标记的包，版本号等。\n\n#### 选版本遇到一个坑，总是显示`major`？？？\n\n`changeset`老版本会让你上下选择版本类型，而新的`changeset`的交互改了，在提示`major`的时候，未选择的包，按回车后会进入到选择`minor`的步骤。\n\n### 生成CHANGELOG和版本号\n\n终于，我完成了所有的特性和bug，准备发布了。\n\n可以查看`.changeset`下有很多`.md`文件，这些就是之前随时添加的changeset标记。每一个文件描述了改动的包、改动的类型、改动的内容。在下一步操作之前，可以直接修改这些`.md`文件，来修改上述提到的类型、内容等。\n\n准备好了，运行\n\n```shell\npnpm changeset version\n```\n\nchangeset会生成CHANGELOG和版本号，在最终发布之前，最好查看一下。\n\n### 发布\n\n```\npnpm changeset publish\n```\n\n它会自动调用`pnpm publish`，发布到npm仓库，并且打上tag。不过可惜的是，要手动push tag到远程：`git push --tags`。\n\n\n\n","source":"_posts/changesets-in-monorepo.md","raw":"---\ntitle: \"在monorepo中使用changesets\"\ndate: \"2023-12-08T09:44:30Z\"\ncategories:\n  - [工程化]\n\nurl: changesets-in-monorepo\ntags:\n  - changesets\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/33](https://github.com/taoliujun/blog/issues/33)\n\n<!--hexo\n---\nurl: changesets-in-monorepo\ntags:\n  - changesets\n---\n-->\n\n`changesets`是目前(2023年)最流行的(多)包管理和发布工具了，使用它可以方便的生成CHANGELOG、打版本号和发布。\n\n项目链接：[changesets](https://github.com/changesets/changesets)\n\n我这有个[pnpm monorepo](https://github.com/taoliujun/npm-packages)库，现在在用`changesets`管理发布版本了。\n\n## 安装\n\n```shell\npnpm add -Dw @changesets/cli @changesets/changelog-git\n```\n\n`@changesets/cli`是必须安装的，`@changesets/changelog-git`是CHANGELOG生成风格，可以选择其他的，也可以不安装，用默认的。\n\n## 初始化\n\n```shell\npnpm changeset init\n```\n\n生成`.changeset`目录，里面有`config.json`，我修改了一下，如下：\n\n```json\n{\n  \"$schema\": \"https://unpkg.com/@changesets/config@3.0.0/schema.json\",\n  \"changelog\": \"@changesets/changelog-git\",\n  // 在changeset add和changeset version后，自动运行git commit\n  \"commit\": true,\n  // 如果要发布到npm官方仓库，就设置成public\n  \"access\": \"public\",\n  // 我的仓库的主分支是master\n  \"baseBranch\": \"master\",\n  \"fixed\": [],\n  \"linked\": [],\n  \"updateInternalDependencies\": \"patch\",\n  \"ignore\": []\n}\n```\n\n## 发布一个包\n\n现在，我要给包pack1添加一些新特性，和修复一些bug。\n\n特性代码有点长，我要写好几天的代码。仍然按照以往的commit message的频率和风格去提交代码。这个commit message里的type和subject，**都不会影响CHANGELOG和包版本号**。\n\n### 随时添加一个changeset\n\n当我完成一个特性，或修复了一个bug，可以随时打一个changeset标记，这样就可以记录下来，方便后面生成CHANGELOG。再次说明，这个changeset标记和commit message是互不冲突的，changeset标记是用来管理包版本的，而commit message是用来管理代码的。\n\n*这和之前使用lerna有点区别，lerna是根据commit message来决定版本号和CHANGLOG的，而`changesets`是根据`changeset add`和`changeset version`来决定的。*\n\n`changeset`这么做的目的是，让开发者将包管理和代码管理分开，这样更加灵活。\n\n```base\n// 添加一个changeset标记\npnpm changeset add\n```\n\n会出现交互，让你选择要打标记的包，版本号等。\n\n#### 选版本遇到一个坑，总是显示`major`？？？\n\n`changeset`老版本会让你上下选择版本类型，而新的`changeset`的交互改了，在提示`major`的时候，未选择的包，按回车后会进入到选择`minor`的步骤。\n\n### 生成CHANGELOG和版本号\n\n终于，我完成了所有的特性和bug，准备发布了。\n\n可以查看`.changeset`下有很多`.md`文件，这些就是之前随时添加的changeset标记。每一个文件描述了改动的包、改动的类型、改动的内容。在下一步操作之前，可以直接修改这些`.md`文件，来修改上述提到的类型、内容等。\n\n准备好了，运行\n\n```shell\npnpm changeset version\n```\n\nchangeset会生成CHANGELOG和版本号，在最终发布之前，最好查看一下。\n\n### 发布\n\n```\npnpm changeset publish\n```\n\n它会自动调用`pnpm publish`，发布到npm仓库，并且打上tag。不过可惜的是，要手动push tag到远程：`git push --tags`。\n\n\n\n","slug":"changesets-in-monorepo","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvxp0001jaot16w7army","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/33\">https://github.com/taoliujun/blog/issues/33</a></p>\n<!--hexo\n---\nurl: changesets-in-monorepo\ntags:\n  - changesets\n---\n-->\n\n<p><code>changesets</code>是目前(2023年)最流行的(多)包管理和发布工具了，使用它可以方便的生成CHANGELOG、打版本号和发布。</p>\n<p>项目链接：<a href=\"https://github.com/changesets/changesets\">changesets</a></p>\n<p>我这有个<a href=\"https://github.com/taoliujun/npm-packages\">pnpm monorepo</a>库，现在在用<code>changesets</code>管理发布版本了。</p>\n<h2 id=\"安装\"><a href=\"#安装\" class=\"headerlink\" title=\"安装\"></a>安装</h2><figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm add -Dw @changesets/cli @changesets/changelog-git</span><br></pre></td></tr></table></figure>\n\n<p><code>@changesets/cli</code>是必须安装的，<code>@changesets/changelog-git</code>是CHANGELOG生成风格，可以选择其他的，也可以不安装，用默认的。</p>\n<h2 id=\"初始化\"><a href=\"#初始化\" class=\"headerlink\" title=\"初始化\"></a>初始化</h2><figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm changeset init</span><br></pre></td></tr></table></figure>\n\n<p>生成<code>.changeset</code>目录，里面有<code>config.json</code>，我修改了一下，如下：</p>\n<figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;$schema&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;https://unpkg.com/@changesets/config@3.0.0/schema.json&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;changelog&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;@changesets/changelog-git&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"comment\">// 在changeset add和changeset version后，自动运行git commit</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;commit&quot;</span><span class=\"punctuation\">:</span> <span class=\"literal\"><span class=\"keyword\">true</span></span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"comment\">// 如果要发布到npm官方仓库，就设置成public</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;access&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;public&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"comment\">// 我的仓库的主分支是master</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;baseBranch&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;master&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;fixed&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"punctuation\">]</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;linked&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"punctuation\">]</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;updateInternalDependencies&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;patch&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;ignore&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"punctuation\">]</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"发布一个包\"><a href=\"#发布一个包\" class=\"headerlink\" title=\"发布一个包\"></a>发布一个包</h2><p>现在，我要给包pack1添加一些新特性，和修复一些bug。</p>\n<p>特性代码有点长，我要写好几天的代码。仍然按照以往的commit message的频率和风格去提交代码。这个commit message里的type和subject，<strong>都不会影响CHANGELOG和包版本号</strong>。</p>\n<h3 id=\"随时添加一个changeset\"><a href=\"#随时添加一个changeset\" class=\"headerlink\" title=\"随时添加一个changeset\"></a>随时添加一个changeset</h3><p>当我完成一个特性，或修复了一个bug，可以随时打一个changeset标记，这样就可以记录下来，方便后面生成CHANGELOG。再次说明，这个changeset标记和commit message是互不冲突的，changeset标记是用来管理包版本的，而commit message是用来管理代码的。</p>\n<p><em>这和之前使用lerna有点区别，lerna是根据commit message来决定版本号和CHANGLOG的，而<code>changesets</code>是根据<code>changeset add</code>和<code>changeset version</code>来决定的。</em></p>\n<p><code>changeset</code>这么做的目的是，让开发者将包管理和代码管理分开，这样更加灵活。</p>\n<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\">// 添加一个changeset标记</span><br><span class=\"line\">pnpm changeset add</span><br></pre></td></tr></table></figure>\n\n<p>会出现交互，让你选择要打标记的包，版本号等。</p>\n<h4 id=\"选版本遇到一个坑，总是显示major？？？\"><a href=\"#选版本遇到一个坑，总是显示major？？？\" class=\"headerlink\" title=\"选版本遇到一个坑，总是显示major？？？\"></a>选版本遇到一个坑，总是显示<code>major</code>？？？</h4><p><code>changeset</code>老版本会让你上下选择版本类型，而新的<code>changeset</code>的交互改了，在提示<code>major</code>的时候，未选择的包，按回车后会进入到选择<code>minor</code>的步骤。</p>\n<h3 id=\"生成CHANGELOG和版本号\"><a href=\"#生成CHANGELOG和版本号\" class=\"headerlink\" title=\"生成CHANGELOG和版本号\"></a>生成CHANGELOG和版本号</h3><p>终于，我完成了所有的特性和bug，准备发布了。</p>\n<p>可以查看<code>.changeset</code>下有很多<code>.md</code>文件，这些就是之前随时添加的changeset标记。每一个文件描述了改动的包、改动的类型、改动的内容。在下一步操作之前，可以直接修改这些<code>.md</code>文件，来修改上述提到的类型、内容等。</p>\n<p>准备好了，运行</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm changeset version</span><br></pre></td></tr></table></figure>\n\n<p>changeset会生成CHANGELOG和版本号，在最终发布之前，最好查看一下。</p>\n<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></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm changeset publish</span><br></pre></td></tr></table></figure>\n\n<p>它会自动调用<code>pnpm publish</code>，发布到npm仓库，并且打上tag。不过可惜的是，要手动push tag到远程：<code>git push --tags</code>。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/33\">https://github.com/taoliujun/blog/issues/33</a></p>\n<!--hexo\n---\nurl: changesets-in-monorepo\ntags:\n  - changesets\n---\n-->\n\n<p><code>changesets</code>是目前(2023年)最流行的(多)包管理和发布工具了，使用它可以方便的生成CHANGELOG、打版本号和发布。</p>\n<p>项目链接：<a href=\"https://github.com/changesets/changesets\">changesets</a></p>\n<p>我这有个<a href=\"https://github.com/taoliujun/npm-packages\">pnpm monorepo</a>库，现在在用<code>changesets</code>管理发布版本了。</p>\n<h2 id=\"安装\"><a href=\"#安装\" class=\"headerlink\" title=\"安装\"></a>安装</h2><figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm add -Dw @changesets/cli @changesets/changelog-git</span><br></pre></td></tr></table></figure>\n\n<p><code>@changesets/cli</code>是必须安装的，<code>@changesets/changelog-git</code>是CHANGELOG生成风格，可以选择其他的，也可以不安装，用默认的。</p>\n<h2 id=\"初始化\"><a href=\"#初始化\" class=\"headerlink\" title=\"初始化\"></a>初始化</h2><figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm changeset init</span><br></pre></td></tr></table></figure>\n\n<p>生成<code>.changeset</code>目录，里面有<code>config.json</code>，我修改了一下，如下：</p>\n<figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;$schema&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;https://unpkg.com/@changesets/config@3.0.0/schema.json&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;changelog&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;@changesets/changelog-git&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"comment\">// 在changeset add和changeset version后，自动运行git commit</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;commit&quot;</span><span class=\"punctuation\">:</span> <span class=\"literal\"><span class=\"keyword\">true</span></span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"comment\">// 如果要发布到npm官方仓库，就设置成public</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;access&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;public&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"comment\">// 我的仓库的主分支是master</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;baseBranch&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;master&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;fixed&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"punctuation\">]</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;linked&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"punctuation\">]</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;updateInternalDependencies&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;patch&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;ignore&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"punctuation\">]</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"发布一个包\"><a href=\"#发布一个包\" class=\"headerlink\" title=\"发布一个包\"></a>发布一个包</h2><p>现在，我要给包pack1添加一些新特性，和修复一些bug。</p>\n<p>特性代码有点长，我要写好几天的代码。仍然按照以往的commit message的频率和风格去提交代码。这个commit message里的type和subject，<strong>都不会影响CHANGELOG和包版本号</strong>。</p>\n<h3 id=\"随时添加一个changeset\"><a href=\"#随时添加一个changeset\" class=\"headerlink\" title=\"随时添加一个changeset\"></a>随时添加一个changeset</h3><p>当我完成一个特性，或修复了一个bug，可以随时打一个changeset标记，这样就可以记录下来，方便后面生成CHANGELOG。再次说明，这个changeset标记和commit message是互不冲突的，changeset标记是用来管理包版本的，而commit message是用来管理代码的。</p>\n<p><em>这和之前使用lerna有点区别，lerna是根据commit message来决定版本号和CHANGLOG的，而<code>changesets</code>是根据<code>changeset add</code>和<code>changeset version</code>来决定的。</em></p>\n<p><code>changeset</code>这么做的目的是，让开发者将包管理和代码管理分开，这样更加灵活。</p>\n<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\">// 添加一个changeset标记</span><br><span class=\"line\">pnpm changeset add</span><br></pre></td></tr></table></figure>\n\n<p>会出现交互，让你选择要打标记的包，版本号等。</p>\n<h4 id=\"选版本遇到一个坑，总是显示major？？？\"><a href=\"#选版本遇到一个坑，总是显示major？？？\" class=\"headerlink\" title=\"选版本遇到一个坑，总是显示major？？？\"></a>选版本遇到一个坑，总是显示<code>major</code>？？？</h4><p><code>changeset</code>老版本会让你上下选择版本类型，而新的<code>changeset</code>的交互改了，在提示<code>major</code>的时候，未选择的包，按回车后会进入到选择<code>minor</code>的步骤。</p>\n<h3 id=\"生成CHANGELOG和版本号\"><a href=\"#生成CHANGELOG和版本号\" class=\"headerlink\" title=\"生成CHANGELOG和版本号\"></a>生成CHANGELOG和版本号</h3><p>终于，我完成了所有的特性和bug，准备发布了。</p>\n<p>可以查看<code>.changeset</code>下有很多<code>.md</code>文件，这些就是之前随时添加的changeset标记。每一个文件描述了改动的包、改动的类型、改动的内容。在下一步操作之前，可以直接修改这些<code>.md</code>文件，来修改上述提到的类型、内容等。</p>\n<p>准备好了，运行</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm changeset version</span><br></pre></td></tr></table></figure>\n\n<p>changeset会生成CHANGELOG和版本号，在最终发布之前，最好查看一下。</p>\n<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></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm changeset publish</span><br></pre></td></tr></table></figure>\n\n<p>它会自动调用<code>pnpm publish</code>，发布到npm仓库，并且打上tag。不过可惜的是，要手动push tag到远程：<code>git push --tags</code>。</p>\n"},{"title":"整理ES6：解构赋值","date":"2023-07-05T22:36:43.000Z","url":"es6-destructuring","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/17](https://github.com/taoliujun/blog/issues/17)\n\n<!--hexo\n---\nurl: es6-destructuring\ntags:\n  - es6\n  - javascript\n---\n-->\n\n工作中经常会使用变量的解构赋值，随便举几个例子。\n\n## 数组解构\n\n```typescript\nconst fruits = [\"apple\", \"pear\", \"orange\", \"banana\", \"peach\"];\nconst [fruit1, , fruit3, ...otherFruits] = fruits;\n\nconsole.log({\n  fruit1,\n  fruit3,\n  otherFruits,\n});\n```\n\n```shell\n> node 1.ts\n{\n  fruit1: 'apple',\n  fruit3: 'orange',\n  otherFruits: [ 'banana', 'peach' ]\n}\n```\n\n在执行结果中可以看到，`fruit1`是apple，其后是一个空位，所以`fruit3`是orange，`otherFruits`前面有扩展运算符，所以它读取了剩下的所有索引值。\n\n## 对象解构\n\n对象解构里记录一个概念，就是模式与变量，见下面一个嵌套结构的例子：\n\n```typescript\nconst user = {\n  base: {\n    truename: \"张三\",\n    sex: \"女\",\n  },\n  card: \"320xxx\",\n};\n\nconst {\n  base,\n  base: { truename },\n  card,\n} = user;\n\nconsole.log(\"base:\", base);\nconsole.log(\"truename:\", truename);\nconsole.log(\"card:\", card);\n```\n\n```shell\nbase: { truename: '张三', sex: '女' }\ntruename: 张三\ncard: 320xxx\n```\n\n在如上的对象解构中，第一个`base`是变量，第二个`base`是模式，它的值是`user`对象中的`base`属性，`truename`是变量，`card`也是变量。\n\n## 字符串、数组、布尔值解构\n\n因为解构的规则是将变量转为对象（数组也是对象），字符串、数字、布尔都可以转成对象。\n\n**所以字符串可以像数组**那样解构。\n\n```typescript\nconst word = \"abcdefg\";\n\nconst [, x] = word;\nconst { 3: y } = word;\n\nconsole.log({ x, y });\n```\n\n```shell\n{ x: 'b', y: 'd' }\n```\n\n## 小技巧\n\n**数组也是对象**，所以读取指定索引的值，可以这样写：\n\n```typescript\nconst fruits = [\"apple\", \"pear\", \"orange\", \"banana\", \"peach\"];\nconst { 3: fruit1 } = fruits;\n\nconsole.log(fruit1);\n```\n\n```shell\nbanana\n```\n\n\n\n","source":"_posts/es6-destructuring.md","raw":"---\ntitle: \"整理ES6：解构赋值\"\ndate: \"2023-07-06T06:36:43Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-destructuring\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/17](https://github.com/taoliujun/blog/issues/17)\n\n<!--hexo\n---\nurl: es6-destructuring\ntags:\n  - es6\n  - javascript\n---\n-->\n\n工作中经常会使用变量的解构赋值，随便举几个例子。\n\n## 数组解构\n\n```typescript\nconst fruits = [\"apple\", \"pear\", \"orange\", \"banana\", \"peach\"];\nconst [fruit1, , fruit3, ...otherFruits] = fruits;\n\nconsole.log({\n  fruit1,\n  fruit3,\n  otherFruits,\n});\n```\n\n```shell\n> node 1.ts\n{\n  fruit1: 'apple',\n  fruit3: 'orange',\n  otherFruits: [ 'banana', 'peach' ]\n}\n```\n\n在执行结果中可以看到，`fruit1`是apple，其后是一个空位，所以`fruit3`是orange，`otherFruits`前面有扩展运算符，所以它读取了剩下的所有索引值。\n\n## 对象解构\n\n对象解构里记录一个概念，就是模式与变量，见下面一个嵌套结构的例子：\n\n```typescript\nconst user = {\n  base: {\n    truename: \"张三\",\n    sex: \"女\",\n  },\n  card: \"320xxx\",\n};\n\nconst {\n  base,\n  base: { truename },\n  card,\n} = user;\n\nconsole.log(\"base:\", base);\nconsole.log(\"truename:\", truename);\nconsole.log(\"card:\", card);\n```\n\n```shell\nbase: { truename: '张三', sex: '女' }\ntruename: 张三\ncard: 320xxx\n```\n\n在如上的对象解构中，第一个`base`是变量，第二个`base`是模式，它的值是`user`对象中的`base`属性，`truename`是变量，`card`也是变量。\n\n## 字符串、数组、布尔值解构\n\n因为解构的规则是将变量转为对象（数组也是对象），字符串、数字、布尔都可以转成对象。\n\n**所以字符串可以像数组**那样解构。\n\n```typescript\nconst word = \"abcdefg\";\n\nconst [, x] = word;\nconst { 3: y } = word;\n\nconsole.log({ x, y });\n```\n\n```shell\n{ x: 'b', y: 'd' }\n```\n\n## 小技巧\n\n**数组也是对象**，所以读取指定索引的值，可以这样写：\n\n```typescript\nconst fruits = [\"apple\", \"pear\", \"orange\", \"banana\", \"peach\"];\nconst { 3: fruit1 } = fruits;\n\nconsole.log(fruit1);\n```\n\n```shell\nbanana\n```\n\n\n\n","slug":"es6-destructuring","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvxs0003jaot2s4a2okt","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/17\">https://github.com/taoliujun/blog/issues/17</a></p>\n<!--hexo\n---\nurl: es6-destructuring\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>工作中经常会使用变量的解构赋值，随便举几个例子。</p>\n<h2 id=\"数组解构\"><a href=\"#数组解构\" class=\"headerlink\" title=\"数组解构\"></a>数组解构</h2><figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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> fruits = [<span class=\"string\">&quot;apple&quot;</span>, <span class=\"string\">&quot;pear&quot;</span>, <span class=\"string\">&quot;orange&quot;</span>, <span class=\"string\">&quot;banana&quot;</span>, <span class=\"string\">&quot;peach&quot;</span>];</span><br><span class=\"line\"><span class=\"keyword\">const</span> [fruit1, , fruit3, ...otherFruits] = fruits;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(&#123;</span><br><span class=\"line\">  fruit1,</span><br><span class=\"line\">  fruit3,</span><br><span class=\"line\">  otherFruits,</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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=\"meta prompt_\">&gt; </span><span class=\"language-bash\">node 1.ts</span></span><br><span class=\"line\">&#123;</span><br><span class=\"line\">  fruit1: &#x27;apple&#x27;,</span><br><span class=\"line\">  fruit3: &#x27;orange&#x27;,</span><br><span class=\"line\">  otherFruits: [ &#x27;banana&#x27;, &#x27;peach&#x27; ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>在执行结果中可以看到，<code>fruit1</code>是apple，其后是一个空位，所以<code>fruit3</code>是orange，<code>otherFruits</code>前面有扩展运算符，所以它读取了剩下的所有索引值。</p>\n<h2 id=\"对象解构\"><a href=\"#对象解构\" class=\"headerlink\" title=\"对象解构\"></a>对象解构</h2><p>对象解构里记录一个概念，就是模式与变量，见下面一个嵌套结构的例子：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><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> user = &#123;</span><br><span class=\"line\">  <span class=\"attr\">base</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">truename</span>: <span class=\"string\">&quot;张三&quot;</span>,</span><br><span class=\"line\">    <span class=\"attr\">sex</span>: <span class=\"string\">&quot;女&quot;</span>,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  <span class=\"attr\">card</span>: <span class=\"string\">&quot;320xxx&quot;</span>,</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> &#123;</span><br><span class=\"line\">  base,</span><br><span class=\"line\">  <span class=\"attr\">base</span>: &#123; truename &#125;,</span><br><span class=\"line\">  card,</span><br><span class=\"line\">&#125; = user;</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;base:&quot;</span>, base);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;truename:&quot;</span>, truename);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;card:&quot;</span>, card);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><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\">base: &#123; truename: &#x27;张三&#x27;, sex: &#x27;女&#x27; &#125;</span><br><span class=\"line\">truename: 张三</span><br><span class=\"line\">card: 320xxx</span><br></pre></td></tr></table></figure>\n\n<p>在如上的对象解构中，第一个<code>base</code>是变量，第二个<code>base</code>是模式，它的值是<code>user</code>对象中的<code>base</code>属性，<code>truename</code>是变量，<code>card</code>也是变量。</p>\n<h2 id=\"字符串、数组、布尔值解构\"><a href=\"#字符串、数组、布尔值解构\" class=\"headerlink\" title=\"字符串、数组、布尔值解构\"></a>字符串、数组、布尔值解构</h2><p>因为解构的规则是将变量转为对象（数组也是对象），字符串、数字、布尔都可以转成对象。</p>\n<p><strong>所以字符串可以像数组</strong>那样解构。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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> word = <span class=\"string\">&quot;abcdefg&quot;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> [, x] = word;</span><br><span class=\"line\"><span class=\"keyword\">const</span> &#123; <span class=\"number\">3</span>: y &#125; = word;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(&#123; x, y &#125;);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">&#123; x: &#x27;b&#x27;, y: &#x27;d&#x27; &#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"小技巧\"><a href=\"#小技巧\" class=\"headerlink\" title=\"小技巧\"></a>小技巧</h2><p><strong>数组也是对象</strong>，所以读取指定索引的值，可以这样写：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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> fruits = [<span class=\"string\">&quot;apple&quot;</span>, <span class=\"string\">&quot;pear&quot;</span>, <span class=\"string\">&quot;orange&quot;</span>, <span class=\"string\">&quot;banana&quot;</span>, <span class=\"string\">&quot;peach&quot;</span>];</span><br><span class=\"line\"><span class=\"keyword\">const</span> &#123; <span class=\"number\">3</span>: fruit1 &#125; = fruits;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(fruit1);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">banana</span><br></pre></td></tr></table></figure>\n\n\n\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/17\">https://github.com/taoliujun/blog/issues/17</a></p>\n<!--hexo\n---\nurl: es6-destructuring\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>工作中经常会使用变量的解构赋值，随便举几个例子。</p>\n<h2 id=\"数组解构\"><a href=\"#数组解构\" class=\"headerlink\" title=\"数组解构\"></a>数组解构</h2><figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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> fruits = [<span class=\"string\">&quot;apple&quot;</span>, <span class=\"string\">&quot;pear&quot;</span>, <span class=\"string\">&quot;orange&quot;</span>, <span class=\"string\">&quot;banana&quot;</span>, <span class=\"string\">&quot;peach&quot;</span>];</span><br><span class=\"line\"><span class=\"keyword\">const</span> [fruit1, , fruit3, ...otherFruits] = fruits;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(&#123;</span><br><span class=\"line\">  fruit1,</span><br><span class=\"line\">  fruit3,</span><br><span class=\"line\">  otherFruits,</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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=\"meta prompt_\">&gt; </span><span class=\"language-bash\">node 1.ts</span></span><br><span class=\"line\">&#123;</span><br><span class=\"line\">  fruit1: &#x27;apple&#x27;,</span><br><span class=\"line\">  fruit3: &#x27;orange&#x27;,</span><br><span class=\"line\">  otherFruits: [ &#x27;banana&#x27;, &#x27;peach&#x27; ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>在执行结果中可以看到，<code>fruit1</code>是apple，其后是一个空位，所以<code>fruit3</code>是orange，<code>otherFruits</code>前面有扩展运算符，所以它读取了剩下的所有索引值。</p>\n<h2 id=\"对象解构\"><a href=\"#对象解构\" class=\"headerlink\" title=\"对象解构\"></a>对象解构</h2><p>对象解构里记录一个概念，就是模式与变量，见下面一个嵌套结构的例子：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><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> user = &#123;</span><br><span class=\"line\">  <span class=\"attr\">base</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">truename</span>: <span class=\"string\">&quot;张三&quot;</span>,</span><br><span class=\"line\">    <span class=\"attr\">sex</span>: <span class=\"string\">&quot;女&quot;</span>,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  <span class=\"attr\">card</span>: <span class=\"string\">&quot;320xxx&quot;</span>,</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> &#123;</span><br><span class=\"line\">  base,</span><br><span class=\"line\">  <span class=\"attr\">base</span>: &#123; truename &#125;,</span><br><span class=\"line\">  card,</span><br><span class=\"line\">&#125; = user;</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;base:&quot;</span>, base);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;truename:&quot;</span>, truename);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;card:&quot;</span>, card);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><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\">base: &#123; truename: &#x27;张三&#x27;, sex: &#x27;女&#x27; &#125;</span><br><span class=\"line\">truename: 张三</span><br><span class=\"line\">card: 320xxx</span><br></pre></td></tr></table></figure>\n\n<p>在如上的对象解构中，第一个<code>base</code>是变量，第二个<code>base</code>是模式，它的值是<code>user</code>对象中的<code>base</code>属性，<code>truename</code>是变量，<code>card</code>也是变量。</p>\n<h2 id=\"字符串、数组、布尔值解构\"><a href=\"#字符串、数组、布尔值解构\" class=\"headerlink\" title=\"字符串、数组、布尔值解构\"></a>字符串、数组、布尔值解构</h2><p>因为解构的规则是将变量转为对象（数组也是对象），字符串、数字、布尔都可以转成对象。</p>\n<p><strong>所以字符串可以像数组</strong>那样解构。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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> word = <span class=\"string\">&quot;abcdefg&quot;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> [, x] = word;</span><br><span class=\"line\"><span class=\"keyword\">const</span> &#123; <span class=\"number\">3</span>: y &#125; = word;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(&#123; x, y &#125;);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">&#123; x: &#x27;b&#x27;, y: &#x27;d&#x27; &#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"小技巧\"><a href=\"#小技巧\" class=\"headerlink\" title=\"小技巧\"></a>小技巧</h2><p><strong>数组也是对象</strong>，所以读取指定索引的值，可以这样写：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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> fruits = [<span class=\"string\">&quot;apple&quot;</span>, <span class=\"string\">&quot;pear&quot;</span>, <span class=\"string\">&quot;orange&quot;</span>, <span class=\"string\">&quot;banana&quot;</span>, <span class=\"string\">&quot;peach&quot;</span>];</span><br><span class=\"line\"><span class=\"keyword\">const</span> &#123; <span class=\"number\">3</span>: fruit1 &#125; = fruits;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(fruit1);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">banana</span><br></pre></td></tr></table></figure>\n\n\n\n"},{"title":"整理ES6：Map真的挺好的","date":"2023-07-05T22:34:11.000Z","url":"es6-map","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/13](https://github.com/taoliujun/blog/issues/13)\n\n<!--hexo\n---\nurl: es6-map\ntags:\n  - es6\n  - javascript\n---\n-->\n\n在以前，想要维护一个集合去处理dom和其附加信息的关系，使用Array方式如下：\n\n```ts\nconst list = [\n  {\n    dom: dom1,\n    info: { area: 123 },\n  },\n  {\n    dom: dom2,\n    info: { area: 123 },\n  },\n];\n```\n\n如上代码有个很难受的问题，就是读取某个dom的时候需要遍历，而且每次都需要遍历，如果数据量大的话，性能会很差。\n\n那么改成Object方式：\n\n```ts\nconst list = {\n  key1: {\n    dom: dom1,\n    info: { area: 123 },\n  },\n  key2: {\n    dom: dom1,\n    info: { area: 123 },\n  },\n};\n```\n\n这种方式虽然可以快速读取，但是如何处理key和dom的关系又是一个麻烦；并且如果需要遍历的话，就需要先转成Array，然后再遍历，这样也很麻烦。\n\n## Map的基础用法\n\n但是使用Map可以方便的解决上面的问题：\n\n```ts\nconst list = new Map([\n  [dom1, { area: 123 }],\n  [dom2, { area: 123 }],\n]);\n```\n\n这样就可以快速的读取dom对应的信息，也可以快速的遍历。\n\n## 注意点\n\n* Map的键是内存引用，所以两个相同值的对象实例，它们是两个键。\n* Map采取了和Set一样的比较算法，所以虽然NaN不严格相等于自身，但 Map 将其视为同一个键。\n\n\n\n","source":"_posts/es6-map.md","raw":"---\ntitle: \"整理ES6：Map真的挺好的\"\ndate: \"2023-07-06T06:34:11Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-map\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/13](https://github.com/taoliujun/blog/issues/13)\n\n<!--hexo\n---\nurl: es6-map\ntags:\n  - es6\n  - javascript\n---\n-->\n\n在以前，想要维护一个集合去处理dom和其附加信息的关系，使用Array方式如下：\n\n```ts\nconst list = [\n  {\n    dom: dom1,\n    info: { area: 123 },\n  },\n  {\n    dom: dom2,\n    info: { area: 123 },\n  },\n];\n```\n\n如上代码有个很难受的问题，就是读取某个dom的时候需要遍历，而且每次都需要遍历，如果数据量大的话，性能会很差。\n\n那么改成Object方式：\n\n```ts\nconst list = {\n  key1: {\n    dom: dom1,\n    info: { area: 123 },\n  },\n  key2: {\n    dom: dom1,\n    info: { area: 123 },\n  },\n};\n```\n\n这种方式虽然可以快速读取，但是如何处理key和dom的关系又是一个麻烦；并且如果需要遍历的话，就需要先转成Array，然后再遍历，这样也很麻烦。\n\n## Map的基础用法\n\n但是使用Map可以方便的解决上面的问题：\n\n```ts\nconst list = new Map([\n  [dom1, { area: 123 }],\n  [dom2, { area: 123 }],\n]);\n```\n\n这样就可以快速的读取dom对应的信息，也可以快速的遍历。\n\n## 注意点\n\n* Map的键是内存引用，所以两个相同值的对象实例，它们是两个键。\n* Map采取了和Set一样的比较算法，所以虽然NaN不严格相等于自身，但 Map 将其视为同一个键。\n\n\n\n","slug":"es6-map","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvxt0005jaotgxzi6inn","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/13\">https://github.com/taoliujun/blog/issues/13</a></p>\n<!--hexo\n---\nurl: es6-map\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>在以前，想要维护一个集合去处理dom和其附加信息的关系，使用Array方式如下：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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> list = [</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom1,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom2,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">];</span><br></pre></td></tr></table></figure>\n\n<p>如上代码有个很难受的问题，就是读取某个dom的时候需要遍历，而且每次都需要遍历，如果数据量大的话，性能会很差。</p>\n<p>那么改成Object方式：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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> list = &#123;</span><br><span class=\"line\">  <span class=\"attr\">key1</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom1,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  <span class=\"attr\">key2</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom1,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>这种方式虽然可以快速读取，但是如何处理key和dom的关系又是一个麻烦；并且如果需要遍历的话，就需要先转成Array，然后再遍历，这样也很麻烦。</p>\n<h2 id=\"Map的基础用法\"><a href=\"#Map的基础用法\" class=\"headerlink\" title=\"Map的基础用法\"></a>Map的基础用法</h2><p>但是使用Map可以方便的解决上面的问题：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><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> list = <span class=\"keyword\">new</span> <span class=\"title class_\">Map</span>([</span><br><span class=\"line\">  [dom1, &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;],</span><br><span class=\"line\">  [dom2, &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;],</span><br><span class=\"line\">]);</span><br></pre></td></tr></table></figure>\n\n<p>这样就可以快速的读取dom对应的信息，也可以快速的遍历。</p>\n<h2 id=\"注意点\"><a href=\"#注意点\" class=\"headerlink\" title=\"注意点\"></a>注意点</h2><ul>\n<li>Map的键是内存引用，所以两个相同值的对象实例，它们是两个键。</li>\n<li>Map采取了和Set一样的比较算法，所以虽然NaN不严格相等于自身，但 Map 将其视为同一个键。</li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/13\">https://github.com/taoliujun/blog/issues/13</a></p>\n<!--hexo\n---\nurl: es6-map\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>在以前，想要维护一个集合去处理dom和其附加信息的关系，使用Array方式如下：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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> list = [</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom1,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom2,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">];</span><br></pre></td></tr></table></figure>\n\n<p>如上代码有个很难受的问题，就是读取某个dom的时候需要遍历，而且每次都需要遍历，如果数据量大的话，性能会很差。</p>\n<p>那么改成Object方式：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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> list = &#123;</span><br><span class=\"line\">  <span class=\"attr\">key1</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom1,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  <span class=\"attr\">key2</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom1,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>这种方式虽然可以快速读取，但是如何处理key和dom的关系又是一个麻烦；并且如果需要遍历的话，就需要先转成Array，然后再遍历，这样也很麻烦。</p>\n<h2 id=\"Map的基础用法\"><a href=\"#Map的基础用法\" class=\"headerlink\" title=\"Map的基础用法\"></a>Map的基础用法</h2><p>但是使用Map可以方便的解决上面的问题：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><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> list = <span class=\"keyword\">new</span> <span class=\"title class_\">Map</span>([</span><br><span class=\"line\">  [dom1, &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;],</span><br><span class=\"line\">  [dom2, &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;],</span><br><span class=\"line\">]);</span><br></pre></td></tr></table></figure>\n\n<p>这样就可以快速的读取dom对应的信息，也可以快速的遍历。</p>\n<h2 id=\"注意点\"><a href=\"#注意点\" class=\"headerlink\" title=\"注意点\"></a>注意点</h2><ul>\n<li>Map的键是内存引用，所以两个相同值的对象实例，它们是两个键。</li>\n<li>Map采取了和Set一样的比较算法，所以虽然NaN不严格相等于自身，但 Map 将其视为同一个键。</li>\n</ul>\n"},{"title":"整理ES6：运算符","date":"2023-07-05T22:35:25.000Z","url":"es6-operator","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/16](https://github.com/taoliujun/blog/issues/16)\n\n<!--hexo\n---\nurl: es6-operator\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## 链判断运算符`?.`\n\n非常方便的代替了传统的属性是否存在的判断，它有两个注意点：\n\n* 左侧的对象是否为`null`或`undefined`，如果不是，则继续运算。\n* 如果是的，就不再往下运算，而是返回`undefined`。\n\n常见用法如下：\n\n* obj?.prop // 对象属性是否存在\n* obj?.[expr] // 同上\n* func?.(...args) // 函数或对象方法是否存在\n\n## Null 判断运算符`??`\n\n如果运算结果为`null`或`undefined`，则返回右侧的值，否则返回左侧的值。\n\n```typescript\n// 老写法，如果左侧的boolean值为falsy，都会返回右侧的值\nconst headerText = response.settings.headerText || 'Hello, world!';\n// ??写法，只有左侧的值为null或undefined时，才会返回右侧的值\nconst headerText = response.settings.headerText ?? 'Hello, world!';\n```\n\n\n\n","source":"_posts/es6-operator.md","raw":"---\ntitle: \"整理ES6：运算符\"\ndate: \"2023-07-06T06:35:25Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-operator\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/16](https://github.com/taoliujun/blog/issues/16)\n\n<!--hexo\n---\nurl: es6-operator\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## 链判断运算符`?.`\n\n非常方便的代替了传统的属性是否存在的判断，它有两个注意点：\n\n* 左侧的对象是否为`null`或`undefined`，如果不是，则继续运算。\n* 如果是的，就不再往下运算，而是返回`undefined`。\n\n常见用法如下：\n\n* obj?.prop // 对象属性是否存在\n* obj?.[expr] // 同上\n* func?.(...args) // 函数或对象方法是否存在\n\n## Null 判断运算符`??`\n\n如果运算结果为`null`或`undefined`，则返回右侧的值，否则返回左侧的值。\n\n```typescript\n// 老写法，如果左侧的boolean值为falsy，都会返回右侧的值\nconst headerText = response.settings.headerText || 'Hello, world!';\n// ??写法，只有左侧的值为null或undefined时，才会返回右侧的值\nconst headerText = response.settings.headerText ?? 'Hello, world!';\n```\n\n\n\n","slug":"es6-operator","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvxu0006jaotgwer6fef","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/16\">https://github.com/taoliujun/blog/issues/16</a></p>\n<!--hexo\n---\nurl: es6-operator\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"链判断运算符\"><a href=\"#链判断运算符\" class=\"headerlink\" title=\"链判断运算符?.\"></a>链判断运算符<code>?.</code></h2><p>非常方便的代替了传统的属性是否存在的判断，它有两个注意点：</p>\n<ul>\n<li>左侧的对象是否为<code>null</code>或<code>undefined</code>，如果不是，则继续运算。</li>\n<li>如果是的，就不再往下运算，而是返回<code>undefined</code>。</li>\n</ul>\n<p>常见用法如下：</p>\n<ul>\n<li>obj?.prop &#x2F;&#x2F; 对象属性是否存在</li>\n<li>obj?.[expr] &#x2F;&#x2F; 同上</li>\n<li>func?.(…args) &#x2F;&#x2F; 函数或对象方法是否存在</li>\n</ul>\n<h2 id=\"Null-判断运算符\"><a href=\"#Null-判断运算符\" class=\"headerlink\" title=\"Null 判断运算符??\"></a>Null 判断运算符<code>??</code></h2><p>如果运算结果为<code>null</code>或<code>undefined</code>，则返回右侧的值，否则返回左侧的值。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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\">// 老写法，如果左侧的boolean值为falsy，都会返回右侧的值</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> headerText = response.<span class=\"property\">settings</span>.<span class=\"property\">headerText</span> || <span class=\"string\">&#x27;Hello, world!&#x27;</span>;</span><br><span class=\"line\"><span class=\"comment\">// ??写法，只有左侧的值为null或undefined时，才会返回右侧的值</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> headerText = response.<span class=\"property\">settings</span>.<span class=\"property\">headerText</span> ?? <span class=\"string\">&#x27;Hello, world!&#x27;</span>;</span><br></pre></td></tr></table></figure>\n\n\n\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/16\">https://github.com/taoliujun/blog/issues/16</a></p>\n<!--hexo\n---\nurl: es6-operator\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"链判断运算符\"><a href=\"#链判断运算符\" class=\"headerlink\" title=\"链判断运算符?.\"></a>链判断运算符<code>?.</code></h2><p>非常方便的代替了传统的属性是否存在的判断，它有两个注意点：</p>\n<ul>\n<li>左侧的对象是否为<code>null</code>或<code>undefined</code>，如果不是，则继续运算。</li>\n<li>如果是的，就不再往下运算，而是返回<code>undefined</code>。</li>\n</ul>\n<p>常见用法如下：</p>\n<ul>\n<li>obj?.prop &#x2F;&#x2F; 对象属性是否存在</li>\n<li>obj?.[expr] &#x2F;&#x2F; 同上</li>\n<li>func?.(…args) &#x2F;&#x2F; 函数或对象方法是否存在</li>\n</ul>\n<h2 id=\"Null-判断运算符\"><a href=\"#Null-判断运算符\" class=\"headerlink\" title=\"Null 判断运算符??\"></a>Null 判断运算符<code>??</code></h2><p>如果运算结果为<code>null</code>或<code>undefined</code>，则返回右侧的值，否则返回左侧的值。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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\">// 老写法，如果左侧的boolean值为falsy，都会返回右侧的值</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> headerText = response.<span class=\"property\">settings</span>.<span class=\"property\">headerText</span> || <span class=\"string\">&#x27;Hello, world!&#x27;</span>;</span><br><span class=\"line\"><span class=\"comment\">// ??写法，只有左侧的值为null或undefined时，才会返回右侧的值</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> headerText = response.<span class=\"property\">settings</span>.<span class=\"property\">headerText</span> ?? <span class=\"string\">&#x27;Hello, world!&#x27;</span>;</span><br></pre></td></tr></table></figure>\n\n\n\n"},{"title":"整理ES6：Promise的忽略点和几个方法的区别","date":"2023-07-05T22:21:12.000Z","url":"es6-promise","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/2](https://github.com/taoliujun/blog/issues/2)\n\n<!--hexo\n---\nurl: es6-promise\ntags:\n  - es6\n  - javascript\n---\n-->\n\n**Promise**是业务开发中使用率最高的ES6方法了，但日常容易忽略几个点，以及记不得它几个方法的区别，现记录。\n\n## 容易忽略的点\n\n* `catch`是`then`的语法糖，但是`catch`可以捕获`then`中的异常，而`then`的第二个回调函数不行。\n* 如果没有使用`catch`捕获错误，那么Promise的错误不会传递到外层，即使外层有`try...catch`也捕获不到。\n* 因为`catch`捕获了`rejected`且返回新的实例，所以在`all`等方法中，p1实现了`catch`方法，则p1的`rejected`不会触发p的`catch`。\n\n## 几个方法的区别\n\n| 方法 | resolved的前提 | rejected的前提 | 说明 |\n| --- | ------------- | ------------- | --- |\n| all | 全部resolved | 任一rejected | - |\n| race | 任一resolved | 任一rejected | 任一率先改变的状态，传递给p |\n| allSettled | 全部改变 | - | 状态全部改变，传递给p。格式为: <br /> `{status: 'fulfilled', value: value}` <br/> 或者 <br/> `{status: 'rejected', reason: reason}` |\n| any | 任一resolved | 全部rejected | 传递给`catch`的是一个`AggregateError`实例 |\n\n\n<!--hexo-->\n\n# AggregateError\n\nAggregateError封装了Error数组，它的结构是：\n\n> AggregateError(errors[, message])\n\n`AggregateError()`构造函数可以接受两个参数。\n\n* errors：数组，它的每个成员都是一个错误对象。该参数是必须的。\n* message：字符串，表示 AggregateError 抛出时的提示信息。该参数是可选的。\n\n","source":"_posts/es6-promise.md","raw":"---\ntitle: \"整理ES6：Promise的忽略点和几个方法的区别\"\ndate: \"2023-07-06T06:21:12Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-promise\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/2](https://github.com/taoliujun/blog/issues/2)\n\n<!--hexo\n---\nurl: es6-promise\ntags:\n  - es6\n  - javascript\n---\n-->\n\n**Promise**是业务开发中使用率最高的ES6方法了，但日常容易忽略几个点，以及记不得它几个方法的区别，现记录。\n\n## 容易忽略的点\n\n* `catch`是`then`的语法糖，但是`catch`可以捕获`then`中的异常，而`then`的第二个回调函数不行。\n* 如果没有使用`catch`捕获错误，那么Promise的错误不会传递到外层，即使外层有`try...catch`也捕获不到。\n* 因为`catch`捕获了`rejected`且返回新的实例，所以在`all`等方法中，p1实现了`catch`方法，则p1的`rejected`不会触发p的`catch`。\n\n## 几个方法的区别\n\n| 方法 | resolved的前提 | rejected的前提 | 说明 |\n| --- | ------------- | ------------- | --- |\n| all | 全部resolved | 任一rejected | - |\n| race | 任一resolved | 任一rejected | 任一率先改变的状态，传递给p |\n| allSettled | 全部改变 | - | 状态全部改变，传递给p。格式为: <br /> `{status: 'fulfilled', value: value}` <br/> 或者 <br/> `{status: 'rejected', reason: reason}` |\n| any | 任一resolved | 全部rejected | 传递给`catch`的是一个`AggregateError`实例 |\n\n\n<!--hexo-->\n\n# AggregateError\n\nAggregateError封装了Error数组，它的结构是：\n\n> AggregateError(errors[, message])\n\n`AggregateError()`构造函数可以接受两个参数。\n\n* errors：数组，它的每个成员都是一个错误对象。该参数是必须的。\n* message：字符串，表示 AggregateError 抛出时的提示信息。该参数是可选的。\n\n","slug":"es6-promise","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvxv0009jaotepjnf3w0","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/2\">https://github.com/taoliujun/blog/issues/2</a></p>\n<!--hexo\n---\nurl: es6-promise\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p><strong>Promise</strong>是业务开发中使用率最高的ES6方法了，但日常容易忽略几个点，以及记不得它几个方法的区别，现记录。</p>\n<h2 id=\"容易忽略的点\"><a href=\"#容易忽略的点\" class=\"headerlink\" title=\"容易忽略的点\"></a>容易忽略的点</h2><ul>\n<li><code>catch</code>是<code>then</code>的语法糖，但是<code>catch</code>可以捕获<code>then</code>中的异常，而<code>then</code>的第二个回调函数不行。</li>\n<li>如果没有使用<code>catch</code>捕获错误，那么Promise的错误不会传递到外层，即使外层有<code>try...catch</code>也捕获不到。</li>\n<li>因为<code>catch</code>捕获了<code>rejected</code>且返回新的实例，所以在<code>all</code>等方法中，p1实现了<code>catch</code>方法，则p1的<code>rejected</code>不会触发p的<code>catch</code>。</li>\n</ul>\n<h2 id=\"几个方法的区别\"><a href=\"#几个方法的区别\" class=\"headerlink\" title=\"几个方法的区别\"></a>几个方法的区别</h2><table>\n<thead>\n<tr>\n<th>方法</th>\n<th>resolved的前提</th>\n<th>rejected的前提</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>all</td>\n<td>全部resolved</td>\n<td>任一rejected</td>\n<td>-</td>\n</tr>\n<tr>\n<td>race</td>\n<td>任一resolved</td>\n<td>任一rejected</td>\n<td>任一率先改变的状态，传递给p</td>\n</tr>\n<tr>\n<td>allSettled</td>\n<td>全部改变</td>\n<td>-</td>\n<td>状态全部改变，传递给p。格式为: <br /> <code>&#123;status: &#39;fulfilled&#39;, value: value&#125;</code> <br/> 或者 <br/> <code>&#123;status: &#39;rejected&#39;, reason: reason&#125;</code></td>\n</tr>\n<tr>\n<td>any</td>\n<td>任一resolved</td>\n<td>全部rejected</td>\n<td>传递给<code>catch</code>的是一个<code>AggregateError</code>实例</td>\n</tr>\n</tbody></table>\n<!--hexo-->\n\n<h1 id=\"AggregateError\"><a href=\"#AggregateError\" class=\"headerlink\" title=\"AggregateError\"></a>AggregateError</h1><p>AggregateError封装了Error数组，它的结构是：</p>\n<blockquote>\n<p>AggregateError(errors[, message])</p>\n</blockquote>\n<p><code>AggregateError()</code>构造函数可以接受两个参数。</p>\n<ul>\n<li>errors：数组，它的每个成员都是一个错误对象。该参数是必须的。</li>\n<li>message：字符串，表示 AggregateError 抛出时的提示信息。该参数是可选的。</li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/2\">https://github.com/taoliujun/blog/issues/2</a></p>\n<!--hexo\n---\nurl: es6-promise\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p><strong>Promise</strong>是业务开发中使用率最高的ES6方法了，但日常容易忽略几个点，以及记不得它几个方法的区别，现记录。</p>\n<h2 id=\"容易忽略的点\"><a href=\"#容易忽略的点\" class=\"headerlink\" title=\"容易忽略的点\"></a>容易忽略的点</h2><ul>\n<li><code>catch</code>是<code>then</code>的语法糖，但是<code>catch</code>可以捕获<code>then</code>中的异常，而<code>then</code>的第二个回调函数不行。</li>\n<li>如果没有使用<code>catch</code>捕获错误，那么Promise的错误不会传递到外层，即使外层有<code>try...catch</code>也捕获不到。</li>\n<li>因为<code>catch</code>捕获了<code>rejected</code>且返回新的实例，所以在<code>all</code>等方法中，p1实现了<code>catch</code>方法，则p1的<code>rejected</code>不会触发p的<code>catch</code>。</li>\n</ul>\n<h2 id=\"几个方法的区别\"><a href=\"#几个方法的区别\" class=\"headerlink\" title=\"几个方法的区别\"></a>几个方法的区别</h2><table>\n<thead>\n<tr>\n<th>方法</th>\n<th>resolved的前提</th>\n<th>rejected的前提</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>all</td>\n<td>全部resolved</td>\n<td>任一rejected</td>\n<td>-</td>\n</tr>\n<tr>\n<td>race</td>\n<td>任一resolved</td>\n<td>任一rejected</td>\n<td>任一率先改变的状态，传递给p</td>\n</tr>\n<tr>\n<td>allSettled</td>\n<td>全部改变</td>\n<td>-</td>\n<td>状态全部改变，传递给p。格式为: <br /> <code>&#123;status: &#39;fulfilled&#39;, value: value&#125;</code> <br/> 或者 <br/> <code>&#123;status: &#39;rejected&#39;, reason: reason&#125;</code></td>\n</tr>\n<tr>\n<td>any</td>\n<td>任一resolved</td>\n<td>全部rejected</td>\n<td>传递给<code>catch</code>的是一个<code>AggregateError</code>实例</td>\n</tr>\n</tbody></table>\n<!--hexo-->\n\n<h1 id=\"AggregateError\"><a href=\"#AggregateError\" class=\"headerlink\" title=\"AggregateError\"></a>AggregateError</h1><p>AggregateError封装了Error数组，它的结构是：</p>\n<blockquote>\n<p>AggregateError(errors[, message])</p>\n</blockquote>\n<p><code>AggregateError()</code>构造函数可以接受两个参数。</p>\n<ul>\n<li>errors：数组，它的每个成员都是一个错误对象。该参数是必须的。</li>\n<li>message：字符串，表示 AggregateError 抛出时的提示信息。该参数是可选的。</li>\n</ul>\n"},{"title":"整理ES6：Proxy的应用场景","date":"2023-07-05T22:33:50.000Z","url":"es6-proxy","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/12](https://github.com/taoliujun/blog/issues/12)\n\n<!--hexo\n---\nurl: es6-proxy\ntags:\n  - es6\n  - javascript\n---\n-->\n\nProxy拦截对象的操作，这些操作有13种：get、set、apply等。\n\n## get、set\n\n拦截对象的读取和赋值操作。如下场景，如果用户角色是管理员，那么期望在读取姓名的时候，补充上“管理员”角色名称，并且管理员的姓名不允许被修改。\n\n```ts\nconst user = {\n  name: \"张三\",\n  sex: \"男\",\n};\n\nconst admin = new Proxy(\n  { ...user },\n  {\n    get: (target, key) => {\n      if (key === \"name\") {\n        return `管理员：${target[key]}`;\n      }\n      return target[key];\n    },\n\n    set: (target, key, value) => {\n      if (key === \"name\") {\n        throw new Error(\"不能修改管理员姓名\");\n      }\n      target[key] = value;\n      return true;\n    },\n  }\n);\n\nconsole.log(\"admin信息1：\", admin.name, admin.sex);\nadmin.sex = \"女\";\ntry {\n  admin.name = \"李四\";\n} catch (e) {\n  console.log(e);\n}\nconsole.log(\"admin信息2：\", admin.name, admin.sex);\n```\n\n```shell\nadmin信息1： 管理员：张三 男\nError: 不能修改管理员姓名\n    at Object.set (/Users/stao2/www/learn/something/1.ts:18:15)\n    at Object.<anonymous> (/Users/stao2/www/learn/something/1.ts:29:14)\n    at Module._compile (node:internal/modules/cjs/loader:1254:14)\n    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)\n    at Module.load (node:internal/modules/cjs/loader:1117:32)\n    at Module._load (node:internal/modules/cjs/loader:958:12)\n    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)\n    at node:internal/main/run_main_module:23:47\nadmin信息2： 管理员：张三 女\n```\n\n利用这个规则，可以方便的给对象做一层扩展，而不用修改原来的对象逻辑。\n\n## apply\n\napply可以拦截函数的调用，对用户的年龄，但是对不同的角色，校验规则不一样，而且校验代码挺多，函数里的校验就耦合了。例如：\n\n```ts\nfunction validate(role, age) {\n  if (role === \"student\") {\n    if (age < 7) {\n      return \"不满足学生年龄\";\n    }\n  }\n  if (role === \"teacher\") {\n    if (age < 24 || age > 60) {\n      return \"不满足教室年龄\";\n    }\n  }\n  // ...其他公用的代码\n  return \"validate success\";\n}\n\nconsole.log(validate(\"student\", 4), validate(\"teacher\", 123));\n```\n\n```shell\n不满足学生年龄 不满足教室年龄\n```\n\n但是利用Proxy，可以这样做：\n\n```ts\nfunction validate(user) {\n  // ...其他公用的代码\n  return \"validate success\";\n}\n\nconst validateStudent = new Proxy(validate, {\n  apply: (target, thisArg, args) => {\n    const [user] = args;\n    if (user.age < 7) {\n      return \"不满足学生年龄\";\n    }\n    return target(args);\n  },\n});\n\nconsole.log(validateStudent({ age: 7 }),validateStudent({ age: 8 }));\n```\n\n## 其他\n\nProxy还有`has`，`construct`等拦截，先知道有这些东西，用的时候看文档用Proxy实现，而不是自己两眼一抹黑写了半天自己杂乱的代码。\n\n值得一提的是，很多MVVM框架是用Proxy做数据劫持的，例如Vue3，这样可以监听到对象的变化，从而实现响应式。\n\n\n\n","source":"_posts/es6-proxy.md","raw":"---\ntitle: \"整理ES6：Proxy的应用场景\"\ndate: \"2023-07-06T06:33:50Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-proxy\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/12](https://github.com/taoliujun/blog/issues/12)\n\n<!--hexo\n---\nurl: es6-proxy\ntags:\n  - es6\n  - javascript\n---\n-->\n\nProxy拦截对象的操作，这些操作有13种：get、set、apply等。\n\n## get、set\n\n拦截对象的读取和赋值操作。如下场景，如果用户角色是管理员，那么期望在读取姓名的时候，补充上“管理员”角色名称，并且管理员的姓名不允许被修改。\n\n```ts\nconst user = {\n  name: \"张三\",\n  sex: \"男\",\n};\n\nconst admin = new Proxy(\n  { ...user },\n  {\n    get: (target, key) => {\n      if (key === \"name\") {\n        return `管理员：${target[key]}`;\n      }\n      return target[key];\n    },\n\n    set: (target, key, value) => {\n      if (key === \"name\") {\n        throw new Error(\"不能修改管理员姓名\");\n      }\n      target[key] = value;\n      return true;\n    },\n  }\n);\n\nconsole.log(\"admin信息1：\", admin.name, admin.sex);\nadmin.sex = \"女\";\ntry {\n  admin.name = \"李四\";\n} catch (e) {\n  console.log(e);\n}\nconsole.log(\"admin信息2：\", admin.name, admin.sex);\n```\n\n```shell\nadmin信息1： 管理员：张三 男\nError: 不能修改管理员姓名\n    at Object.set (/Users/stao2/www/learn/something/1.ts:18:15)\n    at Object.<anonymous> (/Users/stao2/www/learn/something/1.ts:29:14)\n    at Module._compile (node:internal/modules/cjs/loader:1254:14)\n    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)\n    at Module.load (node:internal/modules/cjs/loader:1117:32)\n    at Module._load (node:internal/modules/cjs/loader:958:12)\n    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)\n    at node:internal/main/run_main_module:23:47\nadmin信息2： 管理员：张三 女\n```\n\n利用这个规则，可以方便的给对象做一层扩展，而不用修改原来的对象逻辑。\n\n## apply\n\napply可以拦截函数的调用，对用户的年龄，但是对不同的角色，校验规则不一样，而且校验代码挺多，函数里的校验就耦合了。例如：\n\n```ts\nfunction validate(role, age) {\n  if (role === \"student\") {\n    if (age < 7) {\n      return \"不满足学生年龄\";\n    }\n  }\n  if (role === \"teacher\") {\n    if (age < 24 || age > 60) {\n      return \"不满足教室年龄\";\n    }\n  }\n  // ...其他公用的代码\n  return \"validate success\";\n}\n\nconsole.log(validate(\"student\", 4), validate(\"teacher\", 123));\n```\n\n```shell\n不满足学生年龄 不满足教室年龄\n```\n\n但是利用Proxy，可以这样做：\n\n```ts\nfunction validate(user) {\n  // ...其他公用的代码\n  return \"validate success\";\n}\n\nconst validateStudent = new Proxy(validate, {\n  apply: (target, thisArg, args) => {\n    const [user] = args;\n    if (user.age < 7) {\n      return \"不满足学生年龄\";\n    }\n    return target(args);\n  },\n});\n\nconsole.log(validateStudent({ age: 7 }),validateStudent({ age: 8 }));\n```\n\n## 其他\n\nProxy还有`has`，`construct`等拦截，先知道有这些东西，用的时候看文档用Proxy实现，而不是自己两眼一抹黑写了半天自己杂乱的代码。\n\n值得一提的是，很多MVVM框架是用Proxy做数据劫持的，例如Vue3，这样可以监听到对象的变化，从而实现响应式。\n\n\n\n","slug":"es6-proxy","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvxw000ajaot16m5fl0w","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/12\">https://github.com/taoliujun/blog/issues/12</a></p>\n<!--hexo\n---\nurl: es6-proxy\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>Proxy拦截对象的操作，这些操作有13种：get、set、apply等。</p>\n<h2 id=\"get、set\"><a href=\"#get、set\" class=\"headerlink\" title=\"get、set\"></a>get、set</h2><p>拦截对象的读取和赋值操作。如下场景，如果用户角色是管理员，那么期望在读取姓名的时候，补充上“管理员”角色名称，并且管理员的姓名不允许被修改。</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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> user = &#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\">sex</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\">const</span> admin = <span class=\"keyword\">new</span> <span class=\"title class_\">Proxy</span>(</span><br><span class=\"line\">  &#123; ...user &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    <span class=\"attr\">get</span>: <span class=\"function\">(<span class=\"params\">target, key</span>) =&gt;</span> &#123;</span><br><span class=\"line\">      <span class=\"keyword\">if</span> (key === <span class=\"string\">&quot;name&quot;</span>) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> <span class=\"string\">`管理员：<span class=\"subst\">$&#123;target[key]&#125;</span>`</span>;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">      <span class=\"keyword\">return</span> target[key];</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">set</span>: <span class=\"function\">(<span class=\"params\">target, key, value</span>) =&gt;</span> &#123;</span><br><span class=\"line\">      <span class=\"keyword\">if</span> (key === <span class=\"string\">&quot;name&quot;</span>) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">throw</span> <span class=\"keyword\">new</span> <span class=\"title class_\">Error</span>(<span class=\"string\">&quot;不能修改管理员姓名&quot;</span>);</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">      target[key] = value;</span><br><span class=\"line\">      <span class=\"keyword\">return</span> <span class=\"literal\">true</span>;</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=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;admin信息1：&quot;</span>, admin.<span class=\"property\">name</span>, admin.<span class=\"property\">sex</span>);</span><br><span class=\"line\">admin.<span class=\"property\">sex</span> = <span class=\"string\">&quot;女&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">try</span> &#123;</span><br><span class=\"line\">  admin.<span class=\"property\">name</span> = <span class=\"string\">&quot;李四&quot;</span>;</span><br><span class=\"line\">&#125; <span class=\"keyword\">catch</span> (e) &#123;</span><br><span class=\"line\">  <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(e);</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\">&quot;admin信息2：&quot;</span>, admin.<span class=\"property\">name</span>, admin.<span class=\"property\">sex</span>);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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\">admin信息1： 管理员：张三 男</span><br><span class=\"line\">Error: 不能修改管理员姓名</span><br><span class=\"line\">    at Object.set (/Users/stao2/www/learn/something/1.ts:18:15)</span><br><span class=\"line\">    at Object.&lt;anonymous&gt; (/Users/stao2/www/learn/something/1.ts:29:14)</span><br><span class=\"line\">    at Module._compile (node:internal/modules/cjs/loader:1254:14)</span><br><span class=\"line\">    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)</span><br><span class=\"line\">    at Module.load (node:internal/modules/cjs/loader:1117:32)</span><br><span class=\"line\">    at Module._load (node:internal/modules/cjs/loader:958:12)</span><br><span class=\"line\">    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)</span><br><span class=\"line\">    at node:internal/main/run_main_module:23:47</span><br><span class=\"line\">admin信息2： 管理员：张三 女</span><br></pre></td></tr></table></figure>\n\n<p>利用这个规则，可以方便的给对象做一层扩展，而不用修改原来的对象逻辑。</p>\n<h2 id=\"apply\"><a href=\"#apply\" class=\"headerlink\" title=\"apply\"></a>apply</h2><p>apply可以拦截函数的调用，对用户的年龄，但是对不同的角色，校验规则不一样，而且校验代码挺多，函数里的校验就耦合了。例如：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">function</span> <span class=\"title function_\">validate</span>(<span class=\"params\">role, age</span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (role === <span class=\"string\">&quot;student&quot;</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (age &lt; <span class=\"number\">7</span>) &#123;</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\">  <span class=\"keyword\">if</span> (role === <span class=\"string\">&quot;teacher&quot;</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (age &lt; <span class=\"number\">24</span> || age &gt; <span class=\"number\">60</span>) &#123;</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\">  <span class=\"comment\">// ...其他公用的代码</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"string\">&quot;validate success&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=\"title function_\">validate</span>(<span class=\"string\">&quot;student&quot;</span>, <span class=\"number\">4</span>), <span class=\"title function_\">validate</span>(<span class=\"string\">&quot;teacher&quot;</span>, <span class=\"number\">123</span>));</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">不满足学生年龄 不满足教室年龄</span><br></pre></td></tr></table></figure>\n\n<p>但是利用Proxy，可以这样做：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">function</span> <span class=\"title function_\">validate</span>(<span class=\"params\">user</span>) &#123;</span><br><span class=\"line\">  <span class=\"comment\">// ...其他公用的代码</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"string\">&quot;validate success&quot;</span>;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> validateStudent = <span class=\"keyword\">new</span> <span class=\"title class_\">Proxy</span>(validate, &#123;</span><br><span class=\"line\">  <span class=\"attr\">apply</span>: <span class=\"function\">(<span class=\"params\">target, thisArg, args</span>) =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [user] = args;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (user.<span class=\"property\">age</span> &lt; <span class=\"number\">7</span>) &#123;</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\">    <span class=\"keyword\">return</span> <span class=\"title function_\">target</span>(args);</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 function_\">validateStudent</span>(&#123; <span class=\"attr\">age</span>: <span class=\"number\">7</span> &#125;),<span class=\"title function_\">validateStudent</span>(&#123; <span class=\"attr\">age</span>: <span class=\"number\">8</span> &#125;));</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h2><p>Proxy还有<code>has</code>，<code>construct</code>等拦截，先知道有这些东西，用的时候看文档用Proxy实现，而不是自己两眼一抹黑写了半天自己杂乱的代码。</p>\n<p>值得一提的是，很多MVVM框架是用Proxy做数据劫持的，例如Vue3，这样可以监听到对象的变化，从而实现响应式。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/12\">https://github.com/taoliujun/blog/issues/12</a></p>\n<!--hexo\n---\nurl: es6-proxy\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>Proxy拦截对象的操作，这些操作有13种：get、set、apply等。</p>\n<h2 id=\"get、set\"><a href=\"#get、set\" class=\"headerlink\" title=\"get、set\"></a>get、set</h2><p>拦截对象的读取和赋值操作。如下场景，如果用户角色是管理员，那么期望在读取姓名的时候，补充上“管理员”角色名称，并且管理员的姓名不允许被修改。</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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> user = &#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\">sex</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\">const</span> admin = <span class=\"keyword\">new</span> <span class=\"title class_\">Proxy</span>(</span><br><span class=\"line\">  &#123; ...user &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    <span class=\"attr\">get</span>: <span class=\"function\">(<span class=\"params\">target, key</span>) =&gt;</span> &#123;</span><br><span class=\"line\">      <span class=\"keyword\">if</span> (key === <span class=\"string\">&quot;name&quot;</span>) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> <span class=\"string\">`管理员：<span class=\"subst\">$&#123;target[key]&#125;</span>`</span>;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">      <span class=\"keyword\">return</span> target[key];</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">set</span>: <span class=\"function\">(<span class=\"params\">target, key, value</span>) =&gt;</span> &#123;</span><br><span class=\"line\">      <span class=\"keyword\">if</span> (key === <span class=\"string\">&quot;name&quot;</span>) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">throw</span> <span class=\"keyword\">new</span> <span class=\"title class_\">Error</span>(<span class=\"string\">&quot;不能修改管理员姓名&quot;</span>);</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">      target[key] = value;</span><br><span class=\"line\">      <span class=\"keyword\">return</span> <span class=\"literal\">true</span>;</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=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;admin信息1：&quot;</span>, admin.<span class=\"property\">name</span>, admin.<span class=\"property\">sex</span>);</span><br><span class=\"line\">admin.<span class=\"property\">sex</span> = <span class=\"string\">&quot;女&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">try</span> &#123;</span><br><span class=\"line\">  admin.<span class=\"property\">name</span> = <span class=\"string\">&quot;李四&quot;</span>;</span><br><span class=\"line\">&#125; <span class=\"keyword\">catch</span> (e) &#123;</span><br><span class=\"line\">  <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(e);</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\">&quot;admin信息2：&quot;</span>, admin.<span class=\"property\">name</span>, admin.<span class=\"property\">sex</span>);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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\">admin信息1： 管理员：张三 男</span><br><span class=\"line\">Error: 不能修改管理员姓名</span><br><span class=\"line\">    at Object.set (/Users/stao2/www/learn/something/1.ts:18:15)</span><br><span class=\"line\">    at Object.&lt;anonymous&gt; (/Users/stao2/www/learn/something/1.ts:29:14)</span><br><span class=\"line\">    at Module._compile (node:internal/modules/cjs/loader:1254:14)</span><br><span class=\"line\">    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)</span><br><span class=\"line\">    at Module.load (node:internal/modules/cjs/loader:1117:32)</span><br><span class=\"line\">    at Module._load (node:internal/modules/cjs/loader:958:12)</span><br><span class=\"line\">    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)</span><br><span class=\"line\">    at node:internal/main/run_main_module:23:47</span><br><span class=\"line\">admin信息2： 管理员：张三 女</span><br></pre></td></tr></table></figure>\n\n<p>利用这个规则，可以方便的给对象做一层扩展，而不用修改原来的对象逻辑。</p>\n<h2 id=\"apply\"><a href=\"#apply\" class=\"headerlink\" title=\"apply\"></a>apply</h2><p>apply可以拦截函数的调用，对用户的年龄，但是对不同的角色，校验规则不一样，而且校验代码挺多，函数里的校验就耦合了。例如：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">function</span> <span class=\"title function_\">validate</span>(<span class=\"params\">role, age</span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (role === <span class=\"string\">&quot;student&quot;</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (age &lt; <span class=\"number\">7</span>) &#123;</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\">  <span class=\"keyword\">if</span> (role === <span class=\"string\">&quot;teacher&quot;</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (age &lt; <span class=\"number\">24</span> || age &gt; <span class=\"number\">60</span>) &#123;</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\">  <span class=\"comment\">// ...其他公用的代码</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"string\">&quot;validate success&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=\"title function_\">validate</span>(<span class=\"string\">&quot;student&quot;</span>, <span class=\"number\">4</span>), <span class=\"title function_\">validate</span>(<span class=\"string\">&quot;teacher&quot;</span>, <span class=\"number\">123</span>));</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">不满足学生年龄 不满足教室年龄</span><br></pre></td></tr></table></figure>\n\n<p>但是利用Proxy，可以这样做：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">function</span> <span class=\"title function_\">validate</span>(<span class=\"params\">user</span>) &#123;</span><br><span class=\"line\">  <span class=\"comment\">// ...其他公用的代码</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"string\">&quot;validate success&quot;</span>;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> validateStudent = <span class=\"keyword\">new</span> <span class=\"title class_\">Proxy</span>(validate, &#123;</span><br><span class=\"line\">  <span class=\"attr\">apply</span>: <span class=\"function\">(<span class=\"params\">target, thisArg, args</span>) =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [user] = args;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (user.<span class=\"property\">age</span> &lt; <span class=\"number\">7</span>) &#123;</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\">    <span class=\"keyword\">return</span> <span class=\"title function_\">target</span>(args);</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 function_\">validateStudent</span>(&#123; <span class=\"attr\">age</span>: <span class=\"number\">7</span> &#125;),<span class=\"title function_\">validateStudent</span>(&#123; <span class=\"attr\">age</span>: <span class=\"number\">8</span> &#125;));</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h2><p>Proxy还有<code>has</code>，<code>construct</code>等拦截，先知道有这些东西，用的时候看文档用Proxy实现，而不是自己两眼一抹黑写了半天自己杂乱的代码。</p>\n<p>值得一提的是，很多MVVM框架是用Proxy做数据劫持的，例如Vue3，这样可以监听到对象的变化，从而实现响应式。</p>\n"},{"title":"整理ES6：Reflect和Object的关系","date":"2023-07-05T22:32:57.000Z","url":"es6-reflect","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/11](https://github.com/taoliujun/blog/issues/11)\n\n<!--hexo\n---\nurl: es6-reflect\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## Reflect是什么\n\n在我若干年前阅读Reflect文档的那几天，我常闷被里自问，这是个什么玩意？随着时间的推移，我对它的理解越来越深刻，也越来越喜欢它。我想，这是一个值得深入研究的东西。(这句话是Copilot补充的，我觉得很有道理，就留下来了)\n\nReflect是操作对象用的，我觉得Reflect最大的用处有两个。\n\n一是将Object的命令式、函数式混用行为，统一成函数式行为。比如`delete obj.key`，`key in obj`对应为`Reflect.deleteProperty(obj, key)`和`Reflect.has(obj, key)`。\n\n二是Reflect的方法和Proxy的拦截器一一对应，这样就可以用Reflect来实现Proxy的拦截器，而不用再写一遍拦截器的逻辑。比如`Reflect.get(obj, key)`对应为`get`拦截器，`Reflect.set(obj, key, value)`对应为`set`拦截器。\n\n**它拥有的静态方法和Proxy一样多**\n\n## get\n\n```ts\nconst user = {\n  name: \"张三\",\n  age: 20,\n};\n// user.age\nconsole.log(Reflect.get(user, \"age\"));\n```\n\n```shell\n20\n```\n\n代码很好理解，不一一表述了。\n\n## set\n\n```ts\nconst user = {\n  name: \"张三\",\n  age: 20,\n};\n// user.name = '李四'\nReflect.set(user, \"name\", \"李四\");\nconsole.log(user);\n```\n\n```shell\n{ name: '李四', age: 20 }\n```\n\n## delete\n\n```ts\nconst user = {\n  name: \"张三\",\n  age: 20,\n};\n\nReflect.deleteProperty(user, \"name\");\nconsole.log(user);\n```\n\n```shell\n{ age: 20 }\n```\n\n更多的方法见MDN即可。\n\n\n\n","source":"_posts/es6-reflect.md","raw":"---\ntitle: \"整理ES6：Reflect和Object的关系\"\ndate: \"2023-07-06T06:32:57Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-reflect\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/11](https://github.com/taoliujun/blog/issues/11)\n\n<!--hexo\n---\nurl: es6-reflect\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## Reflect是什么\n\n在我若干年前阅读Reflect文档的那几天，我常闷被里自问，这是个什么玩意？随着时间的推移，我对它的理解越来越深刻，也越来越喜欢它。我想，这是一个值得深入研究的东西。(这句话是Copilot补充的，我觉得很有道理，就留下来了)\n\nReflect是操作对象用的，我觉得Reflect最大的用处有两个。\n\n一是将Object的命令式、函数式混用行为，统一成函数式行为。比如`delete obj.key`，`key in obj`对应为`Reflect.deleteProperty(obj, key)`和`Reflect.has(obj, key)`。\n\n二是Reflect的方法和Proxy的拦截器一一对应，这样就可以用Reflect来实现Proxy的拦截器，而不用再写一遍拦截器的逻辑。比如`Reflect.get(obj, key)`对应为`get`拦截器，`Reflect.set(obj, key, value)`对应为`set`拦截器。\n\n**它拥有的静态方法和Proxy一样多**\n\n## get\n\n```ts\nconst user = {\n  name: \"张三\",\n  age: 20,\n};\n// user.age\nconsole.log(Reflect.get(user, \"age\"));\n```\n\n```shell\n20\n```\n\n代码很好理解，不一一表述了。\n\n## set\n\n```ts\nconst user = {\n  name: \"张三\",\n  age: 20,\n};\n// user.name = '李四'\nReflect.set(user, \"name\", \"李四\");\nconsole.log(user);\n```\n\n```shell\n{ name: '李四', age: 20 }\n```\n\n## delete\n\n```ts\nconst user = {\n  name: \"张三\",\n  age: 20,\n};\n\nReflect.deleteProperty(user, \"name\");\nconsole.log(user);\n```\n\n```shell\n{ age: 20 }\n```\n\n更多的方法见MDN即可。\n\n\n\n","slug":"es6-reflect","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvxy000djaot35e97wk9","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/11\">https://github.com/taoliujun/blog/issues/11</a></p>\n<!--hexo\n---\nurl: es6-reflect\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"Reflect是什么\"><a href=\"#Reflect是什么\" class=\"headerlink\" title=\"Reflect是什么\"></a>Reflect是什么</h2><p>在我若干年前阅读Reflect文档的那几天，我常闷被里自问，这是个什么玩意？随着时间的推移，我对它的理解越来越深刻，也越来越喜欢它。我想，这是一个值得深入研究的东西。(这句话是Copilot补充的，我觉得很有道理，就留下来了)</p>\n<p>Reflect是操作对象用的，我觉得Reflect最大的用处有两个。</p>\n<p>一是将Object的命令式、函数式混用行为，统一成函数式行为。比如<code>delete obj.key</code>，<code>key in obj</code>对应为<code>Reflect.deleteProperty(obj, key)</code>和<code>Reflect.has(obj, key)</code>。</p>\n<p>二是Reflect的方法和Proxy的拦截器一一对应，这样就可以用Reflect来实现Proxy的拦截器，而不用再写一遍拦截器的逻辑。比如<code>Reflect.get(obj, key)</code>对应为<code>get</code>拦截器，<code>Reflect.set(obj, key, value)</code>对应为<code>set</code>拦截器。</p>\n<p><strong>它拥有的静态方法和Proxy一样多</strong></p>\n<h2 id=\"get\"><a href=\"#get\" class=\"headerlink\" title=\"get\"></a>get</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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> user = &#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\">// user.age</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_\">get</span>(user, <span class=\"string\">&quot;age&quot;</span>));</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">20</span><br></pre></td></tr></table></figure>\n\n<p>代码很好理解，不一一表述了。</p>\n<h2 id=\"set\"><a href=\"#set\" class=\"headerlink\" title=\"set\"></a>set</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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> user = &#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\">// user.name = &#x27;李四&#x27;</span></span><br><span class=\"line\"><span class=\"title class_\">Reflect</span>.<span class=\"title function_\">set</span>(user, <span class=\"string\">&quot;name&quot;</span>, <span class=\"string\">&quot;李四&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(user);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">&#123; name: &#x27;李四&#x27;, age: 20 &#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"delete\"><a href=\"#delete\" class=\"headerlink\" title=\"delete\"></a>delete</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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> user = &#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><br><span class=\"line\"><span class=\"title class_\">Reflect</span>.<span class=\"title function_\">deleteProperty</span>(user, <span class=\"string\">&quot;name&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(user);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">&#123; age: 20 &#125;</span><br></pre></td></tr></table></figure>\n\n<p>更多的方法见MDN即可。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/11\">https://github.com/taoliujun/blog/issues/11</a></p>\n<!--hexo\n---\nurl: es6-reflect\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"Reflect是什么\"><a href=\"#Reflect是什么\" class=\"headerlink\" title=\"Reflect是什么\"></a>Reflect是什么</h2><p>在我若干年前阅读Reflect文档的那几天，我常闷被里自问，这是个什么玩意？随着时间的推移，我对它的理解越来越深刻，也越来越喜欢它。我想，这是一个值得深入研究的东西。(这句话是Copilot补充的，我觉得很有道理，就留下来了)</p>\n<p>Reflect是操作对象用的，我觉得Reflect最大的用处有两个。</p>\n<p>一是将Object的命令式、函数式混用行为，统一成函数式行为。比如<code>delete obj.key</code>，<code>key in obj</code>对应为<code>Reflect.deleteProperty(obj, key)</code>和<code>Reflect.has(obj, key)</code>。</p>\n<p>二是Reflect的方法和Proxy的拦截器一一对应，这样就可以用Reflect来实现Proxy的拦截器，而不用再写一遍拦截器的逻辑。比如<code>Reflect.get(obj, key)</code>对应为<code>get</code>拦截器，<code>Reflect.set(obj, key, value)</code>对应为<code>set</code>拦截器。</p>\n<p><strong>它拥有的静态方法和Proxy一样多</strong></p>\n<h2 id=\"get\"><a href=\"#get\" class=\"headerlink\" title=\"get\"></a>get</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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> user = &#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\">// user.age</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_\">get</span>(user, <span class=\"string\">&quot;age&quot;</span>));</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">20</span><br></pre></td></tr></table></figure>\n\n<p>代码很好理解，不一一表述了。</p>\n<h2 id=\"set\"><a href=\"#set\" class=\"headerlink\" title=\"set\"></a>set</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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> user = &#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\">// user.name = &#x27;李四&#x27;</span></span><br><span class=\"line\"><span class=\"title class_\">Reflect</span>.<span class=\"title function_\">set</span>(user, <span class=\"string\">&quot;name&quot;</span>, <span class=\"string\">&quot;李四&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(user);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">&#123; name: &#x27;李四&#x27;, age: 20 &#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"delete\"><a href=\"#delete\" class=\"headerlink\" title=\"delete\"></a>delete</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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> user = &#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><br><span class=\"line\"><span class=\"title class_\">Reflect</span>.<span class=\"title function_\">deleteProperty</span>(user, <span class=\"string\">&quot;name&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(user);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">&#123; age: 20 &#125;</span><br></pre></td></tr></table></figure>\n\n<p>更多的方法见MDN即可。</p>\n"},{"title":"整理ES6：Set真的挺好的","date":"2023-07-05T22:34:36.000Z","url":"es6-set","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/14](https://github.com/taoliujun/blog/issues/14)\n\n<!--hexo\n---\nurl: es6-set\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## 为什么用Set\n\n\n```ts\n// Array\nlet arr1 = [\"a\", \"b\", \"c\", \"d\"];\n\narr1 = arr1.filter((element) => element !== \"d\");\narr1.filter((element) => element !== \"e\").push(\"e\");\nconsole.log(arr1.includes(\"b\"));\n\n// Object\nlet obj1 = { a: true, b: true, c: true, d: true };\n\ndelete obj1.d;\nobj1.e = true;\nconsole.log(\"b\" in obj1);\n\n// Set\nlet set1 = new Set([\"a\", \"b\", \"c\"]);\n\nset1.delete(\"d\");\nset1.add(\"e\");\nconsole.log(set1.has(\"b\"));\n```\n\n如上演示了Array、Object、Set三种数据结构的基本操作，Set提供了更为便捷的方式：\n\n1. 相比Array有更简单的语法，在运算复杂度上有很大提升。\n1. 相比Object的命令式操作，Set提供了方法式的操作。\n\n\n## 唯一特性\n\n在工作中，要用到集合唯一特性的场景有很多，用Array实现的时候，需要自己写很多代码来保证唯一性，而用Object实现，又不能保证元素的访问顺序。\n\n举几个例子。\n\n```ts\n// 历史搜索记录唯一\nconst s1 = new Set();\n\ns1.add(\"长江\");\ns1.add(\"黄河\");\ns1.add(\"故宫\");\ns1.add(\"长江\");\ns1.add(\"圆明园\");\n\nconsole.log(s1);\n```\n\n```ts\n// 移除输入的重复数据ID\nconst a = [23, 58, 23, 19, 96];\nconst s1 = new Set(a);\n\nconsole.log(Array.from(s1));\n```\n\n\n## 注意点\n\n* Set为了保持元素的唯一，内部使用了`SameValueZero`算法，这意味着`NaN`和`NaN`是相等的，`+0`和`-0`是相等的。\n\n\n\n","source":"_posts/es6-set.md","raw":"---\ntitle: \"整理ES6：Set真的挺好的\"\ndate: \"2023-07-06T06:34:36Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-set\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/14](https://github.com/taoliujun/blog/issues/14)\n\n<!--hexo\n---\nurl: es6-set\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## 为什么用Set\n\n\n```ts\n// Array\nlet arr1 = [\"a\", \"b\", \"c\", \"d\"];\n\narr1 = arr1.filter((element) => element !== \"d\");\narr1.filter((element) => element !== \"e\").push(\"e\");\nconsole.log(arr1.includes(\"b\"));\n\n// Object\nlet obj1 = { a: true, b: true, c: true, d: true };\n\ndelete obj1.d;\nobj1.e = true;\nconsole.log(\"b\" in obj1);\n\n// Set\nlet set1 = new Set([\"a\", \"b\", \"c\"]);\n\nset1.delete(\"d\");\nset1.add(\"e\");\nconsole.log(set1.has(\"b\"));\n```\n\n如上演示了Array、Object、Set三种数据结构的基本操作，Set提供了更为便捷的方式：\n\n1. 相比Array有更简单的语法，在运算复杂度上有很大提升。\n1. 相比Object的命令式操作，Set提供了方法式的操作。\n\n\n## 唯一特性\n\n在工作中，要用到集合唯一特性的场景有很多，用Array实现的时候，需要自己写很多代码来保证唯一性，而用Object实现，又不能保证元素的访问顺序。\n\n举几个例子。\n\n```ts\n// 历史搜索记录唯一\nconst s1 = new Set();\n\ns1.add(\"长江\");\ns1.add(\"黄河\");\ns1.add(\"故宫\");\ns1.add(\"长江\");\ns1.add(\"圆明园\");\n\nconsole.log(s1);\n```\n\n```ts\n// 移除输入的重复数据ID\nconst a = [23, 58, 23, 19, 96];\nconst s1 = new Set(a);\n\nconsole.log(Array.from(s1));\n```\n\n\n## 注意点\n\n* Set为了保持元素的唯一，内部使用了`SameValueZero`算法，这意味着`NaN`和`NaN`是相等的，`+0`和`-0`是相等的。\n\n\n\n","slug":"es6-set","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvxz000gjaot1ny4bgke","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/14\">https://github.com/taoliujun/blog/issues/14</a></p>\n<!--hexo\n---\nurl: es6-set\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"为什么用Set\"><a href=\"#为什么用Set\" class=\"headerlink\" title=\"为什么用Set\"></a>为什么用Set</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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\">// Array</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> arr1 = [<span class=\"string\">&quot;a&quot;</span>, <span class=\"string\">&quot;b&quot;</span>, <span class=\"string\">&quot;c&quot;</span>, <span class=\"string\">&quot;d&quot;</span>];</span><br><span class=\"line\"></span><br><span class=\"line\">arr1 = arr1.<span class=\"title function_\">filter</span>(<span class=\"function\">(<span class=\"params\">element</span>) =&gt;</span> element !== <span class=\"string\">&quot;d&quot;</span>);</span><br><span class=\"line\">arr1.<span class=\"title function_\">filter</span>(<span class=\"function\">(<span class=\"params\">element</span>) =&gt;</span> element !== <span class=\"string\">&quot;e&quot;</span>).<span class=\"title function_\">push</span>(<span class=\"string\">&quot;e&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(arr1.<span class=\"title function_\">includes</span>(<span class=\"string\">&quot;b&quot;</span>));</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// Object</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> obj1 = &#123; <span class=\"attr\">a</span>: <span class=\"literal\">true</span>, <span class=\"attr\">b</span>: <span class=\"literal\">true</span>, <span class=\"attr\">c</span>: <span class=\"literal\">true</span>, <span class=\"attr\">d</span>: <span class=\"literal\">true</span> &#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">delete</span> obj1.<span class=\"property\">d</span>;</span><br><span class=\"line\">obj1.<span class=\"property\">e</span> = <span class=\"literal\">true</span>;</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;b&quot;</span> <span class=\"keyword\">in</span> obj1);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// Set</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> set1 = <span class=\"keyword\">new</span> <span class=\"title class_\">Set</span>([<span class=\"string\">&quot;a&quot;</span>, <span class=\"string\">&quot;b&quot;</span>, <span class=\"string\">&quot;c&quot;</span>]);</span><br><span class=\"line\"></span><br><span class=\"line\">set1.<span class=\"title function_\">delete</span>(<span class=\"string\">&quot;d&quot;</span>);</span><br><span class=\"line\">set1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;e&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(set1.<span class=\"title function_\">has</span>(<span class=\"string\">&quot;b&quot;</span>));</span><br></pre></td></tr></table></figure>\n\n<p>如上演示了Array、Object、Set三种数据结构的基本操作，Set提供了更为便捷的方式：</p>\n<ol>\n<li>相比Array有更简单的语法，在运算复杂度上有很大提升。</li>\n<li>相比Object的命令式操作，Set提供了方法式的操作。</li>\n</ol>\n<h2 id=\"唯一特性\"><a href=\"#唯一特性\" class=\"headerlink\" title=\"唯一特性\"></a>唯一特性</h2><p>在工作中，要用到集合唯一特性的场景有很多，用Array实现的时候，需要自己写很多代码来保证唯一性，而用Object实现，又不能保证元素的访问顺序。</p>\n<p>举几个例子。</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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> s1 = <span class=\"keyword\">new</span> <span class=\"title class_\">Set</span>();</span><br><span class=\"line\"></span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;长江&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;黄河&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;故宫&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;长江&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;圆明园&quot;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(s1);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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\">// 移除输入的重复数据ID</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> a = [<span class=\"number\">23</span>, <span class=\"number\">58</span>, <span class=\"number\">23</span>, <span class=\"number\">19</span>, <span class=\"number\">96</span>];</span><br><span class=\"line\"><span class=\"keyword\">const</span> s1 = <span class=\"keyword\">new</span> <span class=\"title class_\">Set</span>(a);</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_\">Array</span>.<span class=\"title function_\">from</span>(s1));</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"注意点\"><a href=\"#注意点\" class=\"headerlink\" title=\"注意点\"></a>注意点</h2><ul>\n<li>Set为了保持元素的唯一，内部使用了<code>SameValueZero</code>算法，这意味着<code>NaN</code>和<code>NaN</code>是相等的，<code>+0</code>和<code>-0</code>是相等的。</li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/14\">https://github.com/taoliujun/blog/issues/14</a></p>\n<!--hexo\n---\nurl: es6-set\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"为什么用Set\"><a href=\"#为什么用Set\" class=\"headerlink\" title=\"为什么用Set\"></a>为什么用Set</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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\">// Array</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> arr1 = [<span class=\"string\">&quot;a&quot;</span>, <span class=\"string\">&quot;b&quot;</span>, <span class=\"string\">&quot;c&quot;</span>, <span class=\"string\">&quot;d&quot;</span>];</span><br><span class=\"line\"></span><br><span class=\"line\">arr1 = arr1.<span class=\"title function_\">filter</span>(<span class=\"function\">(<span class=\"params\">element</span>) =&gt;</span> element !== <span class=\"string\">&quot;d&quot;</span>);</span><br><span class=\"line\">arr1.<span class=\"title function_\">filter</span>(<span class=\"function\">(<span class=\"params\">element</span>) =&gt;</span> element !== <span class=\"string\">&quot;e&quot;</span>).<span class=\"title function_\">push</span>(<span class=\"string\">&quot;e&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(arr1.<span class=\"title function_\">includes</span>(<span class=\"string\">&quot;b&quot;</span>));</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// Object</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> obj1 = &#123; <span class=\"attr\">a</span>: <span class=\"literal\">true</span>, <span class=\"attr\">b</span>: <span class=\"literal\">true</span>, <span class=\"attr\">c</span>: <span class=\"literal\">true</span>, <span class=\"attr\">d</span>: <span class=\"literal\">true</span> &#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">delete</span> obj1.<span class=\"property\">d</span>;</span><br><span class=\"line\">obj1.<span class=\"property\">e</span> = <span class=\"literal\">true</span>;</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;b&quot;</span> <span class=\"keyword\">in</span> obj1);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// Set</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> set1 = <span class=\"keyword\">new</span> <span class=\"title class_\">Set</span>([<span class=\"string\">&quot;a&quot;</span>, <span class=\"string\">&quot;b&quot;</span>, <span class=\"string\">&quot;c&quot;</span>]);</span><br><span class=\"line\"></span><br><span class=\"line\">set1.<span class=\"title function_\">delete</span>(<span class=\"string\">&quot;d&quot;</span>);</span><br><span class=\"line\">set1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;e&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(set1.<span class=\"title function_\">has</span>(<span class=\"string\">&quot;b&quot;</span>));</span><br></pre></td></tr></table></figure>\n\n<p>如上演示了Array、Object、Set三种数据结构的基本操作，Set提供了更为便捷的方式：</p>\n<ol>\n<li>相比Array有更简单的语法，在运算复杂度上有很大提升。</li>\n<li>相比Object的命令式操作，Set提供了方法式的操作。</li>\n</ol>\n<h2 id=\"唯一特性\"><a href=\"#唯一特性\" class=\"headerlink\" title=\"唯一特性\"></a>唯一特性</h2><p>在工作中，要用到集合唯一特性的场景有很多，用Array实现的时候，需要自己写很多代码来保证唯一性，而用Object实现，又不能保证元素的访问顺序。</p>\n<p>举几个例子。</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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> s1 = <span class=\"keyword\">new</span> <span class=\"title class_\">Set</span>();</span><br><span class=\"line\"></span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;长江&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;黄河&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;故宫&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;长江&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;圆明园&quot;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(s1);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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\">// 移除输入的重复数据ID</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> a = [<span class=\"number\">23</span>, <span class=\"number\">58</span>, <span class=\"number\">23</span>, <span class=\"number\">19</span>, <span class=\"number\">96</span>];</span><br><span class=\"line\"><span class=\"keyword\">const</span> s1 = <span class=\"keyword\">new</span> <span class=\"title class_\">Set</span>(a);</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_\">Array</span>.<span class=\"title function_\">from</span>(s1));</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"注意点\"><a href=\"#注意点\" class=\"headerlink\" title=\"注意点\"></a>注意点</h2><ul>\n<li>Set为了保持元素的唯一，内部使用了<code>SameValueZero</code>算法，这意味着<code>NaN</code>和<code>NaN</code>是相等的，<code>+0</code>和<code>-0</code>是相等的。</li>\n</ul>\n"},{"title":"整理ES6：聊一聊Symbol ","date":"2023-07-05T22:35:00.000Z","url":"es6-symbol","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/15](https://github.com/taoliujun/blog/issues/15)\n\n<!--hexo\n---\nurl: es6-symbol\ntags:\n  - es6\n  - javascript\n---\n-->\n\n我在5年前看完`Symbol`，就将它抛之脑后，直到最近才重新研究，看看它是什么样的宝藏。\n\n先快速看下它是什么。\n\n## Symbol 基本用法\n\n```typescript\nconst a1 = Symbol();\nconst a2 = Symbol(\"i am a\");\nconst a3 = Symbol(\"i am a\");\n\nconsole.log(\"a1\", a1);\nconsole.log(\"a2\", a2);\nconsole.log(\"a2\", a2.description);\nconsole.log(\"a2 === a3\", a2 === a3);\n```\n\n```shell\na1 Symbol()\na2 Symbol(i am a)\na2 i am a\na2 === a3 false\n```\n\n* 从上可看到，`Symbol`是一个函数，它的返回值是一个`Symbol`类型的值，这个值是**唯一**的，即使传入相同的参数，也不会相等。\n* 入参的目的仅仅是为了描述它的来源。\n* `description`返回`Symbol`实例的描述。\n\n## 让我使用它\n\n假设如下代码：\n\n```typescript\nconst WOMAN = \"woman\";\nconst MAN = \"man\";\n\nfunction getSex(input) {\n  if (input === WOMAN) return 1;\n  if (input === MAN) return 2;\n}\n\nconsole.log(getSex(MAN));\n```\n\n但代码足够复杂，或出于粗心，几个常量的值设置为一样的字符串，怕是难以发现。那么用Symbol可以方便的保证其唯一性。\n\n```typescript\nconst WOMAN = Symbol();\nconst MAN = Symbol();\n// ...more\n```\n\n## Symbol 的全局注册\n\n直接看代码：\n\n```typescript\nfunction fn1() {\n  return Symbol(\"a\");\n}\n\nfunction fn2() {\n  return Symbol.for(\"a\");\n}\n\nconsole.log(\"fn1\", fn1() === fn1());\nconsole.log(\"fn2\", fn2() === fn2());\n```\n\n```shell\nfn1 false\nfn2 true\n```\n\n正如前面说的，`Symbol`函数的返回值肯定是不一样的，所以多次`fn1`的执行结果是不相等的。但是`Symbol.for`的执行结果是相等的，因为它是全局注册的。\n\n\n\n","source":"_posts/es6-symbol.md","raw":"---\ntitle: \"整理ES6：聊一聊Symbol \"\ndate: \"2023-07-06T06:35:00Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-symbol\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/15](https://github.com/taoliujun/blog/issues/15)\n\n<!--hexo\n---\nurl: es6-symbol\ntags:\n  - es6\n  - javascript\n---\n-->\n\n我在5年前看完`Symbol`，就将它抛之脑后，直到最近才重新研究，看看它是什么样的宝藏。\n\n先快速看下它是什么。\n\n## Symbol 基本用法\n\n```typescript\nconst a1 = Symbol();\nconst a2 = Symbol(\"i am a\");\nconst a3 = Symbol(\"i am a\");\n\nconsole.log(\"a1\", a1);\nconsole.log(\"a2\", a2);\nconsole.log(\"a2\", a2.description);\nconsole.log(\"a2 === a3\", a2 === a3);\n```\n\n```shell\na1 Symbol()\na2 Symbol(i am a)\na2 i am a\na2 === a3 false\n```\n\n* 从上可看到，`Symbol`是一个函数，它的返回值是一个`Symbol`类型的值，这个值是**唯一**的，即使传入相同的参数，也不会相等。\n* 入参的目的仅仅是为了描述它的来源。\n* `description`返回`Symbol`实例的描述。\n\n## 让我使用它\n\n假设如下代码：\n\n```typescript\nconst WOMAN = \"woman\";\nconst MAN = \"man\";\n\nfunction getSex(input) {\n  if (input === WOMAN) return 1;\n  if (input === MAN) return 2;\n}\n\nconsole.log(getSex(MAN));\n```\n\n但代码足够复杂，或出于粗心，几个常量的值设置为一样的字符串，怕是难以发现。那么用Symbol可以方便的保证其唯一性。\n\n```typescript\nconst WOMAN = Symbol();\nconst MAN = Symbol();\n// ...more\n```\n\n## Symbol 的全局注册\n\n直接看代码：\n\n```typescript\nfunction fn1() {\n  return Symbol(\"a\");\n}\n\nfunction fn2() {\n  return Symbol.for(\"a\");\n}\n\nconsole.log(\"fn1\", fn1() === fn1());\nconsole.log(\"fn2\", fn2() === fn2());\n```\n\n```shell\nfn1 false\nfn2 true\n```\n\n正如前面说的，`Symbol`函数的返回值肯定是不一样的，所以多次`fn1`的执行结果是不相等的。但是`Symbol.for`的执行结果是相等的，因为它是全局注册的。\n\n\n\n","slug":"es6-symbol","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvy0000kjaotckrf1agv","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/15\">https://github.com/taoliujun/blog/issues/15</a></p>\n<!--hexo\n---\nurl: es6-symbol\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>我在5年前看完<code>Symbol</code>，就将它抛之脑后，直到最近才重新研究，看看它是什么样的宝藏。</p>\n<p>先快速看下它是什么。</p>\n<h2 id=\"Symbol-基本用法\"><a href=\"#Symbol-基本用法\" class=\"headerlink\" title=\"Symbol 基本用法\"></a>Symbol 基本用法</h2><figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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> a1 = <span class=\"title class_\">Symbol</span>();</span><br><span class=\"line\"><span class=\"keyword\">const</span> a2 = <span class=\"title class_\">Symbol</span>(<span class=\"string\">&quot;i am a&quot;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> a3 = <span class=\"title class_\">Symbol</span>(<span class=\"string\">&quot;i am a&quot;</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=\"string\">&quot;a1&quot;</span>, a1);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;a2&quot;</span>, a2);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;a2&quot;</span>, a2.<span class=\"property\">description</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;a2 === a3&quot;</span>, a2 === a3);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><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\">a1 Symbol()</span><br><span class=\"line\">a2 Symbol(i am a)</span><br><span class=\"line\">a2 i am a</span><br><span class=\"line\">a2 === a3 false</span><br></pre></td></tr></table></figure>\n\n<ul>\n<li>从上可看到，<code>Symbol</code>是一个函数，它的返回值是一个<code>Symbol</code>类型的值，这个值是<strong>唯一</strong>的，即使传入相同的参数，也不会相等。</li>\n<li>入参的目的仅仅是为了描述它的来源。</li>\n<li><code>description</code>返回<code>Symbol</code>实例的描述。</li>\n</ul>\n<h2 id=\"让我使用它\"><a href=\"#让我使用它\" class=\"headerlink\" title=\"让我使用它\"></a>让我使用它</h2><p>假设如下代码：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><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=\"variable constant_\">WOMAN</span> = <span class=\"string\">&quot;woman&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"variable constant_\">MAN</span> = <span class=\"string\">&quot;man&quot;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">getSex</span>(<span class=\"params\">input</span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (input === <span class=\"variable constant_\">WOMAN</span>) <span class=\"keyword\">return</span> <span class=\"number\">1</span>;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (input === <span class=\"variable constant_\">MAN</span>) <span class=\"keyword\">return</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 function_\">getSex</span>(<span class=\"variable constant_\">MAN</span>));</span><br></pre></td></tr></table></figure>\n\n<p>但代码足够复杂，或出于粗心，几个常量的值设置为一样的字符串，怕是难以发现。那么用Symbol可以方便的保证其唯一性。</p>\n<figure class=\"highlight typescript\"><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> <span class=\"variable constant_\">WOMAN</span> = <span class=\"title class_\">Symbol</span>();</span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"variable constant_\">MAN</span> = <span class=\"title class_\">Symbol</span>();</span><br><span class=\"line\"><span class=\"comment\">// ...more</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Symbol-的全局注册\"><a href=\"#Symbol-的全局注册\" class=\"headerlink\" title=\"Symbol 的全局注册\"></a>Symbol 的全局注册</h2><p>直接看代码：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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_\">fn1</span>(<span class=\"params\"></span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"title class_\">Symbol</span>(<span class=\"string\">&quot;a&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_\">fn2</span>(<span class=\"params\"></span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"title class_\">Symbol</span>.<span class=\"title function_\">for</span>(<span class=\"string\">&quot;a&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;fn1&quot;</span>, <span class=\"title function_\">fn1</span>() === <span class=\"title function_\">fn1</span>());</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;fn2&quot;</span>, <span class=\"title function_\">fn2</span>() === <span class=\"title function_\">fn2</span>());</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><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\">fn1 false</span><br><span class=\"line\">fn2 true</span><br></pre></td></tr></table></figure>\n\n<p>正如前面说的，<code>Symbol</code>函数的返回值肯定是不一样的，所以多次<code>fn1</code>的执行结果是不相等的。但是<code>Symbol.for</code>的执行结果是相等的，因为它是全局注册的。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/15\">https://github.com/taoliujun/blog/issues/15</a></p>\n<!--hexo\n---\nurl: es6-symbol\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>我在5年前看完<code>Symbol</code>，就将它抛之脑后，直到最近才重新研究，看看它是什么样的宝藏。</p>\n<p>先快速看下它是什么。</p>\n<h2 id=\"Symbol-基本用法\"><a href=\"#Symbol-基本用法\" class=\"headerlink\" title=\"Symbol 基本用法\"></a>Symbol 基本用法</h2><figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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> a1 = <span class=\"title class_\">Symbol</span>();</span><br><span class=\"line\"><span class=\"keyword\">const</span> a2 = <span class=\"title class_\">Symbol</span>(<span class=\"string\">&quot;i am a&quot;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> a3 = <span class=\"title class_\">Symbol</span>(<span class=\"string\">&quot;i am a&quot;</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=\"string\">&quot;a1&quot;</span>, a1);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;a2&quot;</span>, a2);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;a2&quot;</span>, a2.<span class=\"property\">description</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;a2 === a3&quot;</span>, a2 === a3);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><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\">a1 Symbol()</span><br><span class=\"line\">a2 Symbol(i am a)</span><br><span class=\"line\">a2 i am a</span><br><span class=\"line\">a2 === a3 false</span><br></pre></td></tr></table></figure>\n\n<ul>\n<li>从上可看到，<code>Symbol</code>是一个函数，它的返回值是一个<code>Symbol</code>类型的值，这个值是<strong>唯一</strong>的，即使传入相同的参数，也不会相等。</li>\n<li>入参的目的仅仅是为了描述它的来源。</li>\n<li><code>description</code>返回<code>Symbol</code>实例的描述。</li>\n</ul>\n<h2 id=\"让我使用它\"><a href=\"#让我使用它\" class=\"headerlink\" title=\"让我使用它\"></a>让我使用它</h2><p>假设如下代码：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><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=\"variable constant_\">WOMAN</span> = <span class=\"string\">&quot;woman&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"variable constant_\">MAN</span> = <span class=\"string\">&quot;man&quot;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">getSex</span>(<span class=\"params\">input</span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (input === <span class=\"variable constant_\">WOMAN</span>) <span class=\"keyword\">return</span> <span class=\"number\">1</span>;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (input === <span class=\"variable constant_\">MAN</span>) <span class=\"keyword\">return</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 function_\">getSex</span>(<span class=\"variable constant_\">MAN</span>));</span><br></pre></td></tr></table></figure>\n\n<p>但代码足够复杂，或出于粗心，几个常量的值设置为一样的字符串，怕是难以发现。那么用Symbol可以方便的保证其唯一性。</p>\n<figure class=\"highlight typescript\"><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> <span class=\"variable constant_\">WOMAN</span> = <span class=\"title class_\">Symbol</span>();</span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"variable constant_\">MAN</span> = <span class=\"title class_\">Symbol</span>();</span><br><span class=\"line\"><span class=\"comment\">// ...more</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Symbol-的全局注册\"><a href=\"#Symbol-的全局注册\" class=\"headerlink\" title=\"Symbol 的全局注册\"></a>Symbol 的全局注册</h2><p>直接看代码：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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_\">fn1</span>(<span class=\"params\"></span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"title class_\">Symbol</span>(<span class=\"string\">&quot;a&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_\">fn2</span>(<span class=\"params\"></span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"title class_\">Symbol</span>.<span class=\"title function_\">for</span>(<span class=\"string\">&quot;a&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;fn1&quot;</span>, <span class=\"title function_\">fn1</span>() === <span class=\"title function_\">fn1</span>());</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;fn2&quot;</span>, <span class=\"title function_\">fn2</span>() === <span class=\"title function_\">fn2</span>());</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><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\">fn1 false</span><br><span class=\"line\">fn2 true</span><br></pre></td></tr></table></figure>\n\n<p>正如前面说的，<code>Symbol</code>函数的返回值肯定是不一样的，所以多次<code>fn1</code>的执行结果是不相等的。但是<code>Symbol.for</code>的执行结果是相等的，因为它是全局注册的。</p>\n"},{"title":"3. GitHub Actions - Examples","date":"2023-07-05T22:30:34.000Z","url":"github-actions-examples","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/7](https://github.com/taoliujun/blog/issues/7)\n\n<!--hexo\n---\nurl: github-actions-examples\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/examples/using-scripts-to-test-your-code-on-a-runner\n\n官方描述了3个例子，用来检测文件中的broken，我读书少，就依葫芦画瓢写一个eslint检测增量文件的功能，完成以下功能：\n\n* pull_request触发workflow。\n* 使用eslint检查pull request的增量文件。\n* 在pull request中回复检测结果。\n\n代码见：https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml\n\n\n\n","source":"_posts/github-actions-examples.md","raw":"---\ntitle: \"3. GitHub Actions - Examples\"\ndate: \"2023-07-06T06:30:34Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-examples\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/7](https://github.com/taoliujun/blog/issues/7)\n\n<!--hexo\n---\nurl: github-actions-examples\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/examples/using-scripts-to-test-your-code-on-a-runner\n\n官方描述了3个例子，用来检测文件中的broken，我读书少，就依葫芦画瓢写一个eslint检测增量文件的功能，完成以下功能：\n\n* pull_request触发workflow。\n* 使用eslint检查pull request的增量文件。\n* 在pull request中回复检测结果。\n\n代码见：https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml\n\n\n\n","slug":"github-actions-examples","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvy1000njaotb0p72f0f","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/7\">https://github.com/taoliujun/blog/issues/7</a></p>\n<!--hexo\n---\nurl: github-actions-examples\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/examples/using-scripts-to-test-your-code-on-a-runner\">https://docs.github.com/en/actions/examples/using-scripts-to-test-your-code-on-a-runner</a></p>\n<p>官方描述了3个例子，用来检测文件中的broken，我读书少，就依葫芦画瓢写一个eslint检测增量文件的功能，完成以下功能：</p>\n<ul>\n<li>pull_request触发workflow。</li>\n<li>使用eslint检查pull request的增量文件。</li>\n<li>在pull request中回复检测结果。</li>\n</ul>\n<p>代码见：<a href=\"https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml\">https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/7\">https://github.com/taoliujun/blog/issues/7</a></p>\n<!--hexo\n---\nurl: github-actions-examples\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/examples/using-scripts-to-test-your-code-on-a-runner\">https://docs.github.com/en/actions/examples/using-scripts-to-test-your-code-on-a-runner</a></p>\n<p>官方描述了3个例子，用来检测文件中的broken，我读书少，就依葫芦画瓢写一个eslint检测增量文件的功能，完成以下功能：</p>\n<ul>\n<li>pull_request触发workflow。</li>\n<li>使用eslint检查pull request的增量文件。</li>\n<li>在pull request中回复检测结果。</li>\n</ul>\n<p>代码见：<a href=\"https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml\">https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml</a></p>\n"},{"title":"0. GitHub Actions - Intro","date":"2023-07-05T22:27:24.000Z","url":"github-actions-intro","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/4](https://github.com/taoliujun/blog/issues/4)\n\n<!--hexo\n---\nurl: github-actions-intro\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions\n\n之前依葫芦画瓢使用了CI，并未对此做系统的了解，近期通读了一遍Github Actions文档，本系列文章是个人在 https://docs.github.com/en/actions 学习过程的杂乱记录，它是这样的：\n\n* 本文章系列不同于官方文档的中文翻译，只是加入个人理解的学习日记，内容不会完全覆盖。\n* 时间背景是 2023年12月份。\n* 按照官方文档的顺序做了笔记，但忽略了个人认为不重要的部分。\n* 都是经验主义的理解，并且由于本人英文水平有限，会有理解出错的地方。\n* 部分理解也未基于代码实际运行结果，纯属经验和猜测。\n* 因为文档术语翻译往往词不达意，所以会有很多中英参杂。\n\n## 是什么？\n\n既然你搜索到本文，想必是知道它是干什么的。我概括为：\n\n> GitHub Actions允许你在某些行为（比如push master分支）后，利用特定机器，执行脚本（比如eslint check），并反馈结果形成一个job。job可以串起来，以完成更复杂的自动化操作。\n\n## 和CI的关系\n\nCI/CD是执行自动化工作流的持续发布策略，它存在于gitlab、github、jekins，甚至你在服务器上写了一个简单的计划任务拉取仓库代码后进行打包的脚本，也可以称之为CI。\n\n在github.com上的CI就是GitHub Actions，它提供了一组特定的环境变量、上下文、宿主机器。\n\n\n\n\n","source":"_posts/github-actions-intro.md","raw":"---\ntitle: \"0. GitHub Actions - Intro\"\ndate: \"2023-07-06T06:27:24Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-intro\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/4](https://github.com/taoliujun/blog/issues/4)\n\n<!--hexo\n---\nurl: github-actions-intro\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions\n\n之前依葫芦画瓢使用了CI，并未对此做系统的了解，近期通读了一遍Github Actions文档，本系列文章是个人在 https://docs.github.com/en/actions 学习过程的杂乱记录，它是这样的：\n\n* 本文章系列不同于官方文档的中文翻译，只是加入个人理解的学习日记，内容不会完全覆盖。\n* 时间背景是 2023年12月份。\n* 按照官方文档的顺序做了笔记，但忽略了个人认为不重要的部分。\n* 都是经验主义的理解，并且由于本人英文水平有限，会有理解出错的地方。\n* 部分理解也未基于代码实际运行结果，纯属经验和猜测。\n* 因为文档术语翻译往往词不达意，所以会有很多中英参杂。\n\n## 是什么？\n\n既然你搜索到本文，想必是知道它是干什么的。我概括为：\n\n> GitHub Actions允许你在某些行为（比如push master分支）后，利用特定机器，执行脚本（比如eslint check），并反馈结果形成一个job。job可以串起来，以完成更复杂的自动化操作。\n\n## 和CI的关系\n\nCI/CD是执行自动化工作流的持续发布策略，它存在于gitlab、github、jekins，甚至你在服务器上写了一个简单的计划任务拉取仓库代码后进行打包的脚本，也可以称之为CI。\n\n在github.com上的CI就是GitHub Actions，它提供了一组特定的环境变量、上下文、宿主机器。\n\n\n\n\n","slug":"github-actions-intro","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvy2000qjaot7pv5e9k6","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/4\">https://github.com/taoliujun/blog/issues/4</a></p>\n<!--hexo\n---\nurl: github-actions-intro\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions\">https://docs.github.com/en/actions</a></p>\n<p>之前依葫芦画瓢使用了CI，并未对此做系统的了解，近期通读了一遍Github Actions文档，本系列文章是个人在 <a href=\"https://docs.github.com/en/actions\">https://docs.github.com/en/actions</a> 学习过程的杂乱记录，它是这样的：</p>\n<ul>\n<li>本文章系列不同于官方文档的中文翻译，只是加入个人理解的学习日记，内容不会完全覆盖。</li>\n<li>时间背景是 2023年12月份。</li>\n<li>按照官方文档的顺序做了笔记，但忽略了个人认为不重要的部分。</li>\n<li>都是经验主义的理解，并且由于本人英文水平有限，会有理解出错的地方。</li>\n<li>部分理解也未基于代码实际运行结果，纯属经验和猜测。</li>\n<li>因为文档术语翻译往往词不达意，所以会有很多中英参杂。</li>\n</ul>\n<h2 id=\"是什么？\"><a href=\"#是什么？\" class=\"headerlink\" title=\"是什么？\"></a>是什么？</h2><p>既然你搜索到本文，想必是知道它是干什么的。我概括为：</p>\n<blockquote>\n<p>GitHub Actions允许你在某些行为（比如push master分支）后，利用特定机器，执行脚本（比如eslint check），并反馈结果形成一个job。job可以串起来，以完成更复杂的自动化操作。</p>\n</blockquote>\n<h2 id=\"和CI的关系\"><a href=\"#和CI的关系\" class=\"headerlink\" title=\"和CI的关系\"></a>和CI的关系</h2><p>CI&#x2F;CD是执行自动化工作流的持续发布策略，它存在于gitlab、github、jekins，甚至你在服务器上写了一个简单的计划任务拉取仓库代码后进行打包的脚本，也可以称之为CI。</p>\n<p>在github.com上的CI就是GitHub Actions，它提供了一组特定的环境变量、上下文、宿主机器。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/4\">https://github.com/taoliujun/blog/issues/4</a></p>\n<!--hexo\n---\nurl: github-actions-intro\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions\">https://docs.github.com/en/actions</a></p>\n<p>之前依葫芦画瓢使用了CI，并未对此做系统的了解，近期通读了一遍Github Actions文档，本系列文章是个人在 <a href=\"https://docs.github.com/en/actions\">https://docs.github.com/en/actions</a> 学习过程的杂乱记录，它是这样的：</p>\n<ul>\n<li>本文章系列不同于官方文档的中文翻译，只是加入个人理解的学习日记，内容不会完全覆盖。</li>\n<li>时间背景是 2023年12月份。</li>\n<li>按照官方文档的顺序做了笔记，但忽略了个人认为不重要的部分。</li>\n<li>都是经验主义的理解，并且由于本人英文水平有限，会有理解出错的地方。</li>\n<li>部分理解也未基于代码实际运行结果，纯属经验和猜测。</li>\n<li>因为文档术语翻译往往词不达意，所以会有很多中英参杂。</li>\n</ul>\n<h2 id=\"是什么？\"><a href=\"#是什么？\" class=\"headerlink\" title=\"是什么？\"></a>是什么？</h2><p>既然你搜索到本文，想必是知道它是干什么的。我概括为：</p>\n<blockquote>\n<p>GitHub Actions允许你在某些行为（比如push master分支）后，利用特定机器，执行脚本（比如eslint check），并反馈结果形成一个job。job可以串起来，以完成更复杂的自动化操作。</p>\n</blockquote>\n<h2 id=\"和CI的关系\"><a href=\"#和CI的关系\" class=\"headerlink\" title=\"和CI的关系\"></a>和CI的关系</h2><p>CI&#x2F;CD是执行自动化工作流的持续发布策略，它存在于gitlab、github、jekins，甚至你在服务器上写了一个简单的计划任务拉取仓库代码后进行打包的脚本，也可以称之为CI。</p>\n<p>在github.com上的CI就是GitHub Actions，它提供了一组特定的环境变量、上下文、宿主机器。</p>\n"},{"title":"5. GitHub Actions - Using jobs","date":"2023-07-05T22:31:40.000Z","url":"github-actions-jobs","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/9](https://github.com/taoliujun/blog/issues/9)\n\n<!--hexo\n---\nurl: github-actions-jobs\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/using-jobs/using-jobs-in-a-workflow\n\n## 使用jobs\n\n* jobs组成workflow，jobs默认并行执行，使用needs管理依赖执行。\n* job id命名要唯一，由字母、数字、-、_组成。\n\n## 使用runner\n\n可以使用github提供的机器，也可以自建机器，没啥其他重要的。\n\n## 执行条件\n\n执行if表达式的结果，决定是否执行本job。举例：\n\n```yaml\nname: example-workflow\non: [push]\njobs:\n  production-deploy:\n    if: github.repository == 'octo-org/octo-repo-prod'\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: '14'\n      - run: npm install -g bats\n```\n\n## 矩阵\n晦涩的词语，理解为遍历变量创建重复执行的job，如下，该job将执行6次，在两个runner上分别执行3种node版本的job。\n\n```yaml\njobs:\n  example_matrix:\n    strategy:\n      matrix:\n        os: [ubuntu-22.04, ubuntu-20.04]\n        version: [10, 12, 14]\n    runs-on: ${{ matrix.os }}\n    steps:\n      - uses: actions/setup-node@v3\n        with:\n          node-version: ${{ matrix.version }}\n```\n\n也可以使用上下文创建matrix变量。\n\nmatrix还支持自身简单的覆盖扩展，参考文档即可。\n\n## 并发策略\n\n同时只能运行一个符合策略的job或workflow，并决定是否终止同组的job或workflow。\n\n## 环境\n\n无\n\n## 容器\n\n暂时用不到，无\n\n## 默认值\n\n可以在workflow和job级别分别设置默认值，目前支持设置`shell`、`working-directory`。\n\n\n\n","source":"_posts/github-actions-jobs.md","raw":"---\ntitle: \"5. GitHub Actions - Using jobs\"\ndate: \"2023-07-06T06:31:40Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-jobs\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/9](https://github.com/taoliujun/blog/issues/9)\n\n<!--hexo\n---\nurl: github-actions-jobs\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/using-jobs/using-jobs-in-a-workflow\n\n## 使用jobs\n\n* jobs组成workflow，jobs默认并行执行，使用needs管理依赖执行。\n* job id命名要唯一，由字母、数字、-、_组成。\n\n## 使用runner\n\n可以使用github提供的机器，也可以自建机器，没啥其他重要的。\n\n## 执行条件\n\n执行if表达式的结果，决定是否执行本job。举例：\n\n```yaml\nname: example-workflow\non: [push]\njobs:\n  production-deploy:\n    if: github.repository == 'octo-org/octo-repo-prod'\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: '14'\n      - run: npm install -g bats\n```\n\n## 矩阵\n晦涩的词语，理解为遍历变量创建重复执行的job，如下，该job将执行6次，在两个runner上分别执行3种node版本的job。\n\n```yaml\njobs:\n  example_matrix:\n    strategy:\n      matrix:\n        os: [ubuntu-22.04, ubuntu-20.04]\n        version: [10, 12, 14]\n    runs-on: ${{ matrix.os }}\n    steps:\n      - uses: actions/setup-node@v3\n        with:\n          node-version: ${{ matrix.version }}\n```\n\n也可以使用上下文创建matrix变量。\n\nmatrix还支持自身简单的覆盖扩展，参考文档即可。\n\n## 并发策略\n\n同时只能运行一个符合策略的job或workflow，并决定是否终止同组的job或workflow。\n\n## 环境\n\n无\n\n## 容器\n\n暂时用不到，无\n\n## 默认值\n\n可以在workflow和job级别分别设置默认值，目前支持设置`shell`、`working-directory`。\n\n\n\n","slug":"github-actions-jobs","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvy3000sjaot3njb3qkh","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/9\">https://github.com/taoliujun/blog/issues/9</a></p>\n<!--hexo\n---\nurl: github-actions-jobs\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/using-jobs/using-jobs-in-a-workflow\">https://docs.github.com/en/actions/using-jobs/using-jobs-in-a-workflow</a></p>\n<h2 id=\"使用jobs\"><a href=\"#使用jobs\" class=\"headerlink\" title=\"使用jobs\"></a>使用jobs</h2><ul>\n<li>jobs组成workflow，jobs默认并行执行，使用needs管理依赖执行。</li>\n<li>job id命名要唯一，由字母、数字、-、_组成。</li>\n</ul>\n<h2 id=\"使用runner\"><a href=\"#使用runner\" class=\"headerlink\" title=\"使用runner\"></a>使用runner</h2><p>可以使用github提供的机器，也可以自建机器，没啥其他重要的。</p>\n<h2 id=\"执行条件\"><a href=\"#执行条件\" class=\"headerlink\" title=\"执行条件\"></a>执行条件</h2><p>执行if表达式的结果，决定是否执行本job。举例：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><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=\"attr\">name:</span> <span class=\"string\">example-workflow</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">production-deploy:</span></span><br><span class=\"line\">    <span class=\"attr\">if:</span> <span class=\"string\">github.repository</span> <span class=\"string\">==</span> <span class=\"string\">&#x27;octo-org/octo-repo-prod&#x27;</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3</span></span><br><span class=\"line\">        <span class=\"attr\">with:</span></span><br><span class=\"line\">          <span class=\"attr\">node-version:</span> <span class=\"string\">&#x27;14&#x27;</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">npm</span> <span class=\"string\">install</span> <span class=\"string\">-g</span> <span class=\"string\">bats</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"矩阵\"><a href=\"#矩阵\" class=\"headerlink\" title=\"矩阵\"></a>矩阵</h2><p>晦涩的词语，理解为遍历变量创建重复执行的job，如下，该job将执行6次，在两个runner上分别执行3种node版本的job。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">example_matrix:</span></span><br><span class=\"line\">    <span class=\"attr\">strategy:</span></span><br><span class=\"line\">      <span class=\"attr\">matrix:</span></span><br><span class=\"line\">        <span class=\"attr\">os:</span> [<span class=\"string\">ubuntu-22.04</span>, <span class=\"string\">ubuntu-20.04</span>]</span><br><span class=\"line\">        <span class=\"attr\">version:</span> [<span class=\"number\">10</span>, <span class=\"number\">12</span>, <span class=\"number\">14</span>]</span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">matrix.os</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3</span></span><br><span class=\"line\">        <span class=\"attr\">with:</span></span><br><span class=\"line\">          <span class=\"attr\">node-version:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">matrix.version</span> <span class=\"string\">&#125;&#125;</span></span><br></pre></td></tr></table></figure>\n\n<p>也可以使用上下文创建matrix变量。</p>\n<p>matrix还支持自身简单的覆盖扩展，参考文档即可。</p>\n<h2 id=\"并发策略\"><a href=\"#并发策略\" class=\"headerlink\" title=\"并发策略\"></a>并发策略</h2><p>同时只能运行一个符合策略的job或workflow，并决定是否终止同组的job或workflow。</p>\n<h2 id=\"环境\"><a href=\"#环境\" class=\"headerlink\" title=\"环境\"></a>环境</h2><p>无</p>\n<h2 id=\"容器\"><a href=\"#容器\" class=\"headerlink\" title=\"容器\"></a>容器</h2><p>暂时用不到，无</p>\n<h2 id=\"默认值\"><a href=\"#默认值\" class=\"headerlink\" title=\"默认值\"></a>默认值</h2><p>可以在workflow和job级别分别设置默认值，目前支持设置<code>shell</code>、<code>working-directory</code>。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/9\">https://github.com/taoliujun/blog/issues/9</a></p>\n<!--hexo\n---\nurl: github-actions-jobs\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/using-jobs/using-jobs-in-a-workflow\">https://docs.github.com/en/actions/using-jobs/using-jobs-in-a-workflow</a></p>\n<h2 id=\"使用jobs\"><a href=\"#使用jobs\" class=\"headerlink\" title=\"使用jobs\"></a>使用jobs</h2><ul>\n<li>jobs组成workflow，jobs默认并行执行，使用needs管理依赖执行。</li>\n<li>job id命名要唯一，由字母、数字、-、_组成。</li>\n</ul>\n<h2 id=\"使用runner\"><a href=\"#使用runner\" class=\"headerlink\" title=\"使用runner\"></a>使用runner</h2><p>可以使用github提供的机器，也可以自建机器，没啥其他重要的。</p>\n<h2 id=\"执行条件\"><a href=\"#执行条件\" class=\"headerlink\" title=\"执行条件\"></a>执行条件</h2><p>执行if表达式的结果，决定是否执行本job。举例：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><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=\"attr\">name:</span> <span class=\"string\">example-workflow</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">production-deploy:</span></span><br><span class=\"line\">    <span class=\"attr\">if:</span> <span class=\"string\">github.repository</span> <span class=\"string\">==</span> <span class=\"string\">&#x27;octo-org/octo-repo-prod&#x27;</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3</span></span><br><span class=\"line\">        <span class=\"attr\">with:</span></span><br><span class=\"line\">          <span class=\"attr\">node-version:</span> <span class=\"string\">&#x27;14&#x27;</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">npm</span> <span class=\"string\">install</span> <span class=\"string\">-g</span> <span class=\"string\">bats</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"矩阵\"><a href=\"#矩阵\" class=\"headerlink\" title=\"矩阵\"></a>矩阵</h2><p>晦涩的词语，理解为遍历变量创建重复执行的job，如下，该job将执行6次，在两个runner上分别执行3种node版本的job。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">example_matrix:</span></span><br><span class=\"line\">    <span class=\"attr\">strategy:</span></span><br><span class=\"line\">      <span class=\"attr\">matrix:</span></span><br><span class=\"line\">        <span class=\"attr\">os:</span> [<span class=\"string\">ubuntu-22.04</span>, <span class=\"string\">ubuntu-20.04</span>]</span><br><span class=\"line\">        <span class=\"attr\">version:</span> [<span class=\"number\">10</span>, <span class=\"number\">12</span>, <span class=\"number\">14</span>]</span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">matrix.os</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3</span></span><br><span class=\"line\">        <span class=\"attr\">with:</span></span><br><span class=\"line\">          <span class=\"attr\">node-version:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">matrix.version</span> <span class=\"string\">&#125;&#125;</span></span><br></pre></td></tr></table></figure>\n\n<p>也可以使用上下文创建matrix变量。</p>\n<p>matrix还支持自身简单的覆盖扩展，参考文档即可。</p>\n<h2 id=\"并发策略\"><a href=\"#并发策略\" class=\"headerlink\" title=\"并发策略\"></a>并发策略</h2><p>同时只能运行一个符合策略的job或workflow，并决定是否终止同组的job或workflow。</p>\n<h2 id=\"环境\"><a href=\"#环境\" class=\"headerlink\" title=\"环境\"></a>环境</h2><p>无</p>\n<h2 id=\"容器\"><a href=\"#容器\" class=\"headerlink\" title=\"容器\"></a>容器</h2><p>暂时用不到，无</p>\n<h2 id=\"默认值\"><a href=\"#默认值\" class=\"headerlink\" title=\"默认值\"></a>默认值</h2><p>可以在workflow和job级别分别设置默认值，目前支持设置<code>shell</code>、<code>working-directory</code>。</p>\n"},{"title":"2. GitHub Actions - Learn GitHub Actions","date":"2023-07-05T22:29:53.000Z","url":"github-actions-learn","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/6](https://github.com/taoliujun/blog/issues/6)\n\n<!--hexo\n---\nurl: github-actions-learn\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions\n\n官方文档有点长，阅读了两天，容易让人阅读瞌睡，除了要熟知术语部分，其他部分看一遍知道有这些东西就行了，回头使用的时候翻看官方文档即可。\n\n## 理解GitHub Actions和术语\n\nGitHub Actions就是通过事件触发工作流，在特定机器中执行一连串工作，每个工作中执行若干个步骤的脚本。\n\n使用人类行为来举例，我说：“老婆，你去炒个青椒炒肉丝吧。”\n\n* 口头说话（Events）会触发老婆的工作流（Workflows）：炒青椒肉丝。\n* 工作流包含了两个工作（Jobs）：配菜、炒菜。\n* 配菜工作包含多个步骤（Steps）：清洗青椒、切青椒丝、清洗猪肉、切猪肉丝。\n* 老婆有一个绞肉机（Actions），它可以完成切猪肉丝的工作而不需要关注细节。\n\n它包含了下面几个重要的术语。\n\n### Workflows（工作流）\n\n项目有若干个工作流，它们在不同的事件时机触发。比如，口头说话触发炒青椒肉丝。\n\n工作流还可以互相引用。比如，做一顿晚饭工作流，包含了炒青椒肉丝工作流。\n\n### Events（事件）\n\nGithub提供了一系列触发工作流的事件，比如发起了pull request，create issue，push commit。\n\n它还包括两种特殊的事件：\n\n* 手动触发，比如你想执行工作流看看全量eslint检测结果。\n* 计划任务，比如你想每月30号看看全量eslint检测结果。\n\n### Jobs（工作）\n\nWorkflows由多个Jobs组成。\n\n每个Job运行在**同一机器上**，执行很多步骤的脚本，脚本可以是自定义的shell（比如自己切肉丝，要关注细节：使用什么刀，每个肉丝有多细），也可以是封装好的Actions（比如绞肉机）。\n\n**步骤按顺序执行**，可以共享数据，比如切青椒的步骤，可以读取到青椒清洗的农药残留数据。\n\n**工作还可以依赖**，默认情况下，工作并行执行，但有些场景工作是依赖的，比如炒菜工作，要依赖于配菜工作的完成。\n\n### Actions（脚本动作封装）\n\n顾名思义，就是将通用的动作封装起来，方便整个宇宙的程序员去使用。比如绞肉机就是将切肉丝的动作封装了起来。\n\n可以在Github Marketplace中找到和分享Actions.\n\n### Runners（运行的机器）\n\n工作流不能凭空执行，它也是运行在机器上的，它可以是虚拟机、docker容器。Github提供了 Ubuntu Linux、Microsoft Windows、MacOS这几种机器来执行工作流，注意一个限制：**一个机器同时只能执行一个Job**。\n\n如果官方的机器不能满足你，也可以自动自己的机器来跑工作流，后续会讲到。\n\n## 使用Actions\n\n上面说到Actions是脚本的封装，它可以是社区市场中的Actions，也可以是自定义Actions，甚至是一个Docker镜像。\n\n### Marketplace方式\n\nGithub提供了界面操作，让我们可以方便的在工作流中维护Actions，只要我们在浏览器中编辑yml文件，右侧就出现了Actions市场，可以点开某个Actions，查看它的详细配置。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281126235.png)\n​\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127958.png)\n\n对照着Actions的文档，我在Workflow中插入node。现在，我的配置文件长这样：\n\n```yaml\nname: lint\non: [push]\njobs:\n    eslint:\n        runs-on: ubuntu-latest\n        steps:\n            - name: Check out repository code\n              uses: actions/checkout@v3\n            - name: use node\n              uses: actions/setup-node@v3.3.0\n              with:\n                  node-version: latest\n            - run: node -v\n```\n\n然后，查看执行结果。\n​\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127692.png)\n\n### 自己的Actions\n\n还可以在自己的仓库里添加Actions，这里就贴官方原例子了。\n\n```shell\n|-- root (repository)\n|   |__ .github\n|       └── workflows\n|           └── my-first-workflow.yml\n|       └── actions\n|           |__ hello-world-action\n|               └── action.yml\n```\n\nExample workflow file:\n\n```yaml\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      # This step checks out a copy of your repository.\n      - uses: actions/checkout@v3\n      # This step references the directory that contains the action.\n      - uses: ./.github/actions/hello-world-action\n```\n\n### 公共的Actions\n\n```yaml\nuses: actions/setup-node@v3\n```\n\n使用其他Github仓库的Actions就是如此简单，我们常使用的actions/***，其实也属于公共仓库，它们是由官方维护的一组Actions，比较稳定。点击此处可以看到官方的Actions。\n\n### Docker镜像\n\n如果Runners和开源Actions都不能满足你，可以搞docker来执行Workflows。\n\n因本人的docker水平属于“哇，我能启动docker，我真厉害”，就不展开讲了。\n\n### 不同版本的Actions\n\nActions本质上是仓库里的文件，它会有版本区分，我们有好几种方法使用它：\n\n```yaml\n# 使用tag\nuses: actions/javascript-action@v1.0.1\n# 使用commitID\nuses: actions/javascript-action@172239021f7ba04fe7327647b213799853a9eb89\n# 使用branch\nuses: actions/javascript-action@main\n```\n\n## 基本特性\n\n这部分文档看的云里雾里的，讲了一些如何使用变量，如何在Jobs里共享数据，不知道这些内容出现在这里的目的是什么，略过。\n\n## 表达式\n\n支持在配置中使用表达式，我简单的记录了下，实际使用需要参照官方文档，它包含了以下。\n\n### 变量\n支持`boolean`，`null`，`number`，`string` 类型。如下：\n\n```yaml\nenv:\n  myNull: ${{ null }}\n  myBoolean: ${{ false }}\n  myIntegerNumber: ${{ 711 }}\n  myString: Mona the Octocat\n  myStringInBraces: ${{ 'It''s open source!' }}\n```\n\n### 操作符\n\n一些如值比较、逻辑与、逻辑或的操作，不一一列举了。\n\n注意不是强类型的比较，有一些值转换的逻辑。\n\n### 内置方法\n\n提供了一些内置方法辅助表达式，比如 `contains` 判断是否包含某个字符，不一一列举了。\n\n### 状态处理\n\nJobs的每个步骤会按顺序执行，我们可以在某个步骤中加入对“已经执行的步骤”的状态判断，来决定是否要执行当前步骤。比如，只有青椒清洗步骤成功了，才执行青椒切丝步骤。举例：\n\n```yaml\nsteps:\n  ...\n  # 前面的步骤都执行成功了，再执行该步骤\n  - name: The job has succeeded\n    if: ${{ success() }}\n```\n\n它还有以下几种状态结果：\n\n* **always**，只要执行了\n* **success**，执行成功了\n* **cancelled**，执行取消了\n* **failure**，执行失败了\n\n## 上下文（重要）\n\n上下文指工作流运行中可以访问的属性，你可以在**表达式中**访问上下文，比如访问当前仓库的地址`github.repositoryUrl`。它是**job串起来的重要保障**。\n\n它提供了一组模块的上下文：github、env、job、steps、runner、needs等等。\n\n如下演示了一个简单的上下文访问：\n\n```yaml\nname: CI\non: push\njobs:\n  prod-check:\n    if: ${{ github.ref == 'refs/heads/main' }}\n    runs-on: ubuntu-latest\n    steps:\n      - run: echo \"hello ${{ github.actor }}, branch is $GITHUB_REF\"\n```\n\n重要点：\n\n* 在不同的节点，上下文的可访问性有所不同，文档贴出了表格，这在使用的时候要注意。\n* env由内往外覆盖\n\n## 环境变量\n\n还可以在Workflows、Jobs、Steps中设置和访问环境变量。\n\n```yaml\nname: lint\non: [push]\nenv:\n    YOUR_NAME: wang\njobs:\n    eslint:\n        runs-on: ubuntu-latest\n        env:\n            YOUR_SEX: boy\n        steps:\n            - name: test\n              env:\n                  YOUR_AGE: 18\n              run: echo \"Hello, ${{ env.YOUR_NAME }}, your sex is $YOUR_SEX, your age is $YOUR_AGE\"\n```\n\n也提供一系列系统环境变量供访问，注意避开同名。\n\n## 收费和限制\n\n略\n\n\n\n\n","source":"_posts/github-actions-learn.md","raw":"---\ntitle: \"2. GitHub Actions - Learn GitHub Actions\"\ndate: \"2023-07-06T06:29:53Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-learn\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/6](https://github.com/taoliujun/blog/issues/6)\n\n<!--hexo\n---\nurl: github-actions-learn\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions\n\n官方文档有点长，阅读了两天，容易让人阅读瞌睡，除了要熟知术语部分，其他部分看一遍知道有这些东西就行了，回头使用的时候翻看官方文档即可。\n\n## 理解GitHub Actions和术语\n\nGitHub Actions就是通过事件触发工作流，在特定机器中执行一连串工作，每个工作中执行若干个步骤的脚本。\n\n使用人类行为来举例，我说：“老婆，你去炒个青椒炒肉丝吧。”\n\n* 口头说话（Events）会触发老婆的工作流（Workflows）：炒青椒肉丝。\n* 工作流包含了两个工作（Jobs）：配菜、炒菜。\n* 配菜工作包含多个步骤（Steps）：清洗青椒、切青椒丝、清洗猪肉、切猪肉丝。\n* 老婆有一个绞肉机（Actions），它可以完成切猪肉丝的工作而不需要关注细节。\n\n它包含了下面几个重要的术语。\n\n### Workflows（工作流）\n\n项目有若干个工作流，它们在不同的事件时机触发。比如，口头说话触发炒青椒肉丝。\n\n工作流还可以互相引用。比如，做一顿晚饭工作流，包含了炒青椒肉丝工作流。\n\n### Events（事件）\n\nGithub提供了一系列触发工作流的事件，比如发起了pull request，create issue，push commit。\n\n它还包括两种特殊的事件：\n\n* 手动触发，比如你想执行工作流看看全量eslint检测结果。\n* 计划任务，比如你想每月30号看看全量eslint检测结果。\n\n### Jobs（工作）\n\nWorkflows由多个Jobs组成。\n\n每个Job运行在**同一机器上**，执行很多步骤的脚本，脚本可以是自定义的shell（比如自己切肉丝，要关注细节：使用什么刀，每个肉丝有多细），也可以是封装好的Actions（比如绞肉机）。\n\n**步骤按顺序执行**，可以共享数据，比如切青椒的步骤，可以读取到青椒清洗的农药残留数据。\n\n**工作还可以依赖**，默认情况下，工作并行执行，但有些场景工作是依赖的，比如炒菜工作，要依赖于配菜工作的完成。\n\n### Actions（脚本动作封装）\n\n顾名思义，就是将通用的动作封装起来，方便整个宇宙的程序员去使用。比如绞肉机就是将切肉丝的动作封装了起来。\n\n可以在Github Marketplace中找到和分享Actions.\n\n### Runners（运行的机器）\n\n工作流不能凭空执行，它也是运行在机器上的，它可以是虚拟机、docker容器。Github提供了 Ubuntu Linux、Microsoft Windows、MacOS这几种机器来执行工作流，注意一个限制：**一个机器同时只能执行一个Job**。\n\n如果官方的机器不能满足你，也可以自动自己的机器来跑工作流，后续会讲到。\n\n## 使用Actions\n\n上面说到Actions是脚本的封装，它可以是社区市场中的Actions，也可以是自定义Actions，甚至是一个Docker镜像。\n\n### Marketplace方式\n\nGithub提供了界面操作，让我们可以方便的在工作流中维护Actions，只要我们在浏览器中编辑yml文件，右侧就出现了Actions市场，可以点开某个Actions，查看它的详细配置。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281126235.png)\n​\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127958.png)\n\n对照着Actions的文档，我在Workflow中插入node。现在，我的配置文件长这样：\n\n```yaml\nname: lint\non: [push]\njobs:\n    eslint:\n        runs-on: ubuntu-latest\n        steps:\n            - name: Check out repository code\n              uses: actions/checkout@v3\n            - name: use node\n              uses: actions/setup-node@v3.3.0\n              with:\n                  node-version: latest\n            - run: node -v\n```\n\n然后，查看执行结果。\n​\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127692.png)\n\n### 自己的Actions\n\n还可以在自己的仓库里添加Actions，这里就贴官方原例子了。\n\n```shell\n|-- root (repository)\n|   |__ .github\n|       └── workflows\n|           └── my-first-workflow.yml\n|       └── actions\n|           |__ hello-world-action\n|               └── action.yml\n```\n\nExample workflow file:\n\n```yaml\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      # This step checks out a copy of your repository.\n      - uses: actions/checkout@v3\n      # This step references the directory that contains the action.\n      - uses: ./.github/actions/hello-world-action\n```\n\n### 公共的Actions\n\n```yaml\nuses: actions/setup-node@v3\n```\n\n使用其他Github仓库的Actions就是如此简单，我们常使用的actions/***，其实也属于公共仓库，它们是由官方维护的一组Actions，比较稳定。点击此处可以看到官方的Actions。\n\n### Docker镜像\n\n如果Runners和开源Actions都不能满足你，可以搞docker来执行Workflows。\n\n因本人的docker水平属于“哇，我能启动docker，我真厉害”，就不展开讲了。\n\n### 不同版本的Actions\n\nActions本质上是仓库里的文件，它会有版本区分，我们有好几种方法使用它：\n\n```yaml\n# 使用tag\nuses: actions/javascript-action@v1.0.1\n# 使用commitID\nuses: actions/javascript-action@172239021f7ba04fe7327647b213799853a9eb89\n# 使用branch\nuses: actions/javascript-action@main\n```\n\n## 基本特性\n\n这部分文档看的云里雾里的，讲了一些如何使用变量，如何在Jobs里共享数据，不知道这些内容出现在这里的目的是什么，略过。\n\n## 表达式\n\n支持在配置中使用表达式，我简单的记录了下，实际使用需要参照官方文档，它包含了以下。\n\n### 变量\n支持`boolean`，`null`，`number`，`string` 类型。如下：\n\n```yaml\nenv:\n  myNull: ${{ null }}\n  myBoolean: ${{ false }}\n  myIntegerNumber: ${{ 711 }}\n  myString: Mona the Octocat\n  myStringInBraces: ${{ 'It''s open source!' }}\n```\n\n### 操作符\n\n一些如值比较、逻辑与、逻辑或的操作，不一一列举了。\n\n注意不是强类型的比较，有一些值转换的逻辑。\n\n### 内置方法\n\n提供了一些内置方法辅助表达式，比如 `contains` 判断是否包含某个字符，不一一列举了。\n\n### 状态处理\n\nJobs的每个步骤会按顺序执行，我们可以在某个步骤中加入对“已经执行的步骤”的状态判断，来决定是否要执行当前步骤。比如，只有青椒清洗步骤成功了，才执行青椒切丝步骤。举例：\n\n```yaml\nsteps:\n  ...\n  # 前面的步骤都执行成功了，再执行该步骤\n  - name: The job has succeeded\n    if: ${{ success() }}\n```\n\n它还有以下几种状态结果：\n\n* **always**，只要执行了\n* **success**，执行成功了\n* **cancelled**，执行取消了\n* **failure**，执行失败了\n\n## 上下文（重要）\n\n上下文指工作流运行中可以访问的属性，你可以在**表达式中**访问上下文，比如访问当前仓库的地址`github.repositoryUrl`。它是**job串起来的重要保障**。\n\n它提供了一组模块的上下文：github、env、job、steps、runner、needs等等。\n\n如下演示了一个简单的上下文访问：\n\n```yaml\nname: CI\non: push\njobs:\n  prod-check:\n    if: ${{ github.ref == 'refs/heads/main' }}\n    runs-on: ubuntu-latest\n    steps:\n      - run: echo \"hello ${{ github.actor }}, branch is $GITHUB_REF\"\n```\n\n重要点：\n\n* 在不同的节点，上下文的可访问性有所不同，文档贴出了表格，这在使用的时候要注意。\n* env由内往外覆盖\n\n## 环境变量\n\n还可以在Workflows、Jobs、Steps中设置和访问环境变量。\n\n```yaml\nname: lint\non: [push]\nenv:\n    YOUR_NAME: wang\njobs:\n    eslint:\n        runs-on: ubuntu-latest\n        env:\n            YOUR_SEX: boy\n        steps:\n            - name: test\n              env:\n                  YOUR_AGE: 18\n              run: echo \"Hello, ${{ env.YOUR_NAME }}, your sex is $YOUR_SEX, your age is $YOUR_AGE\"\n```\n\n也提供一系列系统环境变量供访问，注意避开同名。\n\n## 收费和限制\n\n略\n\n\n\n\n","slug":"github-actions-learn","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvy3000ujaot0c50f62v","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/6\">https://github.com/taoliujun/blog/issues/6</a></p>\n<!--hexo\n---\nurl: github-actions-learn\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions\">https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions</a></p>\n<p>官方文档有点长，阅读了两天，容易让人阅读瞌睡，除了要熟知术语部分，其他部分看一遍知道有这些东西就行了，回头使用的时候翻看官方文档即可。</p>\n<h2 id=\"理解GitHub-Actions和术语\"><a href=\"#理解GitHub-Actions和术语\" class=\"headerlink\" title=\"理解GitHub Actions和术语\"></a>理解GitHub Actions和术语</h2><p>GitHub Actions就是通过事件触发工作流，在特定机器中执行一连串工作，每个工作中执行若干个步骤的脚本。</p>\n<p>使用人类行为来举例，我说：“老婆，你去炒个青椒炒肉丝吧。”</p>\n<ul>\n<li>口头说话（Events）会触发老婆的工作流（Workflows）：炒青椒肉丝。</li>\n<li>工作流包含了两个工作（Jobs）：配菜、炒菜。</li>\n<li>配菜工作包含多个步骤（Steps）：清洗青椒、切青椒丝、清洗猪肉、切猪肉丝。</li>\n<li>老婆有一个绞肉机（Actions），它可以完成切猪肉丝的工作而不需要关注细节。</li>\n</ul>\n<p>它包含了下面几个重要的术语。</p>\n<h3 id=\"Workflows（工作流）\"><a href=\"#Workflows（工作流）\" class=\"headerlink\" title=\"Workflows（工作流）\"></a>Workflows（工作流）</h3><p>项目有若干个工作流，它们在不同的事件时机触发。比如，口头说话触发炒青椒肉丝。</p>\n<p>工作流还可以互相引用。比如，做一顿晚饭工作流，包含了炒青椒肉丝工作流。</p>\n<h3 id=\"Events（事件）\"><a href=\"#Events（事件）\" class=\"headerlink\" title=\"Events（事件）\"></a>Events（事件）</h3><p>Github提供了一系列触发工作流的事件，比如发起了pull request，create issue，push commit。</p>\n<p>它还包括两种特殊的事件：</p>\n<ul>\n<li>手动触发，比如你想执行工作流看看全量eslint检测结果。</li>\n<li>计划任务，比如你想每月30号看看全量eslint检测结果。</li>\n</ul>\n<h3 id=\"Jobs（工作）\"><a href=\"#Jobs（工作）\" class=\"headerlink\" title=\"Jobs（工作）\"></a>Jobs（工作）</h3><p>Workflows由多个Jobs组成。</p>\n<p>每个Job运行在<strong>同一机器上</strong>，执行很多步骤的脚本，脚本可以是自定义的shell（比如自己切肉丝，要关注细节：使用什么刀，每个肉丝有多细），也可以是封装好的Actions（比如绞肉机）。</p>\n<p><strong>步骤按顺序执行</strong>，可以共享数据，比如切青椒的步骤，可以读取到青椒清洗的农药残留数据。</p>\n<p><strong>工作还可以依赖</strong>，默认情况下，工作并行执行，但有些场景工作是依赖的，比如炒菜工作，要依赖于配菜工作的完成。</p>\n<h3 id=\"Actions（脚本动作封装）\"><a href=\"#Actions（脚本动作封装）\" class=\"headerlink\" title=\"Actions（脚本动作封装）\"></a>Actions（脚本动作封装）</h3><p>顾名思义，就是将通用的动作封装起来，方便整个宇宙的程序员去使用。比如绞肉机就是将切肉丝的动作封装了起来。</p>\n<p>可以在Github Marketplace中找到和分享Actions.</p>\n<h3 id=\"Runners（运行的机器）\"><a href=\"#Runners（运行的机器）\" class=\"headerlink\" title=\"Runners（运行的机器）\"></a>Runners（运行的机器）</h3><p>工作流不能凭空执行，它也是运行在机器上的，它可以是虚拟机、docker容器。Github提供了 Ubuntu Linux、Microsoft Windows、MacOS这几种机器来执行工作流，注意一个限制：<strong>一个机器同时只能执行一个Job</strong>。</p>\n<p>如果官方的机器不能满足你，也可以自动自己的机器来跑工作流，后续会讲到。</p>\n<h2 id=\"使用Actions\"><a href=\"#使用Actions\" class=\"headerlink\" title=\"使用Actions\"></a>使用Actions</h2><p>上面说到Actions是脚本的封装，它可以是社区市场中的Actions，也可以是自定义Actions，甚至是一个Docker镜像。</p>\n<h3 id=\"Marketplace方式\"><a href=\"#Marketplace方式\" class=\"headerlink\" title=\"Marketplace方式\"></a>Marketplace方式</h3><p>Github提供了界面操作，让我们可以方便的在工作流中维护Actions，只要我们在浏览器中编辑yml文件，右侧就出现了Actions市场，可以点开某个Actions，查看它的详细配置。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281126235.png\"><br>​<br><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127958.png\"></p>\n<p>对照着Actions的文档，我在Workflow中插入node。现在，我的配置文件长这样：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><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=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Check</span> <span class=\"string\">out</span> <span class=\"string\">repository</span> <span class=\"string\">code</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">use</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3.3.0</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"string\">latest</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">node</span> <span class=\"string\">-v</span></span><br></pre></td></tr></table></figure>\n\n<p>然后，查看执行结果。<br>​<br><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127692.png\"></p>\n<h3 id=\"自己的Actions\"><a href=\"#自己的Actions\" class=\"headerlink\" title=\"自己的Actions\"></a>自己的Actions</h3><p>还可以在自己的仓库里添加Actions，这里就贴官方原例子了。</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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\">|-- root (repository)</span><br><span class=\"line\">|   |__ .github</span><br><span class=\"line\">|       └── workflows</span><br><span class=\"line\">|           └── my-first-workflow.yml</span><br><span class=\"line\">|       └── actions</span><br><span class=\"line\">|           |__ hello-world-action</span><br><span class=\"line\">|               └── action.yml</span><br></pre></td></tr></table></figure>\n\n<p>Example workflow file:</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">build:</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"comment\"># This step checks out a copy of your repository.</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">      <span class=\"comment\"># This step references the directory that contains the action.</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">./.github/actions/hello-world-action</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"公共的Actions\"><a href=\"#公共的Actions\" class=\"headerlink\" title=\"公共的Actions\"></a>公共的Actions</h3><figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3</span></span><br></pre></td></tr></table></figure>\n\n<p>使用其他Github仓库的Actions就是如此简单，我们常使用的actions&#x2F;***，其实也属于公共仓库，它们是由官方维护的一组Actions，比较稳定。点击此处可以看到官方的Actions。</p>\n<h3 id=\"Docker镜像\"><a href=\"#Docker镜像\" class=\"headerlink\" title=\"Docker镜像\"></a>Docker镜像</h3><p>如果Runners和开源Actions都不能满足你，可以搞docker来执行Workflows。</p>\n<p>因本人的docker水平属于“哇，我能启动docker，我真厉害”，就不展开讲了。</p>\n<h3 id=\"不同版本的Actions\"><a href=\"#不同版本的Actions\" class=\"headerlink\" title=\"不同版本的Actions\"></a>不同版本的Actions</h3><p>Actions本质上是仓库里的文件，它会有版本区分，我们有好几种方法使用它：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\"># 使用tag</span></span><br><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/javascript-action@v1.0.1</span></span><br><span class=\"line\"><span class=\"comment\"># 使用commitID</span></span><br><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/javascript-action@172239021f7ba04fe7327647b213799853a9eb89</span></span><br><span class=\"line\"><span class=\"comment\"># 使用branch</span></span><br><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/javascript-action@main</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"基本特性\"><a href=\"#基本特性\" class=\"headerlink\" title=\"基本特性\"></a>基本特性</h2><p>这部分文档看的云里雾里的，讲了一些如何使用变量，如何在Jobs里共享数据，不知道这些内容出现在这里的目的是什么，略过。</p>\n<h2 id=\"表达式\"><a href=\"#表达式\" class=\"headerlink\" title=\"表达式\"></a>表达式</h2><p>支持在配置中使用表达式，我简单的记录了下，实际使用需要参照官方文档，它包含了以下。</p>\n<h3 id=\"变量\"><a href=\"#变量\" class=\"headerlink\" title=\"变量\"></a>变量</h3><p>支持<code>boolean</code>，<code>null</code>，<code>number</code>，<code>string</code> 类型。如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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=\"attr\">env:</span></span><br><span class=\"line\">  <span class=\"attr\">myNull:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"literal\">null</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">  <span class=\"attr\">myBoolean:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"literal\">false</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">  <span class=\"attr\">myIntegerNumber:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"number\">711</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">  <span class=\"attr\">myString:</span> <span class=\"string\">Mona</span> <span class=\"string\">the</span> <span class=\"string\">Octocat</span></span><br><span class=\"line\">  <span class=\"attr\">myStringInBraces:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">&#x27;It&#x27;</span><span class=\"string\">&#x27;s open source!&#x27;</span> <span class=\"string\">&#125;&#125;</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"操作符\"><a href=\"#操作符\" class=\"headerlink\" title=\"操作符\"></a>操作符</h3><p>一些如值比较、逻辑与、逻辑或的操作，不一一列举了。</p>\n<p>注意不是强类型的比较，有一些值转换的逻辑。</p>\n<h3 id=\"内置方法\"><a href=\"#内置方法\" class=\"headerlink\" title=\"内置方法\"></a>内置方法</h3><p>提供了一些内置方法辅助表达式，比如 <code>contains</code> 判断是否包含某个字符，不一一列举了。</p>\n<h3 id=\"状态处理\"><a href=\"#状态处理\" class=\"headerlink\" title=\"状态处理\"></a>状态处理</h3><p>Jobs的每个步骤会按顺序执行，我们可以在某个步骤中加入对“已经执行的步骤”的状态判断，来决定是否要执行当前步骤。比如，只有青椒清洗步骤成功了，才执行青椒切丝步骤。举例：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"attr\">steps:</span></span><br><span class=\"line\">  <span class=\"string\">...</span></span><br><span class=\"line\">  <span class=\"comment\"># 前面的步骤都执行成功了，再执行该步骤</span></span><br><span class=\"line\">  <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">The</span> <span class=\"string\">job</span> <span class=\"string\">has</span> <span class=\"string\">succeeded</span></span><br><span class=\"line\">    <span class=\"attr\">if:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">success()</span> <span class=\"string\">&#125;&#125;</span></span><br></pre></td></tr></table></figure>\n\n<p>它还有以下几种状态结果：</p>\n<ul>\n<li><strong>always</strong>，只要执行了</li>\n<li><strong>success</strong>，执行成功了</li>\n<li><strong>cancelled</strong>，执行取消了</li>\n<li><strong>failure</strong>，执行失败了</li>\n</ul>\n<h2 id=\"上下文（重要）\"><a href=\"#上下文（重要）\" class=\"headerlink\" title=\"上下文（重要）\"></a>上下文（重要）</h2><p>上下文指工作流运行中可以访问的属性，你可以在<strong>表达式中</strong>访问上下文，比如访问当前仓库的地址<code>github.repositoryUrl</code>。它是<strong>job串起来的重要保障</strong>。</p>\n<p>它提供了一组模块的上下文：github、env、job、steps、runner、needs等等。</p>\n<p>如下演示了一个简单的上下文访问：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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=\"attr\">name:</span> <span class=\"string\">CI</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> <span class=\"string\">push</span></span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">prod-check:</span></span><br><span class=\"line\">    <span class=\"attr\">if:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.ref</span> <span class=\"string\">==</span> <span class=\"string\">&#x27;refs/heads/main&#x27;</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;hello $<span class=\"template-variable\">&#123;&#123; github.actor &#125;&#125;</span>, branch is $GITHUB_REF&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>重要点：</p>\n<ul>\n<li>在不同的节点，上下文的可访问性有所不同，文档贴出了表格，这在使用的时候要注意。</li>\n<li>env由内往外覆盖</li>\n</ul>\n<h2 id=\"环境变量\"><a href=\"#环境变量\" class=\"headerlink\" title=\"环境变量\"></a>环境变量</h2><p>还可以在Workflows、Jobs、Steps中设置和访问环境变量。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">env:</span></span><br><span class=\"line\">    <span class=\"attr\">YOUR_NAME:</span> <span class=\"string\">wang</span></span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">env:</span></span><br><span class=\"line\">            <span class=\"attr\">YOUR_SEX:</span> <span class=\"string\">boy</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">test</span></span><br><span class=\"line\">              <span class=\"attr\">env:</span></span><br><span class=\"line\">                  <span class=\"attr\">YOUR_AGE:</span> <span class=\"number\">18</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;Hello, $<span class=\"template-variable\">&#123;&#123; env.YOUR_NAME &#125;&#125;</span>, your sex is $YOUR_SEX, your age is $YOUR_AGE&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>也提供一系列系统环境变量供访问，注意避开同名。</p>\n<h2 id=\"收费和限制\"><a href=\"#收费和限制\" class=\"headerlink\" title=\"收费和限制\"></a>收费和限制</h2><p>略</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/6\">https://github.com/taoliujun/blog/issues/6</a></p>\n<!--hexo\n---\nurl: github-actions-learn\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions\">https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions</a></p>\n<p>官方文档有点长，阅读了两天，容易让人阅读瞌睡，除了要熟知术语部分，其他部分看一遍知道有这些东西就行了，回头使用的时候翻看官方文档即可。</p>\n<h2 id=\"理解GitHub-Actions和术语\"><a href=\"#理解GitHub-Actions和术语\" class=\"headerlink\" title=\"理解GitHub Actions和术语\"></a>理解GitHub Actions和术语</h2><p>GitHub Actions就是通过事件触发工作流，在特定机器中执行一连串工作，每个工作中执行若干个步骤的脚本。</p>\n<p>使用人类行为来举例，我说：“老婆，你去炒个青椒炒肉丝吧。”</p>\n<ul>\n<li>口头说话（Events）会触发老婆的工作流（Workflows）：炒青椒肉丝。</li>\n<li>工作流包含了两个工作（Jobs）：配菜、炒菜。</li>\n<li>配菜工作包含多个步骤（Steps）：清洗青椒、切青椒丝、清洗猪肉、切猪肉丝。</li>\n<li>老婆有一个绞肉机（Actions），它可以完成切猪肉丝的工作而不需要关注细节。</li>\n</ul>\n<p>它包含了下面几个重要的术语。</p>\n<h3 id=\"Workflows（工作流）\"><a href=\"#Workflows（工作流）\" class=\"headerlink\" title=\"Workflows（工作流）\"></a>Workflows（工作流）</h3><p>项目有若干个工作流，它们在不同的事件时机触发。比如，口头说话触发炒青椒肉丝。</p>\n<p>工作流还可以互相引用。比如，做一顿晚饭工作流，包含了炒青椒肉丝工作流。</p>\n<h3 id=\"Events（事件）\"><a href=\"#Events（事件）\" class=\"headerlink\" title=\"Events（事件）\"></a>Events（事件）</h3><p>Github提供了一系列触发工作流的事件，比如发起了pull request，create issue，push commit。</p>\n<p>它还包括两种特殊的事件：</p>\n<ul>\n<li>手动触发，比如你想执行工作流看看全量eslint检测结果。</li>\n<li>计划任务，比如你想每月30号看看全量eslint检测结果。</li>\n</ul>\n<h3 id=\"Jobs（工作）\"><a href=\"#Jobs（工作）\" class=\"headerlink\" title=\"Jobs（工作）\"></a>Jobs（工作）</h3><p>Workflows由多个Jobs组成。</p>\n<p>每个Job运行在<strong>同一机器上</strong>，执行很多步骤的脚本，脚本可以是自定义的shell（比如自己切肉丝，要关注细节：使用什么刀，每个肉丝有多细），也可以是封装好的Actions（比如绞肉机）。</p>\n<p><strong>步骤按顺序执行</strong>，可以共享数据，比如切青椒的步骤，可以读取到青椒清洗的农药残留数据。</p>\n<p><strong>工作还可以依赖</strong>，默认情况下，工作并行执行，但有些场景工作是依赖的，比如炒菜工作，要依赖于配菜工作的完成。</p>\n<h3 id=\"Actions（脚本动作封装）\"><a href=\"#Actions（脚本动作封装）\" class=\"headerlink\" title=\"Actions（脚本动作封装）\"></a>Actions（脚本动作封装）</h3><p>顾名思义，就是将通用的动作封装起来，方便整个宇宙的程序员去使用。比如绞肉机就是将切肉丝的动作封装了起来。</p>\n<p>可以在Github Marketplace中找到和分享Actions.</p>\n<h3 id=\"Runners（运行的机器）\"><a href=\"#Runners（运行的机器）\" class=\"headerlink\" title=\"Runners（运行的机器）\"></a>Runners（运行的机器）</h3><p>工作流不能凭空执行，它也是运行在机器上的，它可以是虚拟机、docker容器。Github提供了 Ubuntu Linux、Microsoft Windows、MacOS这几种机器来执行工作流，注意一个限制：<strong>一个机器同时只能执行一个Job</strong>。</p>\n<p>如果官方的机器不能满足你，也可以自动自己的机器来跑工作流，后续会讲到。</p>\n<h2 id=\"使用Actions\"><a href=\"#使用Actions\" class=\"headerlink\" title=\"使用Actions\"></a>使用Actions</h2><p>上面说到Actions是脚本的封装，它可以是社区市场中的Actions，也可以是自定义Actions，甚至是一个Docker镜像。</p>\n<h3 id=\"Marketplace方式\"><a href=\"#Marketplace方式\" class=\"headerlink\" title=\"Marketplace方式\"></a>Marketplace方式</h3><p>Github提供了界面操作，让我们可以方便的在工作流中维护Actions，只要我们在浏览器中编辑yml文件，右侧就出现了Actions市场，可以点开某个Actions，查看它的详细配置。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281126235.png\"><br>​<br><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127958.png\"></p>\n<p>对照着Actions的文档，我在Workflow中插入node。现在，我的配置文件长这样：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><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=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Check</span> <span class=\"string\">out</span> <span class=\"string\">repository</span> <span class=\"string\">code</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">use</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3.3.0</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"string\">latest</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">node</span> <span class=\"string\">-v</span></span><br></pre></td></tr></table></figure>\n\n<p>然后，查看执行结果。<br>​<br><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127692.png\"></p>\n<h3 id=\"自己的Actions\"><a href=\"#自己的Actions\" class=\"headerlink\" title=\"自己的Actions\"></a>自己的Actions</h3><p>还可以在自己的仓库里添加Actions，这里就贴官方原例子了。</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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\">|-- root (repository)</span><br><span class=\"line\">|   |__ .github</span><br><span class=\"line\">|       └── workflows</span><br><span class=\"line\">|           └── my-first-workflow.yml</span><br><span class=\"line\">|       └── actions</span><br><span class=\"line\">|           |__ hello-world-action</span><br><span class=\"line\">|               └── action.yml</span><br></pre></td></tr></table></figure>\n\n<p>Example workflow file:</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">build:</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"comment\"># This step checks out a copy of your repository.</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">      <span class=\"comment\"># This step references the directory that contains the action.</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">./.github/actions/hello-world-action</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"公共的Actions\"><a href=\"#公共的Actions\" class=\"headerlink\" title=\"公共的Actions\"></a>公共的Actions</h3><figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3</span></span><br></pre></td></tr></table></figure>\n\n<p>使用其他Github仓库的Actions就是如此简单，我们常使用的actions&#x2F;***，其实也属于公共仓库，它们是由官方维护的一组Actions，比较稳定。点击此处可以看到官方的Actions。</p>\n<h3 id=\"Docker镜像\"><a href=\"#Docker镜像\" class=\"headerlink\" title=\"Docker镜像\"></a>Docker镜像</h3><p>如果Runners和开源Actions都不能满足你，可以搞docker来执行Workflows。</p>\n<p>因本人的docker水平属于“哇，我能启动docker，我真厉害”，就不展开讲了。</p>\n<h3 id=\"不同版本的Actions\"><a href=\"#不同版本的Actions\" class=\"headerlink\" title=\"不同版本的Actions\"></a>不同版本的Actions</h3><p>Actions本质上是仓库里的文件，它会有版本区分，我们有好几种方法使用它：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\"># 使用tag</span></span><br><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/javascript-action@v1.0.1</span></span><br><span class=\"line\"><span class=\"comment\"># 使用commitID</span></span><br><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/javascript-action@172239021f7ba04fe7327647b213799853a9eb89</span></span><br><span class=\"line\"><span class=\"comment\"># 使用branch</span></span><br><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/javascript-action@main</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"基本特性\"><a href=\"#基本特性\" class=\"headerlink\" title=\"基本特性\"></a>基本特性</h2><p>这部分文档看的云里雾里的，讲了一些如何使用变量，如何在Jobs里共享数据，不知道这些内容出现在这里的目的是什么，略过。</p>\n<h2 id=\"表达式\"><a href=\"#表达式\" class=\"headerlink\" title=\"表达式\"></a>表达式</h2><p>支持在配置中使用表达式，我简单的记录了下，实际使用需要参照官方文档，它包含了以下。</p>\n<h3 id=\"变量\"><a href=\"#变量\" class=\"headerlink\" title=\"变量\"></a>变量</h3><p>支持<code>boolean</code>，<code>null</code>，<code>number</code>，<code>string</code> 类型。如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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=\"attr\">env:</span></span><br><span class=\"line\">  <span class=\"attr\">myNull:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"literal\">null</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">  <span class=\"attr\">myBoolean:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"literal\">false</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">  <span class=\"attr\">myIntegerNumber:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"number\">711</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">  <span class=\"attr\">myString:</span> <span class=\"string\">Mona</span> <span class=\"string\">the</span> <span class=\"string\">Octocat</span></span><br><span class=\"line\">  <span class=\"attr\">myStringInBraces:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">&#x27;It&#x27;</span><span class=\"string\">&#x27;s open source!&#x27;</span> <span class=\"string\">&#125;&#125;</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"操作符\"><a href=\"#操作符\" class=\"headerlink\" title=\"操作符\"></a>操作符</h3><p>一些如值比较、逻辑与、逻辑或的操作，不一一列举了。</p>\n<p>注意不是强类型的比较，有一些值转换的逻辑。</p>\n<h3 id=\"内置方法\"><a href=\"#内置方法\" class=\"headerlink\" title=\"内置方法\"></a>内置方法</h3><p>提供了一些内置方法辅助表达式，比如 <code>contains</code> 判断是否包含某个字符，不一一列举了。</p>\n<h3 id=\"状态处理\"><a href=\"#状态处理\" class=\"headerlink\" title=\"状态处理\"></a>状态处理</h3><p>Jobs的每个步骤会按顺序执行，我们可以在某个步骤中加入对“已经执行的步骤”的状态判断，来决定是否要执行当前步骤。比如，只有青椒清洗步骤成功了，才执行青椒切丝步骤。举例：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"attr\">steps:</span></span><br><span class=\"line\">  <span class=\"string\">...</span></span><br><span class=\"line\">  <span class=\"comment\"># 前面的步骤都执行成功了，再执行该步骤</span></span><br><span class=\"line\">  <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">The</span> <span class=\"string\">job</span> <span class=\"string\">has</span> <span class=\"string\">succeeded</span></span><br><span class=\"line\">    <span class=\"attr\">if:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">success()</span> <span class=\"string\">&#125;&#125;</span></span><br></pre></td></tr></table></figure>\n\n<p>它还有以下几种状态结果：</p>\n<ul>\n<li><strong>always</strong>，只要执行了</li>\n<li><strong>success</strong>，执行成功了</li>\n<li><strong>cancelled</strong>，执行取消了</li>\n<li><strong>failure</strong>，执行失败了</li>\n</ul>\n<h2 id=\"上下文（重要）\"><a href=\"#上下文（重要）\" class=\"headerlink\" title=\"上下文（重要）\"></a>上下文（重要）</h2><p>上下文指工作流运行中可以访问的属性，你可以在<strong>表达式中</strong>访问上下文，比如访问当前仓库的地址<code>github.repositoryUrl</code>。它是<strong>job串起来的重要保障</strong>。</p>\n<p>它提供了一组模块的上下文：github、env、job、steps、runner、needs等等。</p>\n<p>如下演示了一个简单的上下文访问：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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=\"attr\">name:</span> <span class=\"string\">CI</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> <span class=\"string\">push</span></span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">prod-check:</span></span><br><span class=\"line\">    <span class=\"attr\">if:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.ref</span> <span class=\"string\">==</span> <span class=\"string\">&#x27;refs/heads/main&#x27;</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;hello $<span class=\"template-variable\">&#123;&#123; github.actor &#125;&#125;</span>, branch is $GITHUB_REF&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>重要点：</p>\n<ul>\n<li>在不同的节点，上下文的可访问性有所不同，文档贴出了表格，这在使用的时候要注意。</li>\n<li>env由内往外覆盖</li>\n</ul>\n<h2 id=\"环境变量\"><a href=\"#环境变量\" class=\"headerlink\" title=\"环境变量\"></a>环境变量</h2><p>还可以在Workflows、Jobs、Steps中设置和访问环境变量。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">env:</span></span><br><span class=\"line\">    <span class=\"attr\">YOUR_NAME:</span> <span class=\"string\">wang</span></span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">env:</span></span><br><span class=\"line\">            <span class=\"attr\">YOUR_SEX:</span> <span class=\"string\">boy</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">test</span></span><br><span class=\"line\">              <span class=\"attr\">env:</span></span><br><span class=\"line\">                  <span class=\"attr\">YOUR_AGE:</span> <span class=\"number\">18</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;Hello, $<span class=\"template-variable\">&#123;&#123; env.YOUR_NAME &#125;&#125;</span>, your sex is $YOUR_SEX, your age is $YOUR_AGE&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>也提供一系列系统环境变量供访问，注意避开同名。</p>\n<h2 id=\"收费和限制\"><a href=\"#收费和限制\" class=\"headerlink\" title=\"收费和限制\"></a>收费和限制</h2><p>略</p>\n"},{"title":"1. GitHub Actions - Quickstart","date":"2023-07-05T22:29:06.000Z","url":"github-actions-quickstart","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/5](https://github.com/taoliujun/blog/issues/5)\n\n<!--hexo\n---\nurl: github-actions-quickstart\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/quickstart\n\n本文里，因为还没有讲术语的意思，所以用中文描述了基本的执行过程，后续的文章里会用原术语来表达，以防理解不一。\n\n文档说，只要有仓库，就可以使用Actions。\n\n依葫芦画瓢，在本地创建 `.github/workflows` 目录，在目录里创建任意文件，以.yml结尾，我创建了 `lint.yml`：\n\n```yaml\nname: lint\non: [push]\njobs:\n    eslint:\n        runs-on: ubuntu-latest\n        steps:\n            - run: echo \"The job was automatically triggered by a ${{ github.event_name }} event.\"\n            - name: Check out repository code\n              uses: actions/checkout@v3\n            - name: List files in the repository\n              run: ls ${{ github.workspace }}\n            - run: echo \"  This job's status is ${{ job.status }}.\"\n```\n\n配置文件有很多术语在后面的笔记中讲解，对于上面的配置简单的解释下：\n\n```yaml\n# 这个工作流的名字: lint\nname: lint\n# 在分支push的时候触发\non: [push]\n# 工作列表，例子里只做一个eslint工作\njobs:\n    # 这一步工作名叫做eslint\n    eslint:\n        # 代码执行在ubuntu-latest的宿主里，注：ubuntu-latest是github提供的免费的宿主。\n        runs-on: ubuntu-latest\n        # 执行哪些代码\n        steps:\n            # 执行一个普通的shell脚本，就是 echo '巴拉巴拉巴拉巴拉一段话'，这段话里的${{github.event_name}}\n            # 是一个变量，这个变量由actions上下文提供，望文生义，event_name是事件名称的意思\n            - run: echo \"  The job was automatically triggered by a ${{ github.event_name }} event.\"\n            # 为这一步脚本定一个名字，叫做 巴拉巴拉\n            - name: Check out repository code\n              # 我们使用别人提供的封装好的脚本，这里的意思是使用官方提供的 actions/checkout 的脚本的v3版本\n              uses: actions/checkout@v3\n            # 又定义一个名字，叫做 巴拉巴拉\n            - name: List files in the repository\n              # 再一次运行自定义的脚本，列出目录结构，这儿又使用了一个变量\n              run: ls ${{ github.workspace }}\n            # 最后再执行一个自定义脚本，输出一段话，包含了当前工作的执行状态\n            - run: echo \"  This job's status is ${{ job.status }}.\"\n```\n\n而后，将代码推送到github仓库，我们进入仓库页面，点击 Actions 面板，看到 workflows记录，进入详情看到类似面板。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281119773.png)\n\n这个面板展示了lint.yml这个工作流的执行状态，它列出所有的工作及其状态以及执行时间。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281120264.png)\n\n进入工作流的执行详情，可以看到每个工作的每一步脚本的详细执行过程和输出结果，就不一一表述了，后续会讲到。\n\n\n\n","source":"_posts/github-actions-quickstart.md","raw":"---\ntitle: \"1. GitHub Actions - Quickstart\"\ndate: \"2023-07-06T06:29:06Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-quickstart\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/5](https://github.com/taoliujun/blog/issues/5)\n\n<!--hexo\n---\nurl: github-actions-quickstart\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/quickstart\n\n本文里，因为还没有讲术语的意思，所以用中文描述了基本的执行过程，后续的文章里会用原术语来表达，以防理解不一。\n\n文档说，只要有仓库，就可以使用Actions。\n\n依葫芦画瓢，在本地创建 `.github/workflows` 目录，在目录里创建任意文件，以.yml结尾，我创建了 `lint.yml`：\n\n```yaml\nname: lint\non: [push]\njobs:\n    eslint:\n        runs-on: ubuntu-latest\n        steps:\n            - run: echo \"The job was automatically triggered by a ${{ github.event_name }} event.\"\n            - name: Check out repository code\n              uses: actions/checkout@v3\n            - name: List files in the repository\n              run: ls ${{ github.workspace }}\n            - run: echo \"  This job's status is ${{ job.status }}.\"\n```\n\n配置文件有很多术语在后面的笔记中讲解，对于上面的配置简单的解释下：\n\n```yaml\n# 这个工作流的名字: lint\nname: lint\n# 在分支push的时候触发\non: [push]\n# 工作列表，例子里只做一个eslint工作\njobs:\n    # 这一步工作名叫做eslint\n    eslint:\n        # 代码执行在ubuntu-latest的宿主里，注：ubuntu-latest是github提供的免费的宿主。\n        runs-on: ubuntu-latest\n        # 执行哪些代码\n        steps:\n            # 执行一个普通的shell脚本，就是 echo '巴拉巴拉巴拉巴拉一段话'，这段话里的${{github.event_name}}\n            # 是一个变量，这个变量由actions上下文提供，望文生义，event_name是事件名称的意思\n            - run: echo \"  The job was automatically triggered by a ${{ github.event_name }} event.\"\n            # 为这一步脚本定一个名字，叫做 巴拉巴拉\n            - name: Check out repository code\n              # 我们使用别人提供的封装好的脚本，这里的意思是使用官方提供的 actions/checkout 的脚本的v3版本\n              uses: actions/checkout@v3\n            # 又定义一个名字，叫做 巴拉巴拉\n            - name: List files in the repository\n              # 再一次运行自定义的脚本，列出目录结构，这儿又使用了一个变量\n              run: ls ${{ github.workspace }}\n            # 最后再执行一个自定义脚本，输出一段话，包含了当前工作的执行状态\n            - run: echo \"  This job's status is ${{ job.status }}.\"\n```\n\n而后，将代码推送到github仓库，我们进入仓库页面，点击 Actions 面板，看到 workflows记录，进入详情看到类似面板。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281119773.png)\n\n这个面板展示了lint.yml这个工作流的执行状态，它列出所有的工作及其状态以及执行时间。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281120264.png)\n\n进入工作流的执行详情，可以看到每个工作的每一步脚本的详细执行过程和输出结果，就不一一表述了，后续会讲到。\n\n\n\n","slug":"github-actions-quickstart","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvy4000yjaot9qx41ilj","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/5\">https://github.com/taoliujun/blog/issues/5</a></p>\n<!--hexo\n---\nurl: github-actions-quickstart\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/quickstart\">https://docs.github.com/en/actions/quickstart</a></p>\n<p>本文里，因为还没有讲术语的意思，所以用中文描述了基本的执行过程，后续的文章里会用原术语来表达，以防理解不一。</p>\n<p>文档说，只要有仓库，就可以使用Actions。</p>\n<p>依葫芦画瓢，在本地创建 <code>.github/workflows</code> 目录，在目录里创建任意文件，以.yml结尾，我创建了 <code>lint.yml</code>：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><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=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;The job was automatically triggered by a $<span class=\"template-variable\">&#123;&#123; github.event_name &#125;&#125;</span> event.&quot;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Check</span> <span class=\"string\">out</span> <span class=\"string\">repository</span> <span class=\"string\">code</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">List</span> <span class=\"string\">files</span> <span class=\"string\">in</span> <span class=\"string\">the</span> <span class=\"string\">repository</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">ls</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workspace</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;  This job&#x27;s status is $<span class=\"template-variable\">&#123;&#123; job.status &#125;&#125;</span>.&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>配置文件有很多术语在后面的笔记中讲解，对于上面的配置简单的解释下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"comment\"># 这个工作流的名字: lint</span></span><br><span class=\"line\"><span class=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"comment\"># 在分支push的时候触发</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"comment\"># 工作列表，例子里只做一个eslint工作</span></span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"comment\"># 这一步工作名叫做eslint</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"comment\"># 代码执行在ubuntu-latest的宿主里，注：ubuntu-latest是github提供的免费的宿主。</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"comment\"># 执行哪些代码</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"comment\"># 执行一个普通的shell脚本，就是 echo &#x27;巴拉巴拉巴拉巴拉一段话&#x27;，这段话里的$&#123;&#123;github.event_name&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"comment\"># 是一个变量，这个变量由actions上下文提供，望文生义，event_name是事件名称的意思</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;  The job was automatically triggered by a $<span class=\"template-variable\">&#123;&#123; github.event_name &#125;&#125;</span> event.&quot;</span></span><br><span class=\"line\">            <span class=\"comment\"># 为这一步脚本定一个名字，叫做 巴拉巴拉</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Check</span> <span class=\"string\">out</span> <span class=\"string\">repository</span> <span class=\"string\">code</span></span><br><span class=\"line\">              <span class=\"comment\"># 我们使用别人提供的封装好的脚本，这里的意思是使用官方提供的 actions/checkout 的脚本的v3版本</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">            <span class=\"comment\"># 又定义一个名字，叫做 巴拉巴拉</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">List</span> <span class=\"string\">files</span> <span class=\"string\">in</span> <span class=\"string\">the</span> <span class=\"string\">repository</span></span><br><span class=\"line\">              <span class=\"comment\"># 再一次运行自定义的脚本，列出目录结构，这儿又使用了一个变量</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">ls</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workspace</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"comment\"># 最后再执行一个自定义脚本，输出一段话，包含了当前工作的执行状态</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;  This job&#x27;s status is $<span class=\"template-variable\">&#123;&#123; job.status &#125;&#125;</span>.&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>而后，将代码推送到github仓库，我们进入仓库页面，点击 Actions 面板，看到 workflows记录，进入详情看到类似面板。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281119773.png\"></p>\n<p>这个面板展示了lint.yml这个工作流的执行状态，它列出所有的工作及其状态以及执行时间。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281120264.png\"></p>\n<p>进入工作流的执行详情，可以看到每个工作的每一步脚本的详细执行过程和输出结果，就不一一表述了，后续会讲到。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/5\">https://github.com/taoliujun/blog/issues/5</a></p>\n<!--hexo\n---\nurl: github-actions-quickstart\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/quickstart\">https://docs.github.com/en/actions/quickstart</a></p>\n<p>本文里，因为还没有讲术语的意思，所以用中文描述了基本的执行过程，后续的文章里会用原术语来表达，以防理解不一。</p>\n<p>文档说，只要有仓库，就可以使用Actions。</p>\n<p>依葫芦画瓢，在本地创建 <code>.github/workflows</code> 目录，在目录里创建任意文件，以.yml结尾，我创建了 <code>lint.yml</code>：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><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=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;The job was automatically triggered by a $<span class=\"template-variable\">&#123;&#123; github.event_name &#125;&#125;</span> event.&quot;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Check</span> <span class=\"string\">out</span> <span class=\"string\">repository</span> <span class=\"string\">code</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">List</span> <span class=\"string\">files</span> <span class=\"string\">in</span> <span class=\"string\">the</span> <span class=\"string\">repository</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">ls</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workspace</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;  This job&#x27;s status is $<span class=\"template-variable\">&#123;&#123; job.status &#125;&#125;</span>.&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>配置文件有很多术语在后面的笔记中讲解，对于上面的配置简单的解释下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"comment\"># 这个工作流的名字: lint</span></span><br><span class=\"line\"><span class=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"comment\"># 在分支push的时候触发</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"comment\"># 工作列表，例子里只做一个eslint工作</span></span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"comment\"># 这一步工作名叫做eslint</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"comment\"># 代码执行在ubuntu-latest的宿主里，注：ubuntu-latest是github提供的免费的宿主。</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"comment\"># 执行哪些代码</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"comment\"># 执行一个普通的shell脚本，就是 echo &#x27;巴拉巴拉巴拉巴拉一段话&#x27;，这段话里的$&#123;&#123;github.event_name&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"comment\"># 是一个变量，这个变量由actions上下文提供，望文生义，event_name是事件名称的意思</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;  The job was automatically triggered by a $<span class=\"template-variable\">&#123;&#123; github.event_name &#125;&#125;</span> event.&quot;</span></span><br><span class=\"line\">            <span class=\"comment\"># 为这一步脚本定一个名字，叫做 巴拉巴拉</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Check</span> <span class=\"string\">out</span> <span class=\"string\">repository</span> <span class=\"string\">code</span></span><br><span class=\"line\">              <span class=\"comment\"># 我们使用别人提供的封装好的脚本，这里的意思是使用官方提供的 actions/checkout 的脚本的v3版本</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">            <span class=\"comment\"># 又定义一个名字，叫做 巴拉巴拉</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">List</span> <span class=\"string\">files</span> <span class=\"string\">in</span> <span class=\"string\">the</span> <span class=\"string\">repository</span></span><br><span class=\"line\">              <span class=\"comment\"># 再一次运行自定义的脚本，列出目录结构，这儿又使用了一个变量</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">ls</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workspace</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"comment\"># 最后再执行一个自定义脚本，输出一段话，包含了当前工作的执行状态</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;  This job&#x27;s status is $<span class=\"template-variable\">&#123;&#123; job.status &#125;&#125;</span>.&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>而后，将代码推送到github仓库，我们进入仓库页面，点击 Actions 面板，看到 workflows记录，进入详情看到类似面板。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281119773.png\"></p>\n<p>这个面板展示了lint.yml这个工作流的执行状态，它列出所有的工作及其状态以及执行时间。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281120264.png\"></p>\n<p>进入工作流的执行详情，可以看到每个工作的每一步脚本的详细执行过程和输出结果，就不一一表述了，后续会讲到。</p>\n"},{"title":"6. GitHub Actions - Managing workflow runs","date":"2023-07-05T22:32:01.000Z","url":"github-actions-runs","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/10](https://github.com/taoliujun/blog/issues/10)\n\n<!--hexo\n---\nurl: github-actions-runs\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/using-workflows/manually-running-a-workflow\n\n## 手动执行\n\n设置`event`包含`workflow_dispatch`，可以手动触发，使用Github CLI、Browser都可以，文档中呈现了一个流程图示例。\n\n## 重复执行\n\n无\n\n## 取消执行\n\n无\n\n## 审批执行\n\n对于pull request，可以设置审批执行以防止浪费actions资源。\n\n## 审查部署\n\n无\n\n## 开关workflow\n\n无\n\n## 跳过workflow\n\n在commit message中加入关键词可以跳过workflow，只对push、pull_request事件有效。关键词有：\n\n* [skip ci]\n* [ci skip]\n* [no ci]\n* [skip actions]\n* [actions skip]\n\n也可以在message后空两行，然后加入关键词：\n\n* skip-checks:true\n* skip-checks: true\n\n## 删除workflow\n\n无\n\n## 下载workflow归档\n\n可以下载90天内的workflow归档，操作参考文档。\n\n\n\n","source":"_posts/github-actions-runs.md","raw":"---\ntitle: \"6. GitHub Actions - Managing workflow runs\"\ndate: \"2023-07-06T06:32:01Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-runs\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/10](https://github.com/taoliujun/blog/issues/10)\n\n<!--hexo\n---\nurl: github-actions-runs\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/using-workflows/manually-running-a-workflow\n\n## 手动执行\n\n设置`event`包含`workflow_dispatch`，可以手动触发，使用Github CLI、Browser都可以，文档中呈现了一个流程图示例。\n\n## 重复执行\n\n无\n\n## 取消执行\n\n无\n\n## 审批执行\n\n对于pull request，可以设置审批执行以防止浪费actions资源。\n\n## 审查部署\n\n无\n\n## 开关workflow\n\n无\n\n## 跳过workflow\n\n在commit message中加入关键词可以跳过workflow，只对push、pull_request事件有效。关键词有：\n\n* [skip ci]\n* [ci skip]\n* [no ci]\n* [skip actions]\n* [actions skip]\n\n也可以在message后空两行，然后加入关键词：\n\n* skip-checks:true\n* skip-checks: true\n\n## 删除workflow\n\n无\n\n## 下载workflow归档\n\n可以下载90天内的workflow归档，操作参考文档。\n\n\n\n","slug":"github-actions-runs","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvy50011jaot8v6xhhiy","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/10\">https://github.com/taoliujun/blog/issues/10</a></p>\n<!--hexo\n---\nurl: github-actions-runs\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/using-workflows/manually-running-a-workflow\">https://docs.github.com/en/actions/using-workflows/manually-running-a-workflow</a></p>\n<h2 id=\"手动执行\"><a href=\"#手动执行\" class=\"headerlink\" title=\"手动执行\"></a>手动执行</h2><p>设置<code>event</code>包含<code>workflow_dispatch</code>，可以手动触发，使用Github CLI、Browser都可以，文档中呈现了一个流程图示例。</p>\n<h2 id=\"重复执行\"><a href=\"#重复执行\" class=\"headerlink\" title=\"重复执行\"></a>重复执行</h2><p>无</p>\n<h2 id=\"取消执行\"><a href=\"#取消执行\" class=\"headerlink\" title=\"取消执行\"></a>取消执行</h2><p>无</p>\n<h2 id=\"审批执行\"><a href=\"#审批执行\" class=\"headerlink\" title=\"审批执行\"></a>审批执行</h2><p>对于pull request，可以设置审批执行以防止浪费actions资源。</p>\n<h2 id=\"审查部署\"><a href=\"#审查部署\" class=\"headerlink\" title=\"审查部署\"></a>审查部署</h2><p>无</p>\n<h2 id=\"开关workflow\"><a href=\"#开关workflow\" class=\"headerlink\" title=\"开关workflow\"></a>开关workflow</h2><p>无</p>\n<h2 id=\"跳过workflow\"><a href=\"#跳过workflow\" class=\"headerlink\" title=\"跳过workflow\"></a>跳过workflow</h2><p>在commit message中加入关键词可以跳过workflow，只对push、pull_request事件有效。关键词有：</p>\n<ul>\n<li>[skip ci]</li>\n<li>[ci skip]</li>\n<li>[no ci]</li>\n<li>[skip actions]</li>\n<li>[actions skip]</li>\n</ul>\n<p>也可以在message后空两行，然后加入关键词：</p>\n<ul>\n<li>skip-checks:true</li>\n<li>skip-checks: true</li>\n</ul>\n<h2 id=\"删除workflow\"><a href=\"#删除workflow\" class=\"headerlink\" title=\"删除workflow\"></a>删除workflow</h2><p>无</p>\n<h2 id=\"下载workflow归档\"><a href=\"#下载workflow归档\" class=\"headerlink\" title=\"下载workflow归档\"></a>下载workflow归档</h2><p>可以下载90天内的workflow归档，操作参考文档。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/10\">https://github.com/taoliujun/blog/issues/10</a></p>\n<!--hexo\n---\nurl: github-actions-runs\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/using-workflows/manually-running-a-workflow\">https://docs.github.com/en/actions/using-workflows/manually-running-a-workflow</a></p>\n<h2 id=\"手动执行\"><a href=\"#手动执行\" class=\"headerlink\" title=\"手动执行\"></a>手动执行</h2><p>设置<code>event</code>包含<code>workflow_dispatch</code>，可以手动触发，使用Github CLI、Browser都可以，文档中呈现了一个流程图示例。</p>\n<h2 id=\"重复执行\"><a href=\"#重复执行\" class=\"headerlink\" title=\"重复执行\"></a>重复执行</h2><p>无</p>\n<h2 id=\"取消执行\"><a href=\"#取消执行\" class=\"headerlink\" title=\"取消执行\"></a>取消执行</h2><p>无</p>\n<h2 id=\"审批执行\"><a href=\"#审批执行\" class=\"headerlink\" title=\"审批执行\"></a>审批执行</h2><p>对于pull request，可以设置审批执行以防止浪费actions资源。</p>\n<h2 id=\"审查部署\"><a href=\"#审查部署\" class=\"headerlink\" title=\"审查部署\"></a>审查部署</h2><p>无</p>\n<h2 id=\"开关workflow\"><a href=\"#开关workflow\" class=\"headerlink\" title=\"开关workflow\"></a>开关workflow</h2><p>无</p>\n<h2 id=\"跳过workflow\"><a href=\"#跳过workflow\" class=\"headerlink\" title=\"跳过workflow\"></a>跳过workflow</h2><p>在commit message中加入关键词可以跳过workflow，只对push、pull_request事件有效。关键词有：</p>\n<ul>\n<li>[skip ci]</li>\n<li>[ci skip]</li>\n<li>[no ci]</li>\n<li>[skip actions]</li>\n<li>[actions skip]</li>\n</ul>\n<p>也可以在message后空两行，然后加入关键词：</p>\n<ul>\n<li>skip-checks:true</li>\n<li>skip-checks: true</li>\n</ul>\n<h2 id=\"删除workflow\"><a href=\"#删除workflow\" class=\"headerlink\" title=\"删除workflow\"></a>删除workflow</h2><p>无</p>\n<h2 id=\"下载workflow归档\"><a href=\"#下载workflow归档\" class=\"headerlink\" title=\"下载workflow归档\"></a>下载workflow归档</h2><p>可以下载90天内的workflow归档，操作参考文档。</p>\n"},{"title":"7. GitHub Actions - 在pull request中执行eslint检测的工作流例子","date":"2023-12-28T19:56:49.000Z","url":"github-actions-sample-eslint-in-pull-request","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/36](https://github.com/taoliujun/blog/issues/36)\n\n<!--hexo\n---\nurl: github-actions-sample-eslint-in-pull-request\ntags:\n  - github actions\n---\n-->\n\n一个在pull request发起的时候执行eslint检测的workflow，[点此查看完整代码](https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml)，它实现的功能如下：\n\n- 在pull request创建、更新的时候执行。\n- 先回复一个评论，告诉用户正在运行。\n- 初始化仓库，并安装依赖，产生依赖缓存。\n- 运行eslint增量检查。\n- 运行typescript检查。\n- 运行jest检查。\n- 更新之前的评论，回复检查的结果。\n\n运行截图：\n\n![Alt text](https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e)\n\n为避免歧义，涉及到github action的术语都是英文的。术语介绍如下：\n\n* workflow，工作流，可以理解为yml文件。\n* jobs，工作，一个workflow可以包含多个job，并行执行。\n* steps，作业，一个job可以包含多个step，串行执行。\n* action，操作，作业中具体的执行。\n\n## 步骤\n\n- [初始化workflow](https://github.com/taoliujun/blog/issues/36#issuecomment-1871790603)\n- [reply checking](https://github.com/taoliujun/blog/issues/36#issuecomment-1871806576)\n- [./.github/actions/unique-comment](https://github.com/taoliujun/blog/issues/36#issuecomment-1871818126)\n- [init](https://github.com/taoliujun/blog/issues/36#issuecomment-1871862632)\n- [eslint](https://github.com/taoliujun/blog/issues/36#issuecomment-1871862779)\n- [typescript](https://github.com/taoliujun/blog/issues/36#issuecomment-1871862850)\n- [unit test](https://github.com/taoliujun/blog/issues/36#issuecomment-1871863037)\n- [reply result](https://github.com/taoliujun/blog/issues/36#issuecomment-1871863117)\n\n<!--hexo-->\n\n# 初始化workflow\n\n在项目中新建文件`.github/workflows/check-pull-request.yml`，内容如下：\n\n```yaml\nname: test check pull request\nrun-name: 'check pull request #${{ github.event.pull_request.number }}'\non:\n    pull_request:\n        types: [opened, synchronize, reopened]\njobs:\n    replyChecking:\n        runs-on: ubuntu-latest\n        steps:\n            - run: echo 'replyChecking'\n\n    init:\n        runs-on: ubuntu-latest\n        steps:\n            - run: echo 'init'\n\n    eslint:\n        runs-on: ubuntu-latest\n        needs: [init]\n        steps:\n            - run: echo 'eslint'\n\n    typescript:\n        runs-on: ubuntu-latest\n        needs: [init]\n        steps:\n            - run: echo 'typescript'\n\n    unitTest:\n        runs-on: ubuntu-latest\n        needs: [init]\n        steps:\n            - run: echo 'unitTest'\n\n    replyResult:\n        runs-on: ubuntu-latest\n        needs: [replyChecking, eslint, typescript, unitTest]\n        steps:\n            - run: echo 'replyResult'\n```\n\n## name和run-name\n\n给workflow命名为`check pull request`，它会出现在Actions页面的左侧菜单中。运行实例名为`check pull request #44`，出现在右侧的运行列表中。如图：\n\n![](https://github.com/taoliujun/blog/assets/5689134/c1371ff2-8fc3-4e5b-8b60-3c572419938b)\n\n`run-name`中的`${{ github.event.pull_request.number }}`是workflow的上下文，这里读取了上下文中的pr编号。\n\n## on\n\n`on`指定了workflow的触发条件，这里配置了在pr创建、同步、重新打开的时候，触发该workflow。\n\n## jobs\n\n按照设想，需要定义几个job，分别是：\n\n-   replyChecking：回复用户正在检查中\n-   init：初始化仓库，缓存依赖项\n-   eslint：运行eslint检查\n-   typescript：运行typescript检查\n-   unitTest：运行单元测试\n-   replyResult：回复用户检查结果\n\n`jobs`是并行运行的，聪明如你肯定发现了，eslint、typescript、unitTest这三个job会涉及到安装npm依赖，所以它们最好在init后执行，确保依赖已经缓存了。\n\n其次，replyResult肯定要拿到eslint等job的结果才能执行，所以使用了`needs`管理它们的执行依赖关系。\n\n### runs-on\n\n每个job都运行在独立的容器中，github官方提供了windows、macos、linux多种容器，这里使用了ubuntu容器。\n\n## 测试\n\n发起一个pr，看到Actions页面出现了新的运行实例，点击进去，可以看到各个job的运行情况和依赖关系：\n\n![](https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e)\n\n<!--hexo-->\n\n# replyChecking\n\n在进行eslint检测之前，先在pr里回复`checking`，并且带上拽酷炫的话。将replyChecking改成如下：\n\n```yaml\nreplyChecking:\n    runs-on: ubuntu-latest\n    steps:\n        - name: Checkout\n          uses: actions/checkout@v4\n          with:\n              ref: ${{github.head_ref}}\n        - name: Get date time\n          id: getDateTime\n          run: echo \"result=$(TZ=Asia/Shanghai date)\" >> \"$GITHUB_OUTPUT\"\n        - name: Create or update a comment\n          uses: ./.github/actions/unique-comment\n          with:\n              uniqueIdentifier: ${{ github.workflow }}\n              body: |\n                  **Checking...**\n\n                  ---\n\n                  Commented by Action [${{github.workflow}}](${{github.event.repository.html_url}}/actions/runs/${{github.run_id}}), last updated on ${{steps.getDateTime.outputs.result}}.\n```\n\n`steps`每一步里`name`、`id`是可选的，`name`在Actions详情页面里会显示，更直观的看到step的名称，推荐写上。\n\n## Checkout\n\n`uses`表示使用一个action，名为`actions/checkout@v4`，它用来拉取仓库。\n\n> 同其他编程语言一样，重复的action可以封装起来。[action市场](https://github.com/marketplace?type=actions)提供了很多。\n\n`with`属性指定了该action的输入参数，每个action的参数不尽相同。\n\n`ref`参数表示要拉取的分支，`${{github.head_ref}}`也是一个上下文，表示当前pr的源分支。\n\n\n## Get Date time\n\n这step还写了`id`，表示该step在该job中的唯一标识，为什么要写呢？是为了下一步step能根据`id`读取到它的`output`。\n\n> **output**是workflow中非常重要的概念，它用于在step之间、job之间分享简单的数据。\n\n`run`就是在容器中跑一个命令，这里跑了一个unix bash命令，将当前时间写入到`$GITHUB_OUTPUT`中，键名为`result`。\n\n> `$GITHUB_OUTPUT`是workflow注入到容器中的一个路径，用于存放output。\n\n## Create or update a comment\n\n`uses`使用了本地的action，这个action用于创建或更新一个唯一回复，下一节说。\n\n> 有时候，官方或市场的action并不能满足你的需要，就得自己写一个了。\n\n同理，该action也有`with`属性，`uniqueIdentifier`是回复评论的唯一标识，`body`是回复的内容，内容使用了markdown语法，里面还涉及到上下文不一一细讲了。只说`${{steps.getDateTime.outputs.result}}`这个上下文表示获取getDateTime这个step中，键名为`result`的值。\n\n如果你不需要在内容里插入时间，那么上面的`Get Date time`就可以省略了。\n\n## 测试\n\n因为我已经有完整的代码了，所以运行后，pr中会有一个回复，如图：\n\n![](https://github.com/taoliujun/blog/assets/5689134/42396a84-b798-4f4e-9f39-5bf92a8acb15)\n<!--hexo-->\n\n# ./.github/actions/unique-comment\n\n这是一个封装的javascript action，用于对issue创建、更新唯一评论。\n\n## 目录结构\n\n创建目录`./.github/actions/unique-comment`，最终目录结构如下：\n\n```bash\n.\n├── action.yml\n├── config\n│   └── webpack.config.js\n├── dist\n│   ├── index.js\n│   └── index.js.LICENSE.txt\n├── package.json\n└── src\n    └── index.js\n```\n\n## action.yml\n\n这是action的配置文件，必须存在，内容如下：\n\n```yaml\nname: unique-comment\ndescription: create or update a unique comment\n\nruns:\n    using: 'node20'\n    main: './dist/index.js'\n\ninputs:\n    token:\n        description: 'GitHub token'\n        required: false\n        default: ${{ github.token }}\n    owner:\n        description: 'Repository owner'\n        required: false\n        default: ${{ github.event.repository.owner.login }}\n    repo:\n        description: 'Repository name'\n        required: false\n        default: ${{ github.event.repository.name }}\n    issue_number:\n        description: 'Issue number'\n        required: false\n        default: ${{ github.event.number }}\n    body:\n        description: 'Comment body'\n        required: false\n    uniqueIdentifier:\n        description: 'Unique identifier for comment'\n        required: false\n        default: 'unique-comment'\n```\n\n大部分属性不一一细讲了，都是简单的英文望文生义即可。\n\n`runs`表示运行在`node20`环境下，入口文件为`./dist/index.js`。\n\n`inputs`表示接受的参数，也就是之前提到的`with`属性里要输入的参数。用`required`表示是否必须传入，`default`表示默认值。\n\n## src/index.js\n\n为什么入口文件是`dist/index.js`，而不是`src/index.js`呢？因为要引用一些github官方提供的快捷操作github REST API的js包去操作issue评论(pull request也是一种issue)，最终打包后的文件才能在工作流中稳妥的运行。所以，写好`src/index.js`，再打包就行。\n\n该文件代码如下：\n\n```javascript\nconst core = require('@actions/core');\nconst github = require('@actions/github');\n\nconst main = async () => {\n    const token = core.getInput('token');\n    const owner = core.getInput('owner');\n    const repo = core.getInput('repo');\n    const issueNumber = core.getInput('issue_number');\n    const uniqueIdentifier = `[^uniqueIdentifier]: ${core.getInput('uniqueIdentifier')}`;\n    const body = `${core.getInput('body')}\\n\\n${uniqueIdentifier}`;\n\n    core.debug(`uniqueIdentifier is ${uniqueIdentifier}`);\n\n    const octokit = github.getOctokit(token);\n\n    const comments = await octokit.rest.issues.listComments({\n        owner,\n        repo,\n        issue_number: issueNumber,\n    });\n\n    const botComment = comments.data.find((v) => v.body.includes(uniqueIdentifier));\n\n    if (botComment) {\n        core.info('update comment successfully.');\n        await octokit.rest.issues.updateComment({\n            owner,\n            repo,\n            comment_id: botComment.id,\n            body,\n        });\n    } else {\n        core.info('create comment successfully.');\n        await octokit.rest.issues.createComment({\n            owner,\n            repo,\n            issue_number: issueNumber,\n            body,\n        });\n    }\n};\n\ntry {\n    main();\n} catch (err) {\n    core.setFailed(err.message);\n}\n```\n\n`@actions/core`和`@actions/github`是github官方提供的js包，前者可以方便的读取入参等，后者可以方便的操作github REST API。\n\n`main`函数的代码就是原生javascript，不一一解释了，主要通过`uniqueIdentifier`来判断是否发布过评论，如果是，就更新评论，否则就创建评论。\n\n> markdown语法`[^uniqueIdentifier]`表示脚注，不会被渲染。\n\n`core.setFailed(err.message);`表示抛出退出代码。\n\n## config/webpack.config.js\n\n打包用的，配置简单可用即可：\n\n```javascript\nmodule.exports = {\n    mode: 'production',\n    target: 'node20',\n    entry: './src/index.js',\n    output: {\n        filename: 'index.js',\n        clean: true,\n    },\n};\n```\n\n## package.json\n\n```json\n{\n  \"name\": \"unique-comment\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"build\": \"webpack --config ./config/webpack.config.js\"\n  },\n  \"dependencies\": {\n    \"@actions/core\": \"^1.10.1\",\n    \"@actions/github\": \"^6.0.0\"\n  },\n  \"devDependencies\": {\n    \"webpack\": \"^5.89.0\",\n    \"webpack-cli\": \"^5.1.4\"\n  }\n}\n```\n\n没啥好说的，列出了依赖项。和一个打包脚本。\n\n## 测试\n\n修改了`src/index.js`得`build`，然后push到github仓库。\n\n记得将**dist**目录也提交到github仓库。\n\n<!--hexo-->\n\n# init\n\n现在，开始搞正经的了。\n\n先初始化项目，这个job的目的仅仅是为了缓存pnpm依赖项，如果你的项目的依赖项不经常更新，可以省略这个job，后续也不要`needs`这个job。\n\n将init改成如下：\n\n```yaml\ninit:\n        runs-on: ubuntu-latest\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n```\n\n相信经过对之前的job的了解，这里的配置就看起来很简单了。\n\n## Init pnpm\n\n使用第三方action，安装pnpm@^8。\n\n## Init node\n\n`cache: 'pnpm'`指定缓存机制，它内部是利用了workflow的cache机制。\n\n## Install dependencies\n\n安装依赖项，触发缓存。\n<!--hexo-->\n\n# eslint\n\n将eslint改成如下：\n\n```yaml\neslint:\n        runs-on: ubuntu-latest\n        needs: [init]\n        outputs:\n            result: ${{ steps.lint.outputs.result }}\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n                  fetch-depth: 0\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n\n            - name: Run eslint\n              id: lint\n              uses: actions/github-script@v7\n              with:\n                  result-encoding: string\n                  script: |\n                      let output = '';\n                      let outerr = '';\n                      let diffFiles = '';\n\n                      await exec.exec(\n                        `git diff --name-only origin/${{github.base_ref}}`,\n                        [],\n                        {\n                          // silent: true,\n                          // ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                diffFiles += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      const lintFiles = diffFiles.split(`\\n`).filter((file) => {\n                        return file.endsWith('.js') || file.endsWith('.ts') || file.endsWith('.tsx')\n                      }).join(' ');\n\n                      await exec.exec(\n                        // \"pnpm run lint --format stylish\",\n                        `pnpm eslint ${lintFiles}`,\n                        [],\n                        {\n                          // silent: true,\n                          ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                output += data.toString();\n                            },\n                            stderr: (data) => {\n                                outerr += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      if (outerr) {\n                        return `:x: Some command execution errors, non-eslint business errors.`;\n                      }\n\n                      const errorMatch = output.match(/(\\d+) errors?/);\n                      const warnMatch = output.match(/(\\d+) warnings?/);\n\n                      if (errorMatch && errorMatch?.[1] !== '0') {\n                        return `:x: ${errorMatch?.[0]} ${warnMatch?.[0]}`;\n                      }\n\n                      return `:white_check_mark: ${errorMatch?.[0] || '0 error'} ${warnMatch?.[0] || '0 warning'}`;\n```\n\n## needs\n\n使用`needs`依赖init，可以使用到pnpm的缓存项，防止install太慢。\n\n> 因为eslint、typescript、unitTest都需要pnpm install，所以一个前置的init去缓存pnpm依赖项，可以加快后续的install速度。\n\n## outputs\n\njob里的outputs，可以在依赖它的其他job中访问到。这里使用`${{ steps.lint.outputs.result }}`去获取该job中lint这个step里的output里的result。\n\n> output有job和step两个维度，注意区分。\n\n\n## Run eslint\n\n它uses了`actions/github-script@v7`，这是github官方提供的一个action，可以在`with.script`里写js代码去执行，同时它会注入一些变量到script中去，见它的[官方文档](https://github.com/actions/github-script/tree/v7/)。\n\n> 对于简单的js代码，可以使用这个action去完成，不用再去写一个js文件。\n\n`result-encoding`是指定script返回的数据格式的，默认是json，这指定为string。\n\n> 为什么script里return了string，还要指定为string呢？\n> 因为`return 'hello'`在json encode后是`'\"hello\"'`，而string encode后为`'hello'`。\n\nscript里是原生的js代码了，里面的`exec`是该action注入的变量，用来执行shell命令。\n\n这段js代码做了两个事情，一是`git diff`获取pr中改动的文件列表，二是`eslint`检查这些增量文件，最后返回处理的结果。\n\n## fetch-depth\n\nInit repo这个step里设置了`fetch-depth: 0`，不然获取不到完整的git分支，具体看`actions/checkout`的解释，涉及到git的知识不展开细说了。\n\n## steps.lint.outputs.result\n\n`steps.lint.outputs.result`为什么能拿到lint step里的output.result呢？因为`actions/github-script`这个action内部将script的返回值，设置到`$GITHUB_OUTPUT`里了，且键名为`result`。\n<!--hexo-->\n\n# typescript\n\n和eslint的配置大同小异，只是改了对检测结果的判断。\n\n```yaml\ntypescript:\n        runs-on: ubuntu-latest\n        needs: [init]\n        outputs:\n            result: ${{ steps.lint.outputs.result }}\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n\n            - name: Run lint\n              id: lint\n              uses: actions/github-script@v7\n              with:\n                  result-encoding: string\n                  script: |\n                      let output = '';\n                      let outerr = '';\n\n                      await exec.exec(\n                        `pnpm run -r lint:ts`,\n                        [],\n                        {\n                          // silent: true,\n                          ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                output += data.toString();\n                            },\n                            stderr: (data) => {\n                                outerr += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      if (outerr) {\n                        return `:x: Some command execution errors, no business errors.`;\n                      }\n\n                      const errorMatch = output.match(/error TS/g);\n\n                      if (errorMatch) {\n                        return `:x: ${errorMatch?.length} errors`;\n                      }\n\n                      return `:white_check_mark: ${'0 error'}`;\n```\n<!--hexo-->\n\n# unitTest\n\n和eslint的配置大同小异，只是改了对检测结果的判断。唯一的区别是jest的检测结果是输出到stderr，见https://github.com/jestjs/jest/issues/5064。\n\n```yaml\nunitTest:\n        runs-on: ubuntu-latest\n        needs: [init]\n        outputs:\n            result: ${{ steps.lint.outputs.result }}\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n\n            - name: Run lint\n              id: lint\n              uses: actions/github-script@v7\n              with:\n                  result-encoding: string\n                  script: |\n                      let output = '';\n                      let outerr = '';\n\n                      await exec.exec(\n                        `pnpm run test`,\n                        [],\n                        {\n                          // silent: true,\n                          ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                output += data.toString();\n                            },\n                            stderr: (data) => {\n                                outerr += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      // why use outerr? https://github.com/jestjs/jest/issues/5064\n\n                      const failMatch = outerr.match(/Test Suites: \\d+ failed/);\n\n                      if (failMatch) {\n                        return `:x: ${failMatch?.[0]}`;\n                      }\n\n                      const errorMatch = outerr.match(/Jest: \"global\" coverage threshold for lines \\([0-9\\.]+%\\) not met: [0-9\\.]+%/);\n\n                      if (errorMatch) {\n                        return `:x: ${errorMatch?.[0]}`;\n                      }\n\n                      return `:white_check_mark: passed`;\n```\n<!--hexo-->\n\n# replyResult\n\n最后，将几个检测的结果进行汇总，回复到pr里就行了。\n\n```yaml\nreplyResult:\n        runs-on: ubuntu-latest\n        needs: [replyChecking, eslint, typescript, unitTest]\n        steps:\n            - name: Checkout\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n            - name: Get date time\n              id: getDateTime\n              run: echo \"result=$(TZ=Asia/Shanghai date)\" >> \"$GITHUB_OUTPUT\"\n            - name: Create or update a comment\n              uses: ./.github/actions/unique-comment\n              with:\n                  uniqueIdentifier: ${{ github.workflow }}\n                  body: |\n                      ## Eslint Check Result\n\n                      ${{needs.eslint.outputs.result}}\n\n                      ## Typescript Check Result\n\n                      ${{needs.typescript.outputs.result}}\n\n                      ## UnitTest Check Result\n\n                      ${{needs.unitTest.outputs.result}}\n\n                      ---\n\n                      Commented by Action [${{github.workflow}}](${{github.event.repository.html_url}}/actions/runs/${{github.run_id}}), last updated on ${{steps.getDateTime.outputs.result}}.\n```\n\n和replyChecking差不多，在body里使用`${{needs.eslint.outputs.result}}`去读取了eslint job的outputs。\n\n## 测试\n\n去发起新的pr，故意提交一个有eslint error的js/ts文件，看看表现吧~\n\n","source":"_posts/github-actions-sample-eslint-in-pull-request.md","raw":"---\ntitle: \"7. GitHub Actions - 在pull request中执行eslint检测的工作流例子\"\ndate: \"2023-12-29T03:56:49Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-sample-eslint-in-pull-request\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/36](https://github.com/taoliujun/blog/issues/36)\n\n<!--hexo\n---\nurl: github-actions-sample-eslint-in-pull-request\ntags:\n  - github actions\n---\n-->\n\n一个在pull request发起的时候执行eslint检测的workflow，[点此查看完整代码](https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml)，它实现的功能如下：\n\n- 在pull request创建、更新的时候执行。\n- 先回复一个评论，告诉用户正在运行。\n- 初始化仓库，并安装依赖，产生依赖缓存。\n- 运行eslint增量检查。\n- 运行typescript检查。\n- 运行jest检查。\n- 更新之前的评论，回复检查的结果。\n\n运行截图：\n\n![Alt text](https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e)\n\n为避免歧义，涉及到github action的术语都是英文的。术语介绍如下：\n\n* workflow，工作流，可以理解为yml文件。\n* jobs，工作，一个workflow可以包含多个job，并行执行。\n* steps，作业，一个job可以包含多个step，串行执行。\n* action，操作，作业中具体的执行。\n\n## 步骤\n\n- [初始化workflow](https://github.com/taoliujun/blog/issues/36#issuecomment-1871790603)\n- [reply checking](https://github.com/taoliujun/blog/issues/36#issuecomment-1871806576)\n- [./.github/actions/unique-comment](https://github.com/taoliujun/blog/issues/36#issuecomment-1871818126)\n- [init](https://github.com/taoliujun/blog/issues/36#issuecomment-1871862632)\n- [eslint](https://github.com/taoliujun/blog/issues/36#issuecomment-1871862779)\n- [typescript](https://github.com/taoliujun/blog/issues/36#issuecomment-1871862850)\n- [unit test](https://github.com/taoliujun/blog/issues/36#issuecomment-1871863037)\n- [reply result](https://github.com/taoliujun/blog/issues/36#issuecomment-1871863117)\n\n<!--hexo-->\n\n# 初始化workflow\n\n在项目中新建文件`.github/workflows/check-pull-request.yml`，内容如下：\n\n```yaml\nname: test check pull request\nrun-name: 'check pull request #${{ github.event.pull_request.number }}'\non:\n    pull_request:\n        types: [opened, synchronize, reopened]\njobs:\n    replyChecking:\n        runs-on: ubuntu-latest\n        steps:\n            - run: echo 'replyChecking'\n\n    init:\n        runs-on: ubuntu-latest\n        steps:\n            - run: echo 'init'\n\n    eslint:\n        runs-on: ubuntu-latest\n        needs: [init]\n        steps:\n            - run: echo 'eslint'\n\n    typescript:\n        runs-on: ubuntu-latest\n        needs: [init]\n        steps:\n            - run: echo 'typescript'\n\n    unitTest:\n        runs-on: ubuntu-latest\n        needs: [init]\n        steps:\n            - run: echo 'unitTest'\n\n    replyResult:\n        runs-on: ubuntu-latest\n        needs: [replyChecking, eslint, typescript, unitTest]\n        steps:\n            - run: echo 'replyResult'\n```\n\n## name和run-name\n\n给workflow命名为`check pull request`，它会出现在Actions页面的左侧菜单中。运行实例名为`check pull request #44`，出现在右侧的运行列表中。如图：\n\n![](https://github.com/taoliujun/blog/assets/5689134/c1371ff2-8fc3-4e5b-8b60-3c572419938b)\n\n`run-name`中的`${{ github.event.pull_request.number }}`是workflow的上下文，这里读取了上下文中的pr编号。\n\n## on\n\n`on`指定了workflow的触发条件，这里配置了在pr创建、同步、重新打开的时候，触发该workflow。\n\n## jobs\n\n按照设想，需要定义几个job，分别是：\n\n-   replyChecking：回复用户正在检查中\n-   init：初始化仓库，缓存依赖项\n-   eslint：运行eslint检查\n-   typescript：运行typescript检查\n-   unitTest：运行单元测试\n-   replyResult：回复用户检查结果\n\n`jobs`是并行运行的，聪明如你肯定发现了，eslint、typescript、unitTest这三个job会涉及到安装npm依赖，所以它们最好在init后执行，确保依赖已经缓存了。\n\n其次，replyResult肯定要拿到eslint等job的结果才能执行，所以使用了`needs`管理它们的执行依赖关系。\n\n### runs-on\n\n每个job都运行在独立的容器中，github官方提供了windows、macos、linux多种容器，这里使用了ubuntu容器。\n\n## 测试\n\n发起一个pr，看到Actions页面出现了新的运行实例，点击进去，可以看到各个job的运行情况和依赖关系：\n\n![](https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e)\n\n<!--hexo-->\n\n# replyChecking\n\n在进行eslint检测之前，先在pr里回复`checking`，并且带上拽酷炫的话。将replyChecking改成如下：\n\n```yaml\nreplyChecking:\n    runs-on: ubuntu-latest\n    steps:\n        - name: Checkout\n          uses: actions/checkout@v4\n          with:\n              ref: ${{github.head_ref}}\n        - name: Get date time\n          id: getDateTime\n          run: echo \"result=$(TZ=Asia/Shanghai date)\" >> \"$GITHUB_OUTPUT\"\n        - name: Create or update a comment\n          uses: ./.github/actions/unique-comment\n          with:\n              uniqueIdentifier: ${{ github.workflow }}\n              body: |\n                  **Checking...**\n\n                  ---\n\n                  Commented by Action [${{github.workflow}}](${{github.event.repository.html_url}}/actions/runs/${{github.run_id}}), last updated on ${{steps.getDateTime.outputs.result}}.\n```\n\n`steps`每一步里`name`、`id`是可选的，`name`在Actions详情页面里会显示，更直观的看到step的名称，推荐写上。\n\n## Checkout\n\n`uses`表示使用一个action，名为`actions/checkout@v4`，它用来拉取仓库。\n\n> 同其他编程语言一样，重复的action可以封装起来。[action市场](https://github.com/marketplace?type=actions)提供了很多。\n\n`with`属性指定了该action的输入参数，每个action的参数不尽相同。\n\n`ref`参数表示要拉取的分支，`${{github.head_ref}}`也是一个上下文，表示当前pr的源分支。\n\n\n## Get Date time\n\n这step还写了`id`，表示该step在该job中的唯一标识，为什么要写呢？是为了下一步step能根据`id`读取到它的`output`。\n\n> **output**是workflow中非常重要的概念，它用于在step之间、job之间分享简单的数据。\n\n`run`就是在容器中跑一个命令，这里跑了一个unix bash命令，将当前时间写入到`$GITHUB_OUTPUT`中，键名为`result`。\n\n> `$GITHUB_OUTPUT`是workflow注入到容器中的一个路径，用于存放output。\n\n## Create or update a comment\n\n`uses`使用了本地的action，这个action用于创建或更新一个唯一回复，下一节说。\n\n> 有时候，官方或市场的action并不能满足你的需要，就得自己写一个了。\n\n同理，该action也有`with`属性，`uniqueIdentifier`是回复评论的唯一标识，`body`是回复的内容，内容使用了markdown语法，里面还涉及到上下文不一一细讲了。只说`${{steps.getDateTime.outputs.result}}`这个上下文表示获取getDateTime这个step中，键名为`result`的值。\n\n如果你不需要在内容里插入时间，那么上面的`Get Date time`就可以省略了。\n\n## 测试\n\n因为我已经有完整的代码了，所以运行后，pr中会有一个回复，如图：\n\n![](https://github.com/taoliujun/blog/assets/5689134/42396a84-b798-4f4e-9f39-5bf92a8acb15)\n<!--hexo-->\n\n# ./.github/actions/unique-comment\n\n这是一个封装的javascript action，用于对issue创建、更新唯一评论。\n\n## 目录结构\n\n创建目录`./.github/actions/unique-comment`，最终目录结构如下：\n\n```bash\n.\n├── action.yml\n├── config\n│   └── webpack.config.js\n├── dist\n│   ├── index.js\n│   └── index.js.LICENSE.txt\n├── package.json\n└── src\n    └── index.js\n```\n\n## action.yml\n\n这是action的配置文件，必须存在，内容如下：\n\n```yaml\nname: unique-comment\ndescription: create or update a unique comment\n\nruns:\n    using: 'node20'\n    main: './dist/index.js'\n\ninputs:\n    token:\n        description: 'GitHub token'\n        required: false\n        default: ${{ github.token }}\n    owner:\n        description: 'Repository owner'\n        required: false\n        default: ${{ github.event.repository.owner.login }}\n    repo:\n        description: 'Repository name'\n        required: false\n        default: ${{ github.event.repository.name }}\n    issue_number:\n        description: 'Issue number'\n        required: false\n        default: ${{ github.event.number }}\n    body:\n        description: 'Comment body'\n        required: false\n    uniqueIdentifier:\n        description: 'Unique identifier for comment'\n        required: false\n        default: 'unique-comment'\n```\n\n大部分属性不一一细讲了，都是简单的英文望文生义即可。\n\n`runs`表示运行在`node20`环境下，入口文件为`./dist/index.js`。\n\n`inputs`表示接受的参数，也就是之前提到的`with`属性里要输入的参数。用`required`表示是否必须传入，`default`表示默认值。\n\n## src/index.js\n\n为什么入口文件是`dist/index.js`，而不是`src/index.js`呢？因为要引用一些github官方提供的快捷操作github REST API的js包去操作issue评论(pull request也是一种issue)，最终打包后的文件才能在工作流中稳妥的运行。所以，写好`src/index.js`，再打包就行。\n\n该文件代码如下：\n\n```javascript\nconst core = require('@actions/core');\nconst github = require('@actions/github');\n\nconst main = async () => {\n    const token = core.getInput('token');\n    const owner = core.getInput('owner');\n    const repo = core.getInput('repo');\n    const issueNumber = core.getInput('issue_number');\n    const uniqueIdentifier = `[^uniqueIdentifier]: ${core.getInput('uniqueIdentifier')}`;\n    const body = `${core.getInput('body')}\\n\\n${uniqueIdentifier}`;\n\n    core.debug(`uniqueIdentifier is ${uniqueIdentifier}`);\n\n    const octokit = github.getOctokit(token);\n\n    const comments = await octokit.rest.issues.listComments({\n        owner,\n        repo,\n        issue_number: issueNumber,\n    });\n\n    const botComment = comments.data.find((v) => v.body.includes(uniqueIdentifier));\n\n    if (botComment) {\n        core.info('update comment successfully.');\n        await octokit.rest.issues.updateComment({\n            owner,\n            repo,\n            comment_id: botComment.id,\n            body,\n        });\n    } else {\n        core.info('create comment successfully.');\n        await octokit.rest.issues.createComment({\n            owner,\n            repo,\n            issue_number: issueNumber,\n            body,\n        });\n    }\n};\n\ntry {\n    main();\n} catch (err) {\n    core.setFailed(err.message);\n}\n```\n\n`@actions/core`和`@actions/github`是github官方提供的js包，前者可以方便的读取入参等，后者可以方便的操作github REST API。\n\n`main`函数的代码就是原生javascript，不一一解释了，主要通过`uniqueIdentifier`来判断是否发布过评论，如果是，就更新评论，否则就创建评论。\n\n> markdown语法`[^uniqueIdentifier]`表示脚注，不会被渲染。\n\n`core.setFailed(err.message);`表示抛出退出代码。\n\n## config/webpack.config.js\n\n打包用的，配置简单可用即可：\n\n```javascript\nmodule.exports = {\n    mode: 'production',\n    target: 'node20',\n    entry: './src/index.js',\n    output: {\n        filename: 'index.js',\n        clean: true,\n    },\n};\n```\n\n## package.json\n\n```json\n{\n  \"name\": \"unique-comment\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"build\": \"webpack --config ./config/webpack.config.js\"\n  },\n  \"dependencies\": {\n    \"@actions/core\": \"^1.10.1\",\n    \"@actions/github\": \"^6.0.0\"\n  },\n  \"devDependencies\": {\n    \"webpack\": \"^5.89.0\",\n    \"webpack-cli\": \"^5.1.4\"\n  }\n}\n```\n\n没啥好说的，列出了依赖项。和一个打包脚本。\n\n## 测试\n\n修改了`src/index.js`得`build`，然后push到github仓库。\n\n记得将**dist**目录也提交到github仓库。\n\n<!--hexo-->\n\n# init\n\n现在，开始搞正经的了。\n\n先初始化项目，这个job的目的仅仅是为了缓存pnpm依赖项，如果你的项目的依赖项不经常更新，可以省略这个job，后续也不要`needs`这个job。\n\n将init改成如下：\n\n```yaml\ninit:\n        runs-on: ubuntu-latest\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n```\n\n相信经过对之前的job的了解，这里的配置就看起来很简单了。\n\n## Init pnpm\n\n使用第三方action，安装pnpm@^8。\n\n## Init node\n\n`cache: 'pnpm'`指定缓存机制，它内部是利用了workflow的cache机制。\n\n## Install dependencies\n\n安装依赖项，触发缓存。\n<!--hexo-->\n\n# eslint\n\n将eslint改成如下：\n\n```yaml\neslint:\n        runs-on: ubuntu-latest\n        needs: [init]\n        outputs:\n            result: ${{ steps.lint.outputs.result }}\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n                  fetch-depth: 0\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n\n            - name: Run eslint\n              id: lint\n              uses: actions/github-script@v7\n              with:\n                  result-encoding: string\n                  script: |\n                      let output = '';\n                      let outerr = '';\n                      let diffFiles = '';\n\n                      await exec.exec(\n                        `git diff --name-only origin/${{github.base_ref}}`,\n                        [],\n                        {\n                          // silent: true,\n                          // ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                diffFiles += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      const lintFiles = diffFiles.split(`\\n`).filter((file) => {\n                        return file.endsWith('.js') || file.endsWith('.ts') || file.endsWith('.tsx')\n                      }).join(' ');\n\n                      await exec.exec(\n                        // \"pnpm run lint --format stylish\",\n                        `pnpm eslint ${lintFiles}`,\n                        [],\n                        {\n                          // silent: true,\n                          ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                output += data.toString();\n                            },\n                            stderr: (data) => {\n                                outerr += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      if (outerr) {\n                        return `:x: Some command execution errors, non-eslint business errors.`;\n                      }\n\n                      const errorMatch = output.match(/(\\d+) errors?/);\n                      const warnMatch = output.match(/(\\d+) warnings?/);\n\n                      if (errorMatch && errorMatch?.[1] !== '0') {\n                        return `:x: ${errorMatch?.[0]} ${warnMatch?.[0]}`;\n                      }\n\n                      return `:white_check_mark: ${errorMatch?.[0] || '0 error'} ${warnMatch?.[0] || '0 warning'}`;\n```\n\n## needs\n\n使用`needs`依赖init，可以使用到pnpm的缓存项，防止install太慢。\n\n> 因为eslint、typescript、unitTest都需要pnpm install，所以一个前置的init去缓存pnpm依赖项，可以加快后续的install速度。\n\n## outputs\n\njob里的outputs，可以在依赖它的其他job中访问到。这里使用`${{ steps.lint.outputs.result }}`去获取该job中lint这个step里的output里的result。\n\n> output有job和step两个维度，注意区分。\n\n\n## Run eslint\n\n它uses了`actions/github-script@v7`，这是github官方提供的一个action，可以在`with.script`里写js代码去执行，同时它会注入一些变量到script中去，见它的[官方文档](https://github.com/actions/github-script/tree/v7/)。\n\n> 对于简单的js代码，可以使用这个action去完成，不用再去写一个js文件。\n\n`result-encoding`是指定script返回的数据格式的，默认是json，这指定为string。\n\n> 为什么script里return了string，还要指定为string呢？\n> 因为`return 'hello'`在json encode后是`'\"hello\"'`，而string encode后为`'hello'`。\n\nscript里是原生的js代码了，里面的`exec`是该action注入的变量，用来执行shell命令。\n\n这段js代码做了两个事情，一是`git diff`获取pr中改动的文件列表，二是`eslint`检查这些增量文件，最后返回处理的结果。\n\n## fetch-depth\n\nInit repo这个step里设置了`fetch-depth: 0`，不然获取不到完整的git分支，具体看`actions/checkout`的解释，涉及到git的知识不展开细说了。\n\n## steps.lint.outputs.result\n\n`steps.lint.outputs.result`为什么能拿到lint step里的output.result呢？因为`actions/github-script`这个action内部将script的返回值，设置到`$GITHUB_OUTPUT`里了，且键名为`result`。\n<!--hexo-->\n\n# typescript\n\n和eslint的配置大同小异，只是改了对检测结果的判断。\n\n```yaml\ntypescript:\n        runs-on: ubuntu-latest\n        needs: [init]\n        outputs:\n            result: ${{ steps.lint.outputs.result }}\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n\n            - name: Run lint\n              id: lint\n              uses: actions/github-script@v7\n              with:\n                  result-encoding: string\n                  script: |\n                      let output = '';\n                      let outerr = '';\n\n                      await exec.exec(\n                        `pnpm run -r lint:ts`,\n                        [],\n                        {\n                          // silent: true,\n                          ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                output += data.toString();\n                            },\n                            stderr: (data) => {\n                                outerr += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      if (outerr) {\n                        return `:x: Some command execution errors, no business errors.`;\n                      }\n\n                      const errorMatch = output.match(/error TS/g);\n\n                      if (errorMatch) {\n                        return `:x: ${errorMatch?.length} errors`;\n                      }\n\n                      return `:white_check_mark: ${'0 error'}`;\n```\n<!--hexo-->\n\n# unitTest\n\n和eslint的配置大同小异，只是改了对检测结果的判断。唯一的区别是jest的检测结果是输出到stderr，见https://github.com/jestjs/jest/issues/5064。\n\n```yaml\nunitTest:\n        runs-on: ubuntu-latest\n        needs: [init]\n        outputs:\n            result: ${{ steps.lint.outputs.result }}\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n\n            - name: Run lint\n              id: lint\n              uses: actions/github-script@v7\n              with:\n                  result-encoding: string\n                  script: |\n                      let output = '';\n                      let outerr = '';\n\n                      await exec.exec(\n                        `pnpm run test`,\n                        [],\n                        {\n                          // silent: true,\n                          ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                output += data.toString();\n                            },\n                            stderr: (data) => {\n                                outerr += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      // why use outerr? https://github.com/jestjs/jest/issues/5064\n\n                      const failMatch = outerr.match(/Test Suites: \\d+ failed/);\n\n                      if (failMatch) {\n                        return `:x: ${failMatch?.[0]}`;\n                      }\n\n                      const errorMatch = outerr.match(/Jest: \"global\" coverage threshold for lines \\([0-9\\.]+%\\) not met: [0-9\\.]+%/);\n\n                      if (errorMatch) {\n                        return `:x: ${errorMatch?.[0]}`;\n                      }\n\n                      return `:white_check_mark: passed`;\n```\n<!--hexo-->\n\n# replyResult\n\n最后，将几个检测的结果进行汇总，回复到pr里就行了。\n\n```yaml\nreplyResult:\n        runs-on: ubuntu-latest\n        needs: [replyChecking, eslint, typescript, unitTest]\n        steps:\n            - name: Checkout\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n            - name: Get date time\n              id: getDateTime\n              run: echo \"result=$(TZ=Asia/Shanghai date)\" >> \"$GITHUB_OUTPUT\"\n            - name: Create or update a comment\n              uses: ./.github/actions/unique-comment\n              with:\n                  uniqueIdentifier: ${{ github.workflow }}\n                  body: |\n                      ## Eslint Check Result\n\n                      ${{needs.eslint.outputs.result}}\n\n                      ## Typescript Check Result\n\n                      ${{needs.typescript.outputs.result}}\n\n                      ## UnitTest Check Result\n\n                      ${{needs.unitTest.outputs.result}}\n\n                      ---\n\n                      Commented by Action [${{github.workflow}}](${{github.event.repository.html_url}}/actions/runs/${{github.run_id}}), last updated on ${{steps.getDateTime.outputs.result}}.\n```\n\n和replyChecking差不多，在body里使用`${{needs.eslint.outputs.result}}`去读取了eslint job的outputs。\n\n## 测试\n\n去发起新的pr，故意提交一个有eslint error的js/ts文件，看看表现吧~\n\n","slug":"github-actions-sample-eslint-in-pull-request","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvy60014jaotag4vedz0","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/36\">https://github.com/taoliujun/blog/issues/36</a></p>\n<!--hexo\n---\nurl: github-actions-sample-eslint-in-pull-request\ntags:\n  - github actions\n---\n-->\n\n<p>一个在pull request发起的时候执行eslint检测的workflow，<a href=\"https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml\">点此查看完整代码</a>，它实现的功能如下：</p>\n<ul>\n<li>在pull request创建、更新的时候执行。</li>\n<li>先回复一个评论，告诉用户正在运行。</li>\n<li>初始化仓库，并安装依赖，产生依赖缓存。</li>\n<li>运行eslint增量检查。</li>\n<li>运行typescript检查。</li>\n<li>运行jest检查。</li>\n<li>更新之前的评论，回复检查的结果。</li>\n</ul>\n<p>运行截图：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e\" alt=\"Alt text\"></p>\n<p>为避免歧义，涉及到github action的术语都是英文的。术语介绍如下：</p>\n<ul>\n<li>workflow，工作流，可以理解为yml文件。</li>\n<li>jobs，工作，一个workflow可以包含多个job，并行执行。</li>\n<li>steps，作业，一个job可以包含多个step，串行执行。</li>\n<li>action，操作，作业中具体的执行。</li>\n</ul>\n<h2 id=\"步骤\"><a href=\"#步骤\" class=\"headerlink\" title=\"步骤\"></a>步骤</h2><ul>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871790603\">初始化workflow</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871806576\">reply checking</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871818126\">.&#x2F;.github&#x2F;actions&#x2F;unique-comment</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871862632\">init</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871862779\">eslint</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871862850\">typescript</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871863037\">unit test</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871863117\">reply result</a></li>\n</ul>\n<!--hexo-->\n\n<h1 id=\"初始化workflow\"><a href=\"#初始化workflow\" class=\"headerlink\" title=\"初始化workflow\"></a>初始化workflow</h1><p>在项目中新建文件<code>.github/workflows/check-pull-request.yml</code>，内容如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">name:</span> <span class=\"string\">test</span> <span class=\"string\">check</span> <span class=\"string\">pull</span> <span class=\"string\">request</span></span><br><span class=\"line\"><span class=\"attr\">run-name:</span> <span class=\"string\">&#x27;check pull request #$<span class=\"template-variable\">&#123;&#123; github.event.pull_request.number &#125;&#125;</span>&#x27;</span></span><br><span class=\"line\"><span class=\"attr\">on:</span></span><br><span class=\"line\">    <span class=\"attr\">pull_request:</span></span><br><span class=\"line\">        <span class=\"attr\">types:</span> [<span class=\"string\">opened</span>, <span class=\"string\">synchronize</span>, <span class=\"string\">reopened</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">replyChecking:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;replyChecking&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">init:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;init&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;eslint&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">typescript:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;typescript&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">unitTest:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;unitTest&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">replyResult:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">replyChecking</span>, <span class=\"string\">eslint</span>, <span class=\"string\">typescript</span>, <span class=\"string\">unitTest</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;replyResult&#x27;</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"name和run-name\"><a href=\"#name和run-name\" class=\"headerlink\" title=\"name和run-name\"></a>name和run-name</h2><p>给workflow命名为<code>check pull request</code>，它会出现在Actions页面的左侧菜单中。运行实例名为<code>check pull request #44</code>，出现在右侧的运行列表中。如图：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/c1371ff2-8fc3-4e5b-8b60-3c572419938b\"></p>\n<p><code>run-name</code>中的<code>$&#123;&#123; github.event.pull_request.number &#125;&#125;</code>是workflow的上下文，这里读取了上下文中的pr编号。</p>\n<h2 id=\"on\"><a href=\"#on\" class=\"headerlink\" title=\"on\"></a>on</h2><p><code>on</code>指定了workflow的触发条件，这里配置了在pr创建、同步、重新打开的时候，触发该workflow。</p>\n<h2 id=\"jobs\"><a href=\"#jobs\" class=\"headerlink\" title=\"jobs\"></a>jobs</h2><p>按照设想，需要定义几个job，分别是：</p>\n<ul>\n<li>replyChecking：回复用户正在检查中</li>\n<li>init：初始化仓库，缓存依赖项</li>\n<li>eslint：运行eslint检查</li>\n<li>typescript：运行typescript检查</li>\n<li>unitTest：运行单元测试</li>\n<li>replyResult：回复用户检查结果</li>\n</ul>\n<p><code>jobs</code>是并行运行的，聪明如你肯定发现了，eslint、typescript、unitTest这三个job会涉及到安装npm依赖，所以它们最好在init后执行，确保依赖已经缓存了。</p>\n<p>其次，replyResult肯定要拿到eslint等job的结果才能执行，所以使用了<code>needs</code>管理它们的执行依赖关系。</p>\n<h3 id=\"runs-on\"><a href=\"#runs-on\" class=\"headerlink\" title=\"runs-on\"></a>runs-on</h3><p>每个job都运行在独立的容器中，github官方提供了windows、macos、linux多种容器，这里使用了ubuntu容器。</p>\n<h2 id=\"测试\"><a href=\"#测试\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>发起一个pr，看到Actions页面出现了新的运行实例，点击进去，可以看到各个job的运行情况和依赖关系：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e\"></p>\n<!--hexo-->\n\n<h1 id=\"replyChecking\"><a href=\"#replyChecking\" class=\"headerlink\" title=\"replyChecking\"></a>replyChecking</h1><p>在进行eslint检测之前，先在pr里回复<code>checking</code>，并且带上拽酷炫的话。将replyChecking改成如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">replyChecking:</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">        <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Checkout</span></span><br><span class=\"line\">          <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">          <span class=\"attr\">with:</span></span><br><span class=\"line\">              <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Get</span> <span class=\"string\">date</span> <span class=\"string\">time</span></span><br><span class=\"line\">          <span class=\"attr\">id:</span> <span class=\"string\">getDateTime</span></span><br><span class=\"line\">          <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;result=$(TZ=Asia/Shanghai date)&quot;</span> <span class=\"string\">&gt;&gt;</span> <span class=\"string\">&quot;$GITHUB_OUTPUT&quot;</span></span><br><span class=\"line\">        <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Create</span> <span class=\"string\">or</span> <span class=\"string\">update</span> <span class=\"string\">a</span> <span class=\"string\">comment</span></span><br><span class=\"line\">          <span class=\"attr\">uses:</span> <span class=\"string\">./.github/actions/unique-comment</span></span><br><span class=\"line\">          <span class=\"attr\">with:</span></span><br><span class=\"line\">              <span class=\"attr\">uniqueIdentifier:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workflow</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">              <span class=\"attr\">body:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                  **Checking...**</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                  <span class=\"string\">---</span></span><br><span class=\"line\"></span><br><span class=\"line\">                  <span class=\"string\">Commented</span> <span class=\"string\">by</span> <span class=\"string\">Action</span> [<span class=\"string\">$<span class=\"template-variable\">&#123;&#123;github.workflow&#125;&#125;</span></span>]<span class=\"string\">($&#123;&#123;github.event.repository.html_url&#125;&#125;/actions/runs/$&#123;&#123;github.run_id&#125;&#125;),</span> <span class=\"string\">last</span> <span class=\"string\">updated</span> <span class=\"string\">on</span> <span class=\"string\">$&#123;&#123;steps.getDateTime.outputs.result&#125;&#125;.</span></span><br></pre></td></tr></table></figure>\n\n<p><code>steps</code>每一步里<code>name</code>、<code>id</code>是可选的，<code>name</code>在Actions详情页面里会显示，更直观的看到step的名称，推荐写上。</p>\n<h2 id=\"Checkout\"><a href=\"#Checkout\" class=\"headerlink\" title=\"Checkout\"></a>Checkout</h2><p><code>uses</code>表示使用一个action，名为<code>actions/checkout@v4</code>，它用来拉取仓库。</p>\n<blockquote>\n<p>同其他编程语言一样，重复的action可以封装起来。<a href=\"https://github.com/marketplace?type=actions\">action市场</a>提供了很多。</p>\n</blockquote>\n<p><code>with</code>属性指定了该action的输入参数，每个action的参数不尽相同。</p>\n<p><code>ref</code>参数表示要拉取的分支，<code>$&#123;&#123;github.head_ref&#125;&#125;</code>也是一个上下文，表示当前pr的源分支。</p>\n<h2 id=\"Get-Date-time\"><a href=\"#Get-Date-time\" class=\"headerlink\" title=\"Get Date time\"></a>Get Date time</h2><p>这step还写了<code>id</code>，表示该step在该job中的唯一标识，为什么要写呢？是为了下一步step能根据<code>id</code>读取到它的<code>output</code>。</p>\n<blockquote>\n<p><strong>output</strong>是workflow中非常重要的概念，它用于在step之间、job之间分享简单的数据。</p>\n</blockquote>\n<p><code>run</code>就是在容器中跑一个命令，这里跑了一个unix bash命令，将当前时间写入到<code>$GITHUB_OUTPUT</code>中，键名为<code>result</code>。</p>\n<blockquote>\n<p><code>$GITHUB_OUTPUT</code>是workflow注入到容器中的一个路径，用于存放output。</p>\n</blockquote>\n<h2 id=\"Create-or-update-a-comment\"><a href=\"#Create-or-update-a-comment\" class=\"headerlink\" title=\"Create or update a comment\"></a>Create or update a comment</h2><p><code>uses</code>使用了本地的action，这个action用于创建或更新一个唯一回复，下一节说。</p>\n<blockquote>\n<p>有时候，官方或市场的action并不能满足你的需要，就得自己写一个了。</p>\n</blockquote>\n<p>同理，该action也有<code>with</code>属性，<code>uniqueIdentifier</code>是回复评论的唯一标识，<code>body</code>是回复的内容，内容使用了markdown语法，里面还涉及到上下文不一一细讲了。只说<code>$&#123;&#123;steps.getDateTime.outputs.result&#125;&#125;</code>这个上下文表示获取getDateTime这个step中，键名为<code>result</code>的值。</p>\n<p>如果你不需要在内容里插入时间，那么上面的<code>Get Date time</code>就可以省略了。</p>\n<h2 id=\"测试-1\"><a href=\"#测试-1\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>因为我已经有完整的代码了，所以运行后，pr中会有一个回复，如图：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/42396a84-b798-4f4e-9f39-5bf92a8acb15\"></p>\n<!--hexo-->\n\n<h1 id=\"x2F-github-x2F-actions-x2F-unique-comment\"><a href=\"#x2F-github-x2F-actions-x2F-unique-comment\" class=\"headerlink\" title=\".&#x2F;.github&#x2F;actions&#x2F;unique-comment\"></a>.&#x2F;.github&#x2F;actions&#x2F;unique-comment</h1><p>这是一个封装的javascript action，用于对issue创建、更新唯一评论。</p>\n<h2 id=\"目录结构\"><a href=\"#目录结构\" class=\"headerlink\" title=\"目录结构\"></a>目录结构</h2><p>创建目录<code>./.github/actions/unique-comment</code>，最终目录结构如下：</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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><br><span class=\"line\">├── action.yml</span><br><span class=\"line\">├── config</span><br><span class=\"line\">│   └── webpack.config.js</span><br><span class=\"line\">├── dist</span><br><span class=\"line\">│   ├── index.js</span><br><span class=\"line\">│   └── index.js.LICENSE.txt</span><br><span class=\"line\">├── package.json</span><br><span class=\"line\">└── src</span><br><span class=\"line\">    └── index.js</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"action-yml\"><a href=\"#action-yml\" class=\"headerlink\" title=\"action.yml\"></a>action.yml</h2><p>这是action的配置文件，必须存在，内容如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">name:</span> <span class=\"string\">unique-comment</span></span><br><span class=\"line\"><span class=\"attr\">description:</span> <span class=\"string\">create</span> <span class=\"string\">or</span> <span class=\"string\">update</span> <span class=\"string\">a</span> <span class=\"string\">unique</span> <span class=\"string\">comment</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">runs:</span></span><br><span class=\"line\">    <span class=\"attr\">using:</span> <span class=\"string\">&#x27;node20&#x27;</span></span><br><span class=\"line\">    <span class=\"attr\">main:</span> <span class=\"string\">&#x27;./dist/index.js&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">inputs:</span></span><br><span class=\"line\">    <span class=\"attr\">token:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;GitHub token&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.token</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">owner:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Repository owner&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.event.repository.owner.login</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">repo:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Repository name&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.event.repository.name</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">issue_number:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Issue number&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.event.number</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">body:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Comment body&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">    <span class=\"attr\">uniqueIdentifier:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Unique identifier for comment&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">&#x27;unique-comment&#x27;</span></span><br></pre></td></tr></table></figure>\n\n<p>大部分属性不一一细讲了，都是简单的英文望文生义即可。</p>\n<p><code>runs</code>表示运行在<code>node20</code>环境下，入口文件为<code>./dist/index.js</code>。</p>\n<p><code>inputs</code>表示接受的参数，也就是之前提到的<code>with</code>属性里要输入的参数。用<code>required</code>表示是否必须传入，<code>default</code>表示默认值。</p>\n<h2 id=\"src-x2F-index-js\"><a href=\"#src-x2F-index-js\" class=\"headerlink\" title=\"src&#x2F;index.js\"></a>src&#x2F;index.js</h2><p>为什么入口文件是<code>dist/index.js</code>，而不是<code>src/index.js</code>呢？因为要引用一些github官方提供的快捷操作github REST API的js包去操作issue评论(pull request也是一种issue)，最终打包后的文件才能在工作流中稳妥的运行。所以，写好<code>src/index.js</code>，再打包就行。</p>\n<p>该文件代码如下：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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> core = <span class=\"built_in\">require</span>(<span class=\"string\">&#x27;@actions/core&#x27;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> github = <span class=\"built_in\">require</span>(<span class=\"string\">&#x27;@actions/github&#x27;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title function_\">main</span> = <span class=\"keyword\">async</span> (<span class=\"params\"></span>) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> token = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;token&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> owner = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;owner&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> repo = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;repo&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> issueNumber = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;issue_number&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> uniqueIdentifier = <span class=\"string\">`[^uniqueIdentifier]: <span class=\"subst\">$&#123;core.getInput(<span class=\"string\">&#x27;uniqueIdentifier&#x27;</span>)&#125;</span>`</span>;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> body = <span class=\"string\">`<span class=\"subst\">$&#123;core.getInput(<span class=\"string\">&#x27;body&#x27;</span>)&#125;</span>\\n\\n<span class=\"subst\">$&#123;uniqueIdentifier&#125;</span>`</span>;</span><br><span class=\"line\"></span><br><span class=\"line\">    core.<span class=\"title function_\">debug</span>(<span class=\"string\">`uniqueIdentifier is <span class=\"subst\">$&#123;uniqueIdentifier&#125;</span>`</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> octokit = github.<span class=\"title function_\">getOctokit</span>(token);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> comments = <span class=\"keyword\">await</span> octokit.<span class=\"property\">rest</span>.<span class=\"property\">issues</span>.<span class=\"title function_\">listComments</span>(&#123;</span><br><span class=\"line\">        owner,</span><br><span class=\"line\">        repo,</span><br><span class=\"line\">        <span class=\"attr\">issue_number</span>: issueNumber,</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> botComment = comments.<span class=\"property\">data</span>.<span class=\"title function_\">find</span>(<span class=\"function\">(<span class=\"params\">v</span>) =&gt;</span> v.<span class=\"property\">body</span>.<span class=\"title function_\">includes</span>(uniqueIdentifier));</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">if</span> (botComment) &#123;</span><br><span class=\"line\">        core.<span class=\"title function_\">info</span>(<span class=\"string\">&#x27;update comment successfully.&#x27;</span>);</span><br><span class=\"line\">        <span class=\"keyword\">await</span> octokit.<span class=\"property\">rest</span>.<span class=\"property\">issues</span>.<span class=\"title function_\">updateComment</span>(&#123;</span><br><span class=\"line\">            owner,</span><br><span class=\"line\">            repo,</span><br><span class=\"line\">            <span class=\"attr\">comment_id</span>: botComment.<span class=\"property\">id</span>,</span><br><span class=\"line\">            body,</span><br><span class=\"line\">        &#125;);</span><br><span class=\"line\">    &#125; <span class=\"keyword\">else</span> &#123;</span><br><span class=\"line\">        core.<span class=\"title function_\">info</span>(<span class=\"string\">&#x27;create comment successfully.&#x27;</span>);</span><br><span class=\"line\">        <span class=\"keyword\">await</span> octokit.<span class=\"property\">rest</span>.<span class=\"property\">issues</span>.<span class=\"title function_\">createComment</span>(&#123;</span><br><span class=\"line\">            owner,</span><br><span class=\"line\">            repo,</span><br><span class=\"line\">            <span class=\"attr\">issue_number</span>: issueNumber,</span><br><span class=\"line\">            body,</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=\"keyword\">try</span> &#123;</span><br><span class=\"line\">    <span class=\"title function_\">main</span>();</span><br><span class=\"line\">&#125; <span class=\"keyword\">catch</span> (err) &#123;</span><br><span class=\"line\">    core.<span class=\"title function_\">setFailed</span>(err.<span class=\"property\">message</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><code>@actions/core</code>和<code>@actions/github</code>是github官方提供的js包，前者可以方便的读取入参等，后者可以方便的操作github REST API。</p>\n<p><code>main</code>函数的代码就是原生javascript，不一一解释了，主要通过<code>uniqueIdentifier</code>来判断是否发布过评论，如果是，就更新评论，否则就创建评论。</p>\n<blockquote>\n<p>markdown语法<code>[^uniqueIdentifier]</code>表示脚注，不会被渲染。</p>\n</blockquote>\n<p><code>core.setFailed(err.message);</code>表示抛出退出代码。</p>\n<h2 id=\"config-x2F-webpack-config-js\"><a href=\"#config-x2F-webpack-config-js\" class=\"headerlink\" title=\"config&#x2F;webpack.config.js\"></a>config&#x2F;webpack.config.js</h2><p>打包用的，配置简单可用即可：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br></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\">mode</span>: <span class=\"string\">&#x27;production&#x27;</span>,</span><br><span class=\"line\">    <span class=\"attr\">target</span>: <span class=\"string\">&#x27;node20&#x27;</span>,</span><br><span class=\"line\">    <span class=\"attr\">entry</span>: <span class=\"string\">&#x27;./src/index.js&#x27;</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\">&#x27;index.js&#x27;</span>,</span><br><span class=\"line\">        <span class=\"attr\">clean</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>\n\n<h2 id=\"package-json\"><a href=\"#package-json\" class=\"headerlink\" title=\"package.json\"></a>package.json</h2><figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;name&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;unique-comment&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;version&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;1.0.0&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;private&quot;</span><span class=\"punctuation\">:</span> <span class=\"literal\"><span class=\"keyword\">true</span></span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;scripts&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;build&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;webpack --config ./config/webpack.config.js&quot;</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;dependencies&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;@actions/core&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^1.10.1&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;@actions/github&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^6.0.0&quot;</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;devDependencies&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;webpack&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^5.89.0&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;webpack-cli&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^5.1.4&quot;</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span></span><br></pre></td></tr></table></figure>\n\n<p>没啥好说的，列出了依赖项。和一个打包脚本。</p>\n<h2 id=\"测试-2\"><a href=\"#测试-2\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>修改了<code>src/index.js</code>得<code>build</code>，然后push到github仓库。</p>\n<p>记得将<strong>dist</strong>目录也提交到github仓库。</p>\n<!--hexo-->\n\n<h1 id=\"init\"><a href=\"#init\" class=\"headerlink\" title=\"init\"></a>init</h1><p>现在，开始搞正经的了。</p>\n<p>先初始化项目，这个job的目的仅仅是为了缓存pnpm依赖项，如果你的项目的依赖项不经常更新，可以省略这个job，后续也不要<code>needs</code>这个job。</p>\n<p>将init改成如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">init:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br></pre></td></tr></table></figure>\n\n<p>相信经过对之前的job的了解，这里的配置就看起来很简单了。</p>\n<h2 id=\"Init-pnpm\"><a href=\"#Init-pnpm\" class=\"headerlink\" title=\"Init pnpm\"></a>Init pnpm</h2><p>使用第三方action，安装pnpm@^8。</p>\n<h2 id=\"Init-node\"><a href=\"#Init-node\" class=\"headerlink\" title=\"Init node\"></a>Init node</h2><p><code>cache: &#39;pnpm&#39;</code>指定缓存机制，它内部是利用了workflow的cache机制。</p>\n<h2 id=\"Install-dependencies\"><a href=\"#Install-dependencies\" class=\"headerlink\" title=\"Install dependencies\"></a>Install dependencies</h2><p>安装依赖项，触发缓存。</p>\n<!--hexo-->\n\n<h1 id=\"eslint\"><a href=\"#eslint\" class=\"headerlink\" title=\"eslint\"></a>eslint</h1><p>将eslint改成如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">outputs:</span></span><br><span class=\"line\">            <span class=\"attr\">result:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">steps.lint.outputs.result</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\">                  <span class=\"attr\">fetch-depth:</span> <span class=\"number\">0</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Run</span> <span class=\"string\">eslint</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/github-script@v7</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">result-encoding:</span> <span class=\"string\">string</span></span><br><span class=\"line\">                  <span class=\"attr\">script:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      let output = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let outerr = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let diffFiles = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">await</span> <span class=\"string\">exec.exec(</span></span><br><span class=\"line\">                        <span class=\"string\">`git</span> <span class=\"string\">diff</span> <span class=\"string\">--name-only</span> <span class=\"string\">origin/$&#123;&#123;github.base_ref&#125;&#125;`,</span></span><br><span class=\"line\">                        []<span class=\"string\">,</span></span><br><span class=\"line\">                        &#123;</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">silent:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">ignoreReturnCode:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">listeners:</span> &#123;</span><br><span class=\"line\">                            <span class=\"attr\">stdout:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">diffFiles</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</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=\"string\">);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">lintFiles</span> <span class=\"string\">=</span> <span class=\"string\">diffFiles.split(`\\n`).filter((file)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">file.endsWith(&#x27;.js&#x27;)</span> <span class=\"string\">||</span> <span class=\"string\">file.endsWith(&#x27;.ts&#x27;)</span> <span class=\"string\">||</span> <span class=\"string\">file.endsWith(&#x27;.tsx&#x27;)</span></span><br><span class=\"line\">                      &#125;<span class=\"string\">).join(&#x27;</span> <span class=\"string\">&#x27;);</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      await exec.exec(</span></span><br><span class=\"line\"><span class=\"string\">                        // &quot;pnpm run lint --format stylish&quot;,</span></span><br><span class=\"line\"><span class=\"string\">                        `pnpm eslint $&#123;lintFiles&#125;`,</span></span><br><span class=\"line\"><span class=\"string\">                        [],</span></span><br><span class=\"line\"><span class=\"string\">                        &#123;</span></span><br><span class=\"line\"><span class=\"string\">                          // silent: true,</span></span><br><span class=\"line\"><span class=\"string\">                          ignoreReturnCode: true,</span></span><br><span class=\"line\"><span class=\"string\">                          listeners: &#123;</span></span><br><span class=\"line\"><span class=\"string\">                            stdout: (data) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"string\">                                output += data.toString();</span></span><br><span class=\"line\"><span class=\"string\">                            &#125;,</span></span><br><span class=\"line\"><span class=\"string\">                            stderr: (data) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"string\">                                outerr += data.toString();</span></span><br><span class=\"line\"><span class=\"string\">                            &#125;,</span></span><br><span class=\"line\"><span class=\"string\">                          &#125;,</span></span><br><span class=\"line\"><span class=\"string\">                        &#125;</span></span><br><span class=\"line\"><span class=\"string\">                      );</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      if (outerr) &#123;</span></span><br><span class=\"line\"><span class=\"string\">                        return `:x: Some command execution errors, non-eslint business errors.`;</span></span><br><span class=\"line\"><span class=\"string\">                      &#125;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      const errorMatch = output.match(/(\\d+) errors?/);</span></span><br><span class=\"line\"><span class=\"string\">                      const warnMatch = output.match(/(\\d+) warnings?/);</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      if (errorMatch &amp;&amp; errorMatch?.[1] !== &#x27;</span><span class=\"number\">0</span><span class=\"string\">&#x27;) &#123;</span></span><br><span class=\"line\"><span class=\"string\">                        return `:x: $&#123;errorMatch?.[0]&#125; $&#123;warnMatch?.[0]&#125;`;</span></span><br><span class=\"line\"><span class=\"string\">                      &#125;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      return `:white_check_mark: $&#123;errorMatch?.[0] || &#x27;</span><span class=\"number\">0</span> <span class=\"string\">error&#x27;&#125;</span> <span class=\"string\">$&#123;warnMatch?.[0]</span> <span class=\"string\">||</span> <span class=\"string\">&#x27;0 warning&#x27;</span><span class=\"string\">&#125;`;</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"needs\"><a href=\"#needs\" class=\"headerlink\" title=\"needs\"></a>needs</h2><p>使用<code>needs</code>依赖init，可以使用到pnpm的缓存项，防止install太慢。</p>\n<blockquote>\n<p>因为eslint、typescript、unitTest都需要pnpm install，所以一个前置的init去缓存pnpm依赖项，可以加快后续的install速度。</p>\n</blockquote>\n<h2 id=\"outputs\"><a href=\"#outputs\" class=\"headerlink\" title=\"outputs\"></a>outputs</h2><p>job里的outputs，可以在依赖它的其他job中访问到。这里使用<code>$&#123;&#123; steps.lint.outputs.result &#125;&#125;</code>去获取该job中lint这个step里的output里的result。</p>\n<blockquote>\n<p>output有job和step两个维度，注意区分。</p>\n</blockquote>\n<h2 id=\"Run-eslint\"><a href=\"#Run-eslint\" class=\"headerlink\" title=\"Run eslint\"></a>Run eslint</h2><p>它uses了<code>actions/github-script@v7</code>，这是github官方提供的一个action，可以在<code>with.script</code>里写js代码去执行，同时它会注入一些变量到script中去，见它的<a href=\"https://github.com/actions/github-script/tree/v7/\">官方文档</a>。</p>\n<blockquote>\n<p>对于简单的js代码，可以使用这个action去完成，不用再去写一个js文件。</p>\n</blockquote>\n<p><code>result-encoding</code>是指定script返回的数据格式的，默认是json，这指定为string。</p>\n<blockquote>\n<p>为什么script里return了string，还要指定为string呢？<br>因为<code>return &#39;hello&#39;</code>在json encode后是<code>&#39;&quot;hello&quot;&#39;</code>，而string encode后为<code>&#39;hello&#39;</code>。</p>\n</blockquote>\n<p>script里是原生的js代码了，里面的<code>exec</code>是该action注入的变量，用来执行shell命令。</p>\n<p>这段js代码做了两个事情，一是<code>git diff</code>获取pr中改动的文件列表，二是<code>eslint</code>检查这些增量文件，最后返回处理的结果。</p>\n<h2 id=\"fetch-depth\"><a href=\"#fetch-depth\" class=\"headerlink\" title=\"fetch-depth\"></a>fetch-depth</h2><p>Init repo这个step里设置了<code>fetch-depth: 0</code>，不然获取不到完整的git分支，具体看<code>actions/checkout</code>的解释，涉及到git的知识不展开细说了。</p>\n<h2 id=\"steps-lint-outputs-result\"><a href=\"#steps-lint-outputs-result\" class=\"headerlink\" title=\"steps.lint.outputs.result\"></a>steps.lint.outputs.result</h2><p><code>steps.lint.outputs.result</code>为什么能拿到lint step里的output.result呢？因为<code>actions/github-script</code>这个action内部将script的返回值，设置到<code>$GITHUB_OUTPUT</code>里了，且键名为<code>result</code>。</p>\n<!--hexo-->\n\n<h1 id=\"typescript\"><a href=\"#typescript\" class=\"headerlink\" title=\"typescript\"></a>typescript</h1><p>和eslint的配置大同小异，只是改了对检测结果的判断。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">typescript:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">outputs:</span></span><br><span class=\"line\">            <span class=\"attr\">result:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">steps.lint.outputs.result</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Run</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/github-script@v7</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">result-encoding:</span> <span class=\"string\">string</span></span><br><span class=\"line\">                  <span class=\"attr\">script:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      let output = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let outerr = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">await</span> <span class=\"string\">exec.exec(</span></span><br><span class=\"line\">                        <span class=\"string\">`pnpm</span> <span class=\"string\">run</span> <span class=\"string\">-r</span> <span class=\"string\">lint:ts`,</span></span><br><span class=\"line\">                        []<span class=\"string\">,</span></span><br><span class=\"line\">                        &#123;</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">silent:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">ignoreReturnCode:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">listeners:</span> &#123;</span><br><span class=\"line\">                            <span class=\"attr\">stdout:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">output</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</span></span><br><span class=\"line\">                            &#125;,</span><br><span class=\"line\">                            <span class=\"attr\">stderr:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">outerr</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</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=\"string\">);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(outerr)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">Some</span> <span class=\"string\">command</span> <span class=\"string\">execution</span> <span class=\"string\">errors</span>, <span class=\"literal\">no</span> <span class=\"string\">business</span> <span class=\"string\">errors.`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">errorMatch</span> <span class=\"string\">=</span> <span class=\"string\">output.match(/error</span> <span class=\"string\">TS/g);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(errorMatch)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">$</span>&#123;<span class=\"string\">errorMatch?.length</span>&#125; <span class=\"string\">errors`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">return</span> <span class=\"string\">`:white_check_mark:</span> <span class=\"string\">$&#123;&#x27;0</span> <span class=\"string\">error&#x27;&#125;`;</span></span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"unitTest\"><a href=\"#unitTest\" class=\"headerlink\" title=\"unitTest\"></a>unitTest</h1><p>和eslint的配置大同小异，只是改了对检测结果的判断。唯一的区别是jest的检测结果是输出到stderr，见<a href=\"https://github.com/jestjs/jest/issues/5064%E3%80%82\">https://github.com/jestjs/jest/issues/5064。</a></p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">unitTest:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">outputs:</span></span><br><span class=\"line\">            <span class=\"attr\">result:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">steps.lint.outputs.result</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Run</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/github-script@v7</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">result-encoding:</span> <span class=\"string\">string</span></span><br><span class=\"line\">                  <span class=\"attr\">script:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      let output = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let outerr = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">await</span> <span class=\"string\">exec.exec(</span></span><br><span class=\"line\">                        <span class=\"string\">`pnpm</span> <span class=\"string\">run</span> <span class=\"string\">test`,</span></span><br><span class=\"line\">                        []<span class=\"string\">,</span></span><br><span class=\"line\">                        &#123;</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">silent:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">ignoreReturnCode:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">listeners:</span> &#123;</span><br><span class=\"line\">                            <span class=\"attr\">stdout:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">output</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</span></span><br><span class=\"line\">                            &#125;,</span><br><span class=\"line\">                            <span class=\"attr\">stderr:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">outerr</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</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=\"string\">);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">//</span> <span class=\"string\">why</span> <span class=\"string\">use</span> <span class=\"string\">outerr?</span> <span class=\"string\">https://github.com/jestjs/jest/issues/5064</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">failMatch</span> <span class=\"string\">=</span> <span class=\"string\">outerr.match(/Test</span> <span class=\"attr\">Suites:</span> <span class=\"string\">\\d+</span> <span class=\"string\">failed/);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(failMatch)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">$</span>&#123;<span class=\"string\">failMatch?.</span>[<span class=\"number\">0</span>]&#125;<span class=\"string\">`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">errorMatch</span> <span class=\"string\">=</span> <span class=\"string\">outerr.match(/Jest:</span> <span class=\"string\">&quot;global&quot;</span> <span class=\"string\">coverage</span> <span class=\"string\">threshold</span> <span class=\"string\">for</span> <span class=\"string\">lines</span> <span class=\"string\">\\([0-9\\.]+%\\)</span> <span class=\"attr\">not met:</span> [<span class=\"number\">0</span><span class=\"number\">-9</span><span class=\"string\">\\.</span>]<span class=\"string\">+%/);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(errorMatch)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">$</span>&#123;<span class=\"string\">errorMatch?.</span>[<span class=\"number\">0</span>]&#125;<span class=\"string\">`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">return</span> <span class=\"string\">`:white_check_mark:</span> <span class=\"string\">passed`;</span></span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"replyResult\"><a href=\"#replyResult\" class=\"headerlink\" title=\"replyResult\"></a>replyResult</h1><p>最后，将几个检测的结果进行汇总，回复到pr里就行了。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">replyResult:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">replyChecking</span>, <span class=\"string\">eslint</span>, <span class=\"string\">typescript</span>, <span class=\"string\">unitTest</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Checkout</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Get</span> <span class=\"string\">date</span> <span class=\"string\">time</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">getDateTime</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;result=$(TZ=Asia/Shanghai date)&quot;</span> <span class=\"string\">&gt;&gt;</span> <span class=\"string\">&quot;$GITHUB_OUTPUT&quot;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Create</span> <span class=\"string\">or</span> <span class=\"string\">update</span> <span class=\"string\">a</span> <span class=\"string\">comment</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">./.github/actions/unique-comment</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">uniqueIdentifier:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workflow</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">                  <span class=\"attr\">body:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      ## Eslint Check Result</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">$&#123;&#123;needs.eslint.outputs.result&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"comment\">## Typescript Check Result</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">$&#123;&#123;needs.typescript.outputs.result&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"comment\">## UnitTest Check Result</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">$&#123;&#123;needs.unitTest.outputs.result&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">---</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">Commented</span> <span class=\"string\">by</span> <span class=\"string\">Action</span> [<span class=\"string\">$<span class=\"template-variable\">&#123;&#123;github.workflow&#125;&#125;</span></span>]<span class=\"string\">($&#123;&#123;github.event.repository.html_url&#125;&#125;/actions/runs/$&#123;&#123;github.run_id&#125;&#125;),</span> <span class=\"string\">last</span> <span class=\"string\">updated</span> <span class=\"string\">on</span> <span class=\"string\">$&#123;&#123;steps.getDateTime.outputs.result&#125;&#125;.</span></span><br></pre></td></tr></table></figure>\n\n<p>和replyChecking差不多，在body里使用<code>$&#123;&#123;needs.eslint.outputs.result&#125;&#125;</code>去读取了eslint job的outputs。</p>\n<h2 id=\"测试-3\"><a href=\"#测试-3\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>去发起新的pr，故意提交一个有eslint error的js&#x2F;ts文件，看看表现吧~</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/36\">https://github.com/taoliujun/blog/issues/36</a></p>\n<!--hexo\n---\nurl: github-actions-sample-eslint-in-pull-request\ntags:\n  - github actions\n---\n-->\n\n<p>一个在pull request发起的时候执行eslint检测的workflow，<a href=\"https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml\">点此查看完整代码</a>，它实现的功能如下：</p>\n<ul>\n<li>在pull request创建、更新的时候执行。</li>\n<li>先回复一个评论，告诉用户正在运行。</li>\n<li>初始化仓库，并安装依赖，产生依赖缓存。</li>\n<li>运行eslint增量检查。</li>\n<li>运行typescript检查。</li>\n<li>运行jest检查。</li>\n<li>更新之前的评论，回复检查的结果。</li>\n</ul>\n<p>运行截图：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e\" alt=\"Alt text\"></p>\n<p>为避免歧义，涉及到github action的术语都是英文的。术语介绍如下：</p>\n<ul>\n<li>workflow，工作流，可以理解为yml文件。</li>\n<li>jobs，工作，一个workflow可以包含多个job，并行执行。</li>\n<li>steps，作业，一个job可以包含多个step，串行执行。</li>\n<li>action，操作，作业中具体的执行。</li>\n</ul>\n<h2 id=\"步骤\"><a href=\"#步骤\" class=\"headerlink\" title=\"步骤\"></a>步骤</h2><ul>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871790603\">初始化workflow</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871806576\">reply checking</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871818126\">.&#x2F;.github&#x2F;actions&#x2F;unique-comment</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871862632\">init</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871862779\">eslint</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871862850\">typescript</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871863037\">unit test</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871863117\">reply result</a></li>\n</ul>\n<!--hexo-->\n\n<h1 id=\"初始化workflow\"><a href=\"#初始化workflow\" class=\"headerlink\" title=\"初始化workflow\"></a>初始化workflow</h1><p>在项目中新建文件<code>.github/workflows/check-pull-request.yml</code>，内容如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">name:</span> <span class=\"string\">test</span> <span class=\"string\">check</span> <span class=\"string\">pull</span> <span class=\"string\">request</span></span><br><span class=\"line\"><span class=\"attr\">run-name:</span> <span class=\"string\">&#x27;check pull request #$<span class=\"template-variable\">&#123;&#123; github.event.pull_request.number &#125;&#125;</span>&#x27;</span></span><br><span class=\"line\"><span class=\"attr\">on:</span></span><br><span class=\"line\">    <span class=\"attr\">pull_request:</span></span><br><span class=\"line\">        <span class=\"attr\">types:</span> [<span class=\"string\">opened</span>, <span class=\"string\">synchronize</span>, <span class=\"string\">reopened</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">replyChecking:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;replyChecking&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">init:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;init&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;eslint&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">typescript:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;typescript&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">unitTest:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;unitTest&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">replyResult:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">replyChecking</span>, <span class=\"string\">eslint</span>, <span class=\"string\">typescript</span>, <span class=\"string\">unitTest</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;replyResult&#x27;</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"name和run-name\"><a href=\"#name和run-name\" class=\"headerlink\" title=\"name和run-name\"></a>name和run-name</h2><p>给workflow命名为<code>check pull request</code>，它会出现在Actions页面的左侧菜单中。运行实例名为<code>check pull request #44</code>，出现在右侧的运行列表中。如图：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/c1371ff2-8fc3-4e5b-8b60-3c572419938b\"></p>\n<p><code>run-name</code>中的<code>$&#123;&#123; github.event.pull_request.number &#125;&#125;</code>是workflow的上下文，这里读取了上下文中的pr编号。</p>\n<h2 id=\"on\"><a href=\"#on\" class=\"headerlink\" title=\"on\"></a>on</h2><p><code>on</code>指定了workflow的触发条件，这里配置了在pr创建、同步、重新打开的时候，触发该workflow。</p>\n<h2 id=\"jobs\"><a href=\"#jobs\" class=\"headerlink\" title=\"jobs\"></a>jobs</h2><p>按照设想，需要定义几个job，分别是：</p>\n<ul>\n<li>replyChecking：回复用户正在检查中</li>\n<li>init：初始化仓库，缓存依赖项</li>\n<li>eslint：运行eslint检查</li>\n<li>typescript：运行typescript检查</li>\n<li>unitTest：运行单元测试</li>\n<li>replyResult：回复用户检查结果</li>\n</ul>\n<p><code>jobs</code>是并行运行的，聪明如你肯定发现了，eslint、typescript、unitTest这三个job会涉及到安装npm依赖，所以它们最好在init后执行，确保依赖已经缓存了。</p>\n<p>其次，replyResult肯定要拿到eslint等job的结果才能执行，所以使用了<code>needs</code>管理它们的执行依赖关系。</p>\n<h3 id=\"runs-on\"><a href=\"#runs-on\" class=\"headerlink\" title=\"runs-on\"></a>runs-on</h3><p>每个job都运行在独立的容器中，github官方提供了windows、macos、linux多种容器，这里使用了ubuntu容器。</p>\n<h2 id=\"测试\"><a href=\"#测试\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>发起一个pr，看到Actions页面出现了新的运行实例，点击进去，可以看到各个job的运行情况和依赖关系：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e\"></p>\n<!--hexo-->\n\n<h1 id=\"replyChecking\"><a href=\"#replyChecking\" class=\"headerlink\" title=\"replyChecking\"></a>replyChecking</h1><p>在进行eslint检测之前，先在pr里回复<code>checking</code>，并且带上拽酷炫的话。将replyChecking改成如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">replyChecking:</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">        <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Checkout</span></span><br><span class=\"line\">          <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">          <span class=\"attr\">with:</span></span><br><span class=\"line\">              <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Get</span> <span class=\"string\">date</span> <span class=\"string\">time</span></span><br><span class=\"line\">          <span class=\"attr\">id:</span> <span class=\"string\">getDateTime</span></span><br><span class=\"line\">          <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;result=$(TZ=Asia/Shanghai date)&quot;</span> <span class=\"string\">&gt;&gt;</span> <span class=\"string\">&quot;$GITHUB_OUTPUT&quot;</span></span><br><span class=\"line\">        <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Create</span> <span class=\"string\">or</span> <span class=\"string\">update</span> <span class=\"string\">a</span> <span class=\"string\">comment</span></span><br><span class=\"line\">          <span class=\"attr\">uses:</span> <span class=\"string\">./.github/actions/unique-comment</span></span><br><span class=\"line\">          <span class=\"attr\">with:</span></span><br><span class=\"line\">              <span class=\"attr\">uniqueIdentifier:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workflow</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">              <span class=\"attr\">body:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                  **Checking...**</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                  <span class=\"string\">---</span></span><br><span class=\"line\"></span><br><span class=\"line\">                  <span class=\"string\">Commented</span> <span class=\"string\">by</span> <span class=\"string\">Action</span> [<span class=\"string\">$<span class=\"template-variable\">&#123;&#123;github.workflow&#125;&#125;</span></span>]<span class=\"string\">($&#123;&#123;github.event.repository.html_url&#125;&#125;/actions/runs/$&#123;&#123;github.run_id&#125;&#125;),</span> <span class=\"string\">last</span> <span class=\"string\">updated</span> <span class=\"string\">on</span> <span class=\"string\">$&#123;&#123;steps.getDateTime.outputs.result&#125;&#125;.</span></span><br></pre></td></tr></table></figure>\n\n<p><code>steps</code>每一步里<code>name</code>、<code>id</code>是可选的，<code>name</code>在Actions详情页面里会显示，更直观的看到step的名称，推荐写上。</p>\n<h2 id=\"Checkout\"><a href=\"#Checkout\" class=\"headerlink\" title=\"Checkout\"></a>Checkout</h2><p><code>uses</code>表示使用一个action，名为<code>actions/checkout@v4</code>，它用来拉取仓库。</p>\n<blockquote>\n<p>同其他编程语言一样，重复的action可以封装起来。<a href=\"https://github.com/marketplace?type=actions\">action市场</a>提供了很多。</p>\n</blockquote>\n<p><code>with</code>属性指定了该action的输入参数，每个action的参数不尽相同。</p>\n<p><code>ref</code>参数表示要拉取的分支，<code>$&#123;&#123;github.head_ref&#125;&#125;</code>也是一个上下文，表示当前pr的源分支。</p>\n<h2 id=\"Get-Date-time\"><a href=\"#Get-Date-time\" class=\"headerlink\" title=\"Get Date time\"></a>Get Date time</h2><p>这step还写了<code>id</code>，表示该step在该job中的唯一标识，为什么要写呢？是为了下一步step能根据<code>id</code>读取到它的<code>output</code>。</p>\n<blockquote>\n<p><strong>output</strong>是workflow中非常重要的概念，它用于在step之间、job之间分享简单的数据。</p>\n</blockquote>\n<p><code>run</code>就是在容器中跑一个命令，这里跑了一个unix bash命令，将当前时间写入到<code>$GITHUB_OUTPUT</code>中，键名为<code>result</code>。</p>\n<blockquote>\n<p><code>$GITHUB_OUTPUT</code>是workflow注入到容器中的一个路径，用于存放output。</p>\n</blockquote>\n<h2 id=\"Create-or-update-a-comment\"><a href=\"#Create-or-update-a-comment\" class=\"headerlink\" title=\"Create or update a comment\"></a>Create or update a comment</h2><p><code>uses</code>使用了本地的action，这个action用于创建或更新一个唯一回复，下一节说。</p>\n<blockquote>\n<p>有时候，官方或市场的action并不能满足你的需要，就得自己写一个了。</p>\n</blockquote>\n<p>同理，该action也有<code>with</code>属性，<code>uniqueIdentifier</code>是回复评论的唯一标识，<code>body</code>是回复的内容，内容使用了markdown语法，里面还涉及到上下文不一一细讲了。只说<code>$&#123;&#123;steps.getDateTime.outputs.result&#125;&#125;</code>这个上下文表示获取getDateTime这个step中，键名为<code>result</code>的值。</p>\n<p>如果你不需要在内容里插入时间，那么上面的<code>Get Date time</code>就可以省略了。</p>\n<h2 id=\"测试-1\"><a href=\"#测试-1\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>因为我已经有完整的代码了，所以运行后，pr中会有一个回复，如图：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/42396a84-b798-4f4e-9f39-5bf92a8acb15\"></p>\n<!--hexo-->\n\n<h1 id=\"x2F-github-x2F-actions-x2F-unique-comment\"><a href=\"#x2F-github-x2F-actions-x2F-unique-comment\" class=\"headerlink\" title=\".&#x2F;.github&#x2F;actions&#x2F;unique-comment\"></a>.&#x2F;.github&#x2F;actions&#x2F;unique-comment</h1><p>这是一个封装的javascript action，用于对issue创建、更新唯一评论。</p>\n<h2 id=\"目录结构\"><a href=\"#目录结构\" class=\"headerlink\" title=\"目录结构\"></a>目录结构</h2><p>创建目录<code>./.github/actions/unique-comment</code>，最终目录结构如下：</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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><br><span class=\"line\">├── action.yml</span><br><span class=\"line\">├── config</span><br><span class=\"line\">│   └── webpack.config.js</span><br><span class=\"line\">├── dist</span><br><span class=\"line\">│   ├── index.js</span><br><span class=\"line\">│   └── index.js.LICENSE.txt</span><br><span class=\"line\">├── package.json</span><br><span class=\"line\">└── src</span><br><span class=\"line\">    └── index.js</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"action-yml\"><a href=\"#action-yml\" class=\"headerlink\" title=\"action.yml\"></a>action.yml</h2><p>这是action的配置文件，必须存在，内容如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">name:</span> <span class=\"string\">unique-comment</span></span><br><span class=\"line\"><span class=\"attr\">description:</span> <span class=\"string\">create</span> <span class=\"string\">or</span> <span class=\"string\">update</span> <span class=\"string\">a</span> <span class=\"string\">unique</span> <span class=\"string\">comment</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">runs:</span></span><br><span class=\"line\">    <span class=\"attr\">using:</span> <span class=\"string\">&#x27;node20&#x27;</span></span><br><span class=\"line\">    <span class=\"attr\">main:</span> <span class=\"string\">&#x27;./dist/index.js&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">inputs:</span></span><br><span class=\"line\">    <span class=\"attr\">token:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;GitHub token&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.token</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">owner:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Repository owner&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.event.repository.owner.login</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">repo:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Repository name&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.event.repository.name</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">issue_number:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Issue number&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.event.number</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">body:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Comment body&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">    <span class=\"attr\">uniqueIdentifier:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Unique identifier for comment&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">&#x27;unique-comment&#x27;</span></span><br></pre></td></tr></table></figure>\n\n<p>大部分属性不一一细讲了，都是简单的英文望文生义即可。</p>\n<p><code>runs</code>表示运行在<code>node20</code>环境下，入口文件为<code>./dist/index.js</code>。</p>\n<p><code>inputs</code>表示接受的参数，也就是之前提到的<code>with</code>属性里要输入的参数。用<code>required</code>表示是否必须传入，<code>default</code>表示默认值。</p>\n<h2 id=\"src-x2F-index-js\"><a href=\"#src-x2F-index-js\" class=\"headerlink\" title=\"src&#x2F;index.js\"></a>src&#x2F;index.js</h2><p>为什么入口文件是<code>dist/index.js</code>，而不是<code>src/index.js</code>呢？因为要引用一些github官方提供的快捷操作github REST API的js包去操作issue评论(pull request也是一种issue)，最终打包后的文件才能在工作流中稳妥的运行。所以，写好<code>src/index.js</code>，再打包就行。</p>\n<p>该文件代码如下：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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> core = <span class=\"built_in\">require</span>(<span class=\"string\">&#x27;@actions/core&#x27;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> github = <span class=\"built_in\">require</span>(<span class=\"string\">&#x27;@actions/github&#x27;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title function_\">main</span> = <span class=\"keyword\">async</span> (<span class=\"params\"></span>) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> token = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;token&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> owner = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;owner&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> repo = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;repo&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> issueNumber = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;issue_number&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> uniqueIdentifier = <span class=\"string\">`[^uniqueIdentifier]: <span class=\"subst\">$&#123;core.getInput(<span class=\"string\">&#x27;uniqueIdentifier&#x27;</span>)&#125;</span>`</span>;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> body = <span class=\"string\">`<span class=\"subst\">$&#123;core.getInput(<span class=\"string\">&#x27;body&#x27;</span>)&#125;</span>\\n\\n<span class=\"subst\">$&#123;uniqueIdentifier&#125;</span>`</span>;</span><br><span class=\"line\"></span><br><span class=\"line\">    core.<span class=\"title function_\">debug</span>(<span class=\"string\">`uniqueIdentifier is <span class=\"subst\">$&#123;uniqueIdentifier&#125;</span>`</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> octokit = github.<span class=\"title function_\">getOctokit</span>(token);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> comments = <span class=\"keyword\">await</span> octokit.<span class=\"property\">rest</span>.<span class=\"property\">issues</span>.<span class=\"title function_\">listComments</span>(&#123;</span><br><span class=\"line\">        owner,</span><br><span class=\"line\">        repo,</span><br><span class=\"line\">        <span class=\"attr\">issue_number</span>: issueNumber,</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> botComment = comments.<span class=\"property\">data</span>.<span class=\"title function_\">find</span>(<span class=\"function\">(<span class=\"params\">v</span>) =&gt;</span> v.<span class=\"property\">body</span>.<span class=\"title function_\">includes</span>(uniqueIdentifier));</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">if</span> (botComment) &#123;</span><br><span class=\"line\">        core.<span class=\"title function_\">info</span>(<span class=\"string\">&#x27;update comment successfully.&#x27;</span>);</span><br><span class=\"line\">        <span class=\"keyword\">await</span> octokit.<span class=\"property\">rest</span>.<span class=\"property\">issues</span>.<span class=\"title function_\">updateComment</span>(&#123;</span><br><span class=\"line\">            owner,</span><br><span class=\"line\">            repo,</span><br><span class=\"line\">            <span class=\"attr\">comment_id</span>: botComment.<span class=\"property\">id</span>,</span><br><span class=\"line\">            body,</span><br><span class=\"line\">        &#125;);</span><br><span class=\"line\">    &#125; <span class=\"keyword\">else</span> &#123;</span><br><span class=\"line\">        core.<span class=\"title function_\">info</span>(<span class=\"string\">&#x27;create comment successfully.&#x27;</span>);</span><br><span class=\"line\">        <span class=\"keyword\">await</span> octokit.<span class=\"property\">rest</span>.<span class=\"property\">issues</span>.<span class=\"title function_\">createComment</span>(&#123;</span><br><span class=\"line\">            owner,</span><br><span class=\"line\">            repo,</span><br><span class=\"line\">            <span class=\"attr\">issue_number</span>: issueNumber,</span><br><span class=\"line\">            body,</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=\"keyword\">try</span> &#123;</span><br><span class=\"line\">    <span class=\"title function_\">main</span>();</span><br><span class=\"line\">&#125; <span class=\"keyword\">catch</span> (err) &#123;</span><br><span class=\"line\">    core.<span class=\"title function_\">setFailed</span>(err.<span class=\"property\">message</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><code>@actions/core</code>和<code>@actions/github</code>是github官方提供的js包，前者可以方便的读取入参等，后者可以方便的操作github REST API。</p>\n<p><code>main</code>函数的代码就是原生javascript，不一一解释了，主要通过<code>uniqueIdentifier</code>来判断是否发布过评论，如果是，就更新评论，否则就创建评论。</p>\n<blockquote>\n<p>markdown语法<code>[^uniqueIdentifier]</code>表示脚注，不会被渲染。</p>\n</blockquote>\n<p><code>core.setFailed(err.message);</code>表示抛出退出代码。</p>\n<h2 id=\"config-x2F-webpack-config-js\"><a href=\"#config-x2F-webpack-config-js\" class=\"headerlink\" title=\"config&#x2F;webpack.config.js\"></a>config&#x2F;webpack.config.js</h2><p>打包用的，配置简单可用即可：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br></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\">mode</span>: <span class=\"string\">&#x27;production&#x27;</span>,</span><br><span class=\"line\">    <span class=\"attr\">target</span>: <span class=\"string\">&#x27;node20&#x27;</span>,</span><br><span class=\"line\">    <span class=\"attr\">entry</span>: <span class=\"string\">&#x27;./src/index.js&#x27;</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\">&#x27;index.js&#x27;</span>,</span><br><span class=\"line\">        <span class=\"attr\">clean</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>\n\n<h2 id=\"package-json\"><a href=\"#package-json\" class=\"headerlink\" title=\"package.json\"></a>package.json</h2><figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;name&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;unique-comment&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;version&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;1.0.0&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;private&quot;</span><span class=\"punctuation\">:</span> <span class=\"literal\"><span class=\"keyword\">true</span></span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;scripts&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;build&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;webpack --config ./config/webpack.config.js&quot;</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;dependencies&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;@actions/core&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^1.10.1&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;@actions/github&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^6.0.0&quot;</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;devDependencies&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;webpack&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^5.89.0&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;webpack-cli&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^5.1.4&quot;</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span></span><br></pre></td></tr></table></figure>\n\n<p>没啥好说的，列出了依赖项。和一个打包脚本。</p>\n<h2 id=\"测试-2\"><a href=\"#测试-2\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>修改了<code>src/index.js</code>得<code>build</code>，然后push到github仓库。</p>\n<p>记得将<strong>dist</strong>目录也提交到github仓库。</p>\n<!--hexo-->\n\n<h1 id=\"init\"><a href=\"#init\" class=\"headerlink\" title=\"init\"></a>init</h1><p>现在，开始搞正经的了。</p>\n<p>先初始化项目，这个job的目的仅仅是为了缓存pnpm依赖项，如果你的项目的依赖项不经常更新，可以省略这个job，后续也不要<code>needs</code>这个job。</p>\n<p>将init改成如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">init:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br></pre></td></tr></table></figure>\n\n<p>相信经过对之前的job的了解，这里的配置就看起来很简单了。</p>\n<h2 id=\"Init-pnpm\"><a href=\"#Init-pnpm\" class=\"headerlink\" title=\"Init pnpm\"></a>Init pnpm</h2><p>使用第三方action，安装pnpm@^8。</p>\n<h2 id=\"Init-node\"><a href=\"#Init-node\" class=\"headerlink\" title=\"Init node\"></a>Init node</h2><p><code>cache: &#39;pnpm&#39;</code>指定缓存机制，它内部是利用了workflow的cache机制。</p>\n<h2 id=\"Install-dependencies\"><a href=\"#Install-dependencies\" class=\"headerlink\" title=\"Install dependencies\"></a>Install dependencies</h2><p>安装依赖项，触发缓存。</p>\n<!--hexo-->\n\n<h1 id=\"eslint\"><a href=\"#eslint\" class=\"headerlink\" title=\"eslint\"></a>eslint</h1><p>将eslint改成如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">outputs:</span></span><br><span class=\"line\">            <span class=\"attr\">result:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">steps.lint.outputs.result</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\">                  <span class=\"attr\">fetch-depth:</span> <span class=\"number\">0</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Run</span> <span class=\"string\">eslint</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/github-script@v7</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">result-encoding:</span> <span class=\"string\">string</span></span><br><span class=\"line\">                  <span class=\"attr\">script:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      let output = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let outerr = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let diffFiles = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">await</span> <span class=\"string\">exec.exec(</span></span><br><span class=\"line\">                        <span class=\"string\">`git</span> <span class=\"string\">diff</span> <span class=\"string\">--name-only</span> <span class=\"string\">origin/$&#123;&#123;github.base_ref&#125;&#125;`,</span></span><br><span class=\"line\">                        []<span class=\"string\">,</span></span><br><span class=\"line\">                        &#123;</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">silent:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">ignoreReturnCode:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">listeners:</span> &#123;</span><br><span class=\"line\">                            <span class=\"attr\">stdout:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">diffFiles</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</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=\"string\">);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">lintFiles</span> <span class=\"string\">=</span> <span class=\"string\">diffFiles.split(`\\n`).filter((file)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">file.endsWith(&#x27;.js&#x27;)</span> <span class=\"string\">||</span> <span class=\"string\">file.endsWith(&#x27;.ts&#x27;)</span> <span class=\"string\">||</span> <span class=\"string\">file.endsWith(&#x27;.tsx&#x27;)</span></span><br><span class=\"line\">                      &#125;<span class=\"string\">).join(&#x27;</span> <span class=\"string\">&#x27;);</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      await exec.exec(</span></span><br><span class=\"line\"><span class=\"string\">                        // &quot;pnpm run lint --format stylish&quot;,</span></span><br><span class=\"line\"><span class=\"string\">                        `pnpm eslint $&#123;lintFiles&#125;`,</span></span><br><span class=\"line\"><span class=\"string\">                        [],</span></span><br><span class=\"line\"><span class=\"string\">                        &#123;</span></span><br><span class=\"line\"><span class=\"string\">                          // silent: true,</span></span><br><span class=\"line\"><span class=\"string\">                          ignoreReturnCode: true,</span></span><br><span class=\"line\"><span class=\"string\">                          listeners: &#123;</span></span><br><span class=\"line\"><span class=\"string\">                            stdout: (data) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"string\">                                output += data.toString();</span></span><br><span class=\"line\"><span class=\"string\">                            &#125;,</span></span><br><span class=\"line\"><span class=\"string\">                            stderr: (data) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"string\">                                outerr += data.toString();</span></span><br><span class=\"line\"><span class=\"string\">                            &#125;,</span></span><br><span class=\"line\"><span class=\"string\">                          &#125;,</span></span><br><span class=\"line\"><span class=\"string\">                        &#125;</span></span><br><span class=\"line\"><span class=\"string\">                      );</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      if (outerr) &#123;</span></span><br><span class=\"line\"><span class=\"string\">                        return `:x: Some command execution errors, non-eslint business errors.`;</span></span><br><span class=\"line\"><span class=\"string\">                      &#125;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      const errorMatch = output.match(/(\\d+) errors?/);</span></span><br><span class=\"line\"><span class=\"string\">                      const warnMatch = output.match(/(\\d+) warnings?/);</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      if (errorMatch &amp;&amp; errorMatch?.[1] !== &#x27;</span><span class=\"number\">0</span><span class=\"string\">&#x27;) &#123;</span></span><br><span class=\"line\"><span class=\"string\">                        return `:x: $&#123;errorMatch?.[0]&#125; $&#123;warnMatch?.[0]&#125;`;</span></span><br><span class=\"line\"><span class=\"string\">                      &#125;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      return `:white_check_mark: $&#123;errorMatch?.[0] || &#x27;</span><span class=\"number\">0</span> <span class=\"string\">error&#x27;&#125;</span> <span class=\"string\">$&#123;warnMatch?.[0]</span> <span class=\"string\">||</span> <span class=\"string\">&#x27;0 warning&#x27;</span><span class=\"string\">&#125;`;</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"needs\"><a href=\"#needs\" class=\"headerlink\" title=\"needs\"></a>needs</h2><p>使用<code>needs</code>依赖init，可以使用到pnpm的缓存项，防止install太慢。</p>\n<blockquote>\n<p>因为eslint、typescript、unitTest都需要pnpm install，所以一个前置的init去缓存pnpm依赖项，可以加快后续的install速度。</p>\n</blockquote>\n<h2 id=\"outputs\"><a href=\"#outputs\" class=\"headerlink\" title=\"outputs\"></a>outputs</h2><p>job里的outputs，可以在依赖它的其他job中访问到。这里使用<code>$&#123;&#123; steps.lint.outputs.result &#125;&#125;</code>去获取该job中lint这个step里的output里的result。</p>\n<blockquote>\n<p>output有job和step两个维度，注意区分。</p>\n</blockquote>\n<h2 id=\"Run-eslint\"><a href=\"#Run-eslint\" class=\"headerlink\" title=\"Run eslint\"></a>Run eslint</h2><p>它uses了<code>actions/github-script@v7</code>，这是github官方提供的一个action，可以在<code>with.script</code>里写js代码去执行，同时它会注入一些变量到script中去，见它的<a href=\"https://github.com/actions/github-script/tree/v7/\">官方文档</a>。</p>\n<blockquote>\n<p>对于简单的js代码，可以使用这个action去完成，不用再去写一个js文件。</p>\n</blockquote>\n<p><code>result-encoding</code>是指定script返回的数据格式的，默认是json，这指定为string。</p>\n<blockquote>\n<p>为什么script里return了string，还要指定为string呢？<br>因为<code>return &#39;hello&#39;</code>在json encode后是<code>&#39;&quot;hello&quot;&#39;</code>，而string encode后为<code>&#39;hello&#39;</code>。</p>\n</blockquote>\n<p>script里是原生的js代码了，里面的<code>exec</code>是该action注入的变量，用来执行shell命令。</p>\n<p>这段js代码做了两个事情，一是<code>git diff</code>获取pr中改动的文件列表，二是<code>eslint</code>检查这些增量文件，最后返回处理的结果。</p>\n<h2 id=\"fetch-depth\"><a href=\"#fetch-depth\" class=\"headerlink\" title=\"fetch-depth\"></a>fetch-depth</h2><p>Init repo这个step里设置了<code>fetch-depth: 0</code>，不然获取不到完整的git分支，具体看<code>actions/checkout</code>的解释，涉及到git的知识不展开细说了。</p>\n<h2 id=\"steps-lint-outputs-result\"><a href=\"#steps-lint-outputs-result\" class=\"headerlink\" title=\"steps.lint.outputs.result\"></a>steps.lint.outputs.result</h2><p><code>steps.lint.outputs.result</code>为什么能拿到lint step里的output.result呢？因为<code>actions/github-script</code>这个action内部将script的返回值，设置到<code>$GITHUB_OUTPUT</code>里了，且键名为<code>result</code>。</p>\n<!--hexo-->\n\n<h1 id=\"typescript\"><a href=\"#typescript\" class=\"headerlink\" title=\"typescript\"></a>typescript</h1><p>和eslint的配置大同小异，只是改了对检测结果的判断。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">typescript:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">outputs:</span></span><br><span class=\"line\">            <span class=\"attr\">result:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">steps.lint.outputs.result</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Run</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/github-script@v7</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">result-encoding:</span> <span class=\"string\">string</span></span><br><span class=\"line\">                  <span class=\"attr\">script:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      let output = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let outerr = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">await</span> <span class=\"string\">exec.exec(</span></span><br><span class=\"line\">                        <span class=\"string\">`pnpm</span> <span class=\"string\">run</span> <span class=\"string\">-r</span> <span class=\"string\">lint:ts`,</span></span><br><span class=\"line\">                        []<span class=\"string\">,</span></span><br><span class=\"line\">                        &#123;</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">silent:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">ignoreReturnCode:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">listeners:</span> &#123;</span><br><span class=\"line\">                            <span class=\"attr\">stdout:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">output</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</span></span><br><span class=\"line\">                            &#125;,</span><br><span class=\"line\">                            <span class=\"attr\">stderr:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">outerr</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</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=\"string\">);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(outerr)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">Some</span> <span class=\"string\">command</span> <span class=\"string\">execution</span> <span class=\"string\">errors</span>, <span class=\"literal\">no</span> <span class=\"string\">business</span> <span class=\"string\">errors.`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">errorMatch</span> <span class=\"string\">=</span> <span class=\"string\">output.match(/error</span> <span class=\"string\">TS/g);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(errorMatch)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">$</span>&#123;<span class=\"string\">errorMatch?.length</span>&#125; <span class=\"string\">errors`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">return</span> <span class=\"string\">`:white_check_mark:</span> <span class=\"string\">$&#123;&#x27;0</span> <span class=\"string\">error&#x27;&#125;`;</span></span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"unitTest\"><a href=\"#unitTest\" class=\"headerlink\" title=\"unitTest\"></a>unitTest</h1><p>和eslint的配置大同小异，只是改了对检测结果的判断。唯一的区别是jest的检测结果是输出到stderr，见<a href=\"https://github.com/jestjs/jest/issues/5064%E3%80%82\">https://github.com/jestjs/jest/issues/5064。</a></p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">unitTest:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">outputs:</span></span><br><span class=\"line\">            <span class=\"attr\">result:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">steps.lint.outputs.result</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Run</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/github-script@v7</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">result-encoding:</span> <span class=\"string\">string</span></span><br><span class=\"line\">                  <span class=\"attr\">script:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      let output = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let outerr = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">await</span> <span class=\"string\">exec.exec(</span></span><br><span class=\"line\">                        <span class=\"string\">`pnpm</span> <span class=\"string\">run</span> <span class=\"string\">test`,</span></span><br><span class=\"line\">                        []<span class=\"string\">,</span></span><br><span class=\"line\">                        &#123;</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">silent:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">ignoreReturnCode:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">listeners:</span> &#123;</span><br><span class=\"line\">                            <span class=\"attr\">stdout:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">output</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</span></span><br><span class=\"line\">                            &#125;,</span><br><span class=\"line\">                            <span class=\"attr\">stderr:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">outerr</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</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=\"string\">);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">//</span> <span class=\"string\">why</span> <span class=\"string\">use</span> <span class=\"string\">outerr?</span> <span class=\"string\">https://github.com/jestjs/jest/issues/5064</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">failMatch</span> <span class=\"string\">=</span> <span class=\"string\">outerr.match(/Test</span> <span class=\"attr\">Suites:</span> <span class=\"string\">\\d+</span> <span class=\"string\">failed/);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(failMatch)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">$</span>&#123;<span class=\"string\">failMatch?.</span>[<span class=\"number\">0</span>]&#125;<span class=\"string\">`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">errorMatch</span> <span class=\"string\">=</span> <span class=\"string\">outerr.match(/Jest:</span> <span class=\"string\">&quot;global&quot;</span> <span class=\"string\">coverage</span> <span class=\"string\">threshold</span> <span class=\"string\">for</span> <span class=\"string\">lines</span> <span class=\"string\">\\([0-9\\.]+%\\)</span> <span class=\"attr\">not met:</span> [<span class=\"number\">0</span><span class=\"number\">-9</span><span class=\"string\">\\.</span>]<span class=\"string\">+%/);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(errorMatch)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">$</span>&#123;<span class=\"string\">errorMatch?.</span>[<span class=\"number\">0</span>]&#125;<span class=\"string\">`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">return</span> <span class=\"string\">`:white_check_mark:</span> <span class=\"string\">passed`;</span></span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"replyResult\"><a href=\"#replyResult\" class=\"headerlink\" title=\"replyResult\"></a>replyResult</h1><p>最后，将几个检测的结果进行汇总，回复到pr里就行了。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">replyResult:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">replyChecking</span>, <span class=\"string\">eslint</span>, <span class=\"string\">typescript</span>, <span class=\"string\">unitTest</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Checkout</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Get</span> <span class=\"string\">date</span> <span class=\"string\">time</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">getDateTime</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;result=$(TZ=Asia/Shanghai date)&quot;</span> <span class=\"string\">&gt;&gt;</span> <span class=\"string\">&quot;$GITHUB_OUTPUT&quot;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Create</span> <span class=\"string\">or</span> <span class=\"string\">update</span> <span class=\"string\">a</span> <span class=\"string\">comment</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">./.github/actions/unique-comment</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">uniqueIdentifier:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workflow</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">                  <span class=\"attr\">body:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      ## Eslint Check Result</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">$&#123;&#123;needs.eslint.outputs.result&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"comment\">## Typescript Check Result</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">$&#123;&#123;needs.typescript.outputs.result&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"comment\">## UnitTest Check Result</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">$&#123;&#123;needs.unitTest.outputs.result&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">---</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">Commented</span> <span class=\"string\">by</span> <span class=\"string\">Action</span> [<span class=\"string\">$<span class=\"template-variable\">&#123;&#123;github.workflow&#125;&#125;</span></span>]<span class=\"string\">($&#123;&#123;github.event.repository.html_url&#125;&#125;/actions/runs/$&#123;&#123;github.run_id&#125;&#125;),</span> <span class=\"string\">last</span> <span class=\"string\">updated</span> <span class=\"string\">on</span> <span class=\"string\">$&#123;&#123;steps.getDateTime.outputs.result&#125;&#125;.</span></span><br></pre></td></tr></table></figure>\n\n<p>和replyChecking差不多，在body里使用<code>$&#123;&#123;needs.eslint.outputs.result&#125;&#125;</code>去读取了eslint job的outputs。</p>\n<h2 id=\"测试-3\"><a href=\"#测试-3\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>去发起新的pr，故意提交一个有eslint error的js&#x2F;ts文件，看看表现吧~</p>\n"},{"title":"4. GitHub Actions - Using workflows","date":"2023-07-05T22:31:08.000Z","url":"github-actions-workflows","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/8](https://github.com/taoliujun/blog/issues/8)\n\n<!--hexo\n---\nurl: github-actions-workflows\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/using-workflows/about-workflows\n\n原文很长，但随着对Github Actions的了解，笔记也会越来越短。\n\n## 介绍\n\n更详细介绍了workflow的构成，没啥特别重要点。\n\n## 触发\n\n再次复习下触发的几种情况：github、计划任务、手动。\n\n### Branches过滤\n\n可以通过 branches 、branches-ignore 过滤或排除分支，支持glob patterns。还可以在 branches 前面用!修饰为“非”。比如：\n\n```yaml\non:\n  pull_request:\n    branches:    \n      - 'releases/**'\n      - '!releases/**-alpha'\n```\n\n### Tags过滤\n\n对于tags 的过滤处理和branches是一致的，只是修改了名字为tags、tags-ignore。\n\n### Types过滤\n\n可以理解为事件的具体行为，比如 issue_commot事件的created行为。\n\n### Paths过滤\n\n文件路径过滤也是基本功能了，使用paths、paths-ignore处理，举例：\n\n```yaml\non:\n  push:\n    paths:\n      - '**.js\n```\n\n注意，一些过滤场景并不允许 a和a-ignore一起使用，需要注意的。\n\n### 其他\n\n* 还可以对input进行参数过滤，以满足更丰富的触发条件配置。\n* 对github的属性，如pull request发起人的名字进行过滤。\n\n## 事件\n\n列举了常见的30几种事件，大部分事件包含多种行为。\n\n## 语法\n\n涵盖了workflow的大部分配置项。\n\n## 命令行\n\nactions如何和bash交换变量，使用actions/toolkit可以简单做到。\n\n## 复用\n\n注意复用的上下文\n\n## 缓存\n\n可以缓存npm的依赖以节省install的时间，注意缓存的跨分支适用策略。\n\n\n\n","source":"_posts/github-actions-workflows.md","raw":"---\ntitle: \"4. GitHub Actions - Using workflows\"\ndate: \"2023-07-06T06:31:08Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-workflows\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/8](https://github.com/taoliujun/blog/issues/8)\n\n<!--hexo\n---\nurl: github-actions-workflows\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/using-workflows/about-workflows\n\n原文很长，但随着对Github Actions的了解，笔记也会越来越短。\n\n## 介绍\n\n更详细介绍了workflow的构成，没啥特别重要点。\n\n## 触发\n\n再次复习下触发的几种情况：github、计划任务、手动。\n\n### Branches过滤\n\n可以通过 branches 、branches-ignore 过滤或排除分支，支持glob patterns。还可以在 branches 前面用!修饰为“非”。比如：\n\n```yaml\non:\n  pull_request:\n    branches:    \n      - 'releases/**'\n      - '!releases/**-alpha'\n```\n\n### Tags过滤\n\n对于tags 的过滤处理和branches是一致的，只是修改了名字为tags、tags-ignore。\n\n### Types过滤\n\n可以理解为事件的具体行为，比如 issue_commot事件的created行为。\n\n### Paths过滤\n\n文件路径过滤也是基本功能了，使用paths、paths-ignore处理，举例：\n\n```yaml\non:\n  push:\n    paths:\n      - '**.js\n```\n\n注意，一些过滤场景并不允许 a和a-ignore一起使用，需要注意的。\n\n### 其他\n\n* 还可以对input进行参数过滤，以满足更丰富的触发条件配置。\n* 对github的属性，如pull request发起人的名字进行过滤。\n\n## 事件\n\n列举了常见的30几种事件，大部分事件包含多种行为。\n\n## 语法\n\n涵盖了workflow的大部分配置项。\n\n## 命令行\n\nactions如何和bash交换变量，使用actions/toolkit可以简单做到。\n\n## 复用\n\n注意复用的上下文\n\n## 缓存\n\n可以缓存npm的依赖以节省install的时间，注意缓存的跨分支适用策略。\n\n\n\n","slug":"github-actions-workflows","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvy70016jaotdutv2p3p","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/8\">https://github.com/taoliujun/blog/issues/8</a></p>\n<!--hexo\n---\nurl: github-actions-workflows\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/using-workflows/about-workflows\">https://docs.github.com/en/actions/using-workflows/about-workflows</a></p>\n<p>原文很长，但随着对Github Actions的了解，笔记也会越来越短。</p>\n<h2 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h2><p>更详细介绍了workflow的构成，没啥特别重要点。</p>\n<h2 id=\"触发\"><a href=\"#触发\" class=\"headerlink\" title=\"触发\"></a>触发</h2><p>再次复习下触发的几种情况：github、计划任务、手动。</p>\n<h3 id=\"Branches过滤\"><a href=\"#Branches过滤\" class=\"headerlink\" title=\"Branches过滤\"></a>Branches过滤</h3><p>可以通过 branches 、branches-ignore 过滤或排除分支，支持glob patterns。还可以在 branches 前面用!修饰为“非”。比如：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"attr\">on:</span></span><br><span class=\"line\">  <span class=\"attr\">pull_request:</span></span><br><span class=\"line\">    <span class=\"attr\">branches:</span>    </span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"string\">&#x27;releases/**&#x27;</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"string\">&#x27;!releases/**-alpha&#x27;</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Tags过滤\"><a href=\"#Tags过滤\" class=\"headerlink\" title=\"Tags过滤\"></a>Tags过滤</h3><p>对于tags 的过滤处理和branches是一致的，只是修改了名字为tags、tags-ignore。</p>\n<h3 id=\"Types过滤\"><a href=\"#Types过滤\" class=\"headerlink\" title=\"Types过滤\"></a>Types过滤</h3><p>可以理解为事件的具体行为，比如 issue_commot事件的created行为。</p>\n<h3 id=\"Paths过滤\"><a href=\"#Paths过滤\" class=\"headerlink\" title=\"Paths过滤\"></a>Paths过滤</h3><p>文件路径过滤也是基本功能了，使用paths、paths-ignore处理，举例：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><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\">on:</span></span><br><span class=\"line\">  <span class=\"attr\">push:</span></span><br><span class=\"line\">    <span class=\"attr\">paths:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"string\">&#x27;**.js</span></span><br></pre></td></tr></table></figure>\n\n<p>注意，一些过滤场景并不允许 a和a-ignore一起使用，需要注意的。</p>\n<h3 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h3><ul>\n<li>还可以对input进行参数过滤，以满足更丰富的触发条件配置。</li>\n<li>对github的属性，如pull request发起人的名字进行过滤。</li>\n</ul>\n<h2 id=\"事件\"><a href=\"#事件\" class=\"headerlink\" title=\"事件\"></a>事件</h2><p>列举了常见的30几种事件，大部分事件包含多种行为。</p>\n<h2 id=\"语法\"><a href=\"#语法\" class=\"headerlink\" title=\"语法\"></a>语法</h2><p>涵盖了workflow的大部分配置项。</p>\n<h2 id=\"命令行\"><a href=\"#命令行\" class=\"headerlink\" title=\"命令行\"></a>命令行</h2><p>actions如何和bash交换变量，使用actions&#x2F;toolkit可以简单做到。</p>\n<h2 id=\"复用\"><a href=\"#复用\" class=\"headerlink\" title=\"复用\"></a>复用</h2><p>注意复用的上下文</p>\n<h2 id=\"缓存\"><a href=\"#缓存\" class=\"headerlink\" title=\"缓存\"></a>缓存</h2><p>可以缓存npm的依赖以节省install的时间，注意缓存的跨分支适用策略。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/8\">https://github.com/taoliujun/blog/issues/8</a></p>\n<!--hexo\n---\nurl: github-actions-workflows\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/using-workflows/about-workflows\">https://docs.github.com/en/actions/using-workflows/about-workflows</a></p>\n<p>原文很长，但随着对Github Actions的了解，笔记也会越来越短。</p>\n<h2 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h2><p>更详细介绍了workflow的构成，没啥特别重要点。</p>\n<h2 id=\"触发\"><a href=\"#触发\" class=\"headerlink\" title=\"触发\"></a>触发</h2><p>再次复习下触发的几种情况：github、计划任务、手动。</p>\n<h3 id=\"Branches过滤\"><a href=\"#Branches过滤\" class=\"headerlink\" title=\"Branches过滤\"></a>Branches过滤</h3><p>可以通过 branches 、branches-ignore 过滤或排除分支，支持glob patterns。还可以在 branches 前面用!修饰为“非”。比如：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"attr\">on:</span></span><br><span class=\"line\">  <span class=\"attr\">pull_request:</span></span><br><span class=\"line\">    <span class=\"attr\">branches:</span>    </span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"string\">&#x27;releases/**&#x27;</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"string\">&#x27;!releases/**-alpha&#x27;</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Tags过滤\"><a href=\"#Tags过滤\" class=\"headerlink\" title=\"Tags过滤\"></a>Tags过滤</h3><p>对于tags 的过滤处理和branches是一致的，只是修改了名字为tags、tags-ignore。</p>\n<h3 id=\"Types过滤\"><a href=\"#Types过滤\" class=\"headerlink\" title=\"Types过滤\"></a>Types过滤</h3><p>可以理解为事件的具体行为，比如 issue_commot事件的created行为。</p>\n<h3 id=\"Paths过滤\"><a href=\"#Paths过滤\" class=\"headerlink\" title=\"Paths过滤\"></a>Paths过滤</h3><p>文件路径过滤也是基本功能了，使用paths、paths-ignore处理，举例：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><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\">on:</span></span><br><span class=\"line\">  <span class=\"attr\">push:</span></span><br><span class=\"line\">    <span class=\"attr\">paths:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"string\">&#x27;**.js</span></span><br></pre></td></tr></table></figure>\n\n<p>注意，一些过滤场景并不允许 a和a-ignore一起使用，需要注意的。</p>\n<h3 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h3><ul>\n<li>还可以对input进行参数过滤，以满足更丰富的触发条件配置。</li>\n<li>对github的属性，如pull request发起人的名字进行过滤。</li>\n</ul>\n<h2 id=\"事件\"><a href=\"#事件\" class=\"headerlink\" title=\"事件\"></a>事件</h2><p>列举了常见的30几种事件，大部分事件包含多种行为。</p>\n<h2 id=\"语法\"><a href=\"#语法\" class=\"headerlink\" title=\"语法\"></a>语法</h2><p>涵盖了workflow的大部分配置项。</p>\n<h2 id=\"命令行\"><a href=\"#命令行\" class=\"headerlink\" title=\"命令行\"></a>命令行</h2><p>actions如何和bash交换变量，使用actions&#x2F;toolkit可以简单做到。</p>\n<h2 id=\"复用\"><a href=\"#复用\" class=\"headerlink\" title=\"复用\"></a>复用</h2><p>注意复用的上下文</p>\n<h2 id=\"缓存\"><a href=\"#缓存\" class=\"headerlink\" title=\"缓存\"></a>缓存</h2><p>可以缓存npm的依赖以节省install的时间，注意缓存的跨分支适用策略。</p>\n"},{"title":"React的性能优化项，最后更新2023年07月...","date":"2023-07-05T22:37:20.000Z","url":"react-performance optimization","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/18](https://github.com/taoliujun/blog/issues/18)\n\n<!--hexo\n---\nurl: react-performance optimization\ntags:\n  - react\n---\n-->\n\nReact 没有最佳性能优化项，性能优化和项目的复杂度相关，所以以下记录的优化项，酌情使用。\n\n评论区见。\n\n- [组件需要更细粒度](https://github.com/taoliujun/blog/issues/18#issuecomment-1623078715)\n- [React useDeferredValue在性能优化中的使用](https://github.com/taoliujun/blog/issues/20)\n- [React useTransition在性能优化中的使用](https://github.com/taoliujun/blog/issues/19)\n\n<!--hexo-->\n\n# 组件需要更细粒度\n\n**结论：如果组件中的状态更新频率很快，那么尽量将组件拆分到更细粒度。**\n\n先看一个例子：\n\n```tsx\nconst Test1: FC = () => {\n  console.log(\"==\", Math.random());\n  return <div>hello {Math.random()}</div>;\n};\n\nconst Main: FC = () => {\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <>\n      <input value={value} onChange={(e) => setValue(e.target.value)} />\n      <Test1 />\n    </>\n  );\n};\n```\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061103775.png)\n\n如上，虽然`Test1`组件和`value`状态并无关系，但每一次输入都会导致`Test1`组件的重新渲染。如果`Test1`组件的逻辑和渲染够复杂，那么很容易影响性能。\n\n究其原理，Fiber 在节点这一层保存了组件函数中状态和虚拟 Dom 的关系，它的最小渲染单元就是本组件函数。\n\n根据这个原理，试试将输入框拆分成另一个组件：\n\n```tsx\nconst Input1: FC = () => {\n  const [value, setValue] = useState(\"\");\n\n  return <input value={value} onChange={(e) => setValue(e.target.value)} />;\n};\n\nconst Test1: FC = () => {\n  console.log(\"==\", Math.random());\n  return <div>hello {Math.random()}</div>;\n};\n\nconst Main: FC = () => {\n  return (\n    <>\n      <Input1 />\n      <Test1 />\n    </>\n  );\n};\n```\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061111086.png)\n\n如上，连续输入 abc，并不触发`Test1`的多次执行，`Input1`组件在一个独立的 Fiber 结构中，它的状态更新便不会影响到`Main`函数。\n\n\n","source":"_posts/react-performance optimization.md","raw":"---\ntitle: \"React的性能优化项，最后更新2023年07月...\"\ndate: \"2023-07-06T06:37:20Z\"\ncategories:\n  - [React]\n\nurl: react-performance optimization\ntags:\n  - react\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/18](https://github.com/taoliujun/blog/issues/18)\n\n<!--hexo\n---\nurl: react-performance optimization\ntags:\n  - react\n---\n-->\n\nReact 没有最佳性能优化项，性能优化和项目的复杂度相关，所以以下记录的优化项，酌情使用。\n\n评论区见。\n\n- [组件需要更细粒度](https://github.com/taoliujun/blog/issues/18#issuecomment-1623078715)\n- [React useDeferredValue在性能优化中的使用](https://github.com/taoliujun/blog/issues/20)\n- [React useTransition在性能优化中的使用](https://github.com/taoliujun/blog/issues/19)\n\n<!--hexo-->\n\n# 组件需要更细粒度\n\n**结论：如果组件中的状态更新频率很快，那么尽量将组件拆分到更细粒度。**\n\n先看一个例子：\n\n```tsx\nconst Test1: FC = () => {\n  console.log(\"==\", Math.random());\n  return <div>hello {Math.random()}</div>;\n};\n\nconst Main: FC = () => {\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <>\n      <input value={value} onChange={(e) => setValue(e.target.value)} />\n      <Test1 />\n    </>\n  );\n};\n```\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061103775.png)\n\n如上，虽然`Test1`组件和`value`状态并无关系，但每一次输入都会导致`Test1`组件的重新渲染。如果`Test1`组件的逻辑和渲染够复杂，那么很容易影响性能。\n\n究其原理，Fiber 在节点这一层保存了组件函数中状态和虚拟 Dom 的关系，它的最小渲染单元就是本组件函数。\n\n根据这个原理，试试将输入框拆分成另一个组件：\n\n```tsx\nconst Input1: FC = () => {\n  const [value, setValue] = useState(\"\");\n\n  return <input value={value} onChange={(e) => setValue(e.target.value)} />;\n};\n\nconst Test1: FC = () => {\n  console.log(\"==\", Math.random());\n  return <div>hello {Math.random()}</div>;\n};\n\nconst Main: FC = () => {\n  return (\n    <>\n      <Input1 />\n      <Test1 />\n    </>\n  );\n};\n```\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061111086.png)\n\n如上，连续输入 abc，并不触发`Test1`的多次执行，`Input1`组件在一个独立的 Fiber 结构中，它的状态更新便不会影响到`Main`函数。\n\n\n","slug":"react-performance optimization","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvy8001ajaothnsy91na","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/18\">https://github.com/taoliujun/blog/issues/18</a></p>\n<!--hexo\n---\nurl: react-performance optimization\ntags:\n  - react\n---\n-->\n\n<p>React 没有最佳性能优化项，性能优化和项目的复杂度相关，所以以下记录的优化项，酌情使用。</p>\n<p>评论区见。</p>\n<ul>\n<li><a href=\"https://github.com/taoliujun/blog/issues/18#issuecomment-1623078715\">组件需要更细粒度</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/20\">React useDeferredValue在性能优化中的使用</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/19\">React useTransition在性能优化中的使用</a></li>\n</ul>\n<!--hexo-->\n\n<h1 id=\"组件需要更细粒度\"><a href=\"#组件需要更细粒度\" class=\"headerlink\" title=\"组件需要更细粒度\"></a>组件需要更细粒度</h1><p><strong>结论：如果组件中的状态更新频率很快，那么尽量将组件拆分到更细粒度。</strong></p>\n<p>先看一个例子：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><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> <span class=\"title class_\">Test1</span>: <span class=\"variable constant_\">FC</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 class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>());</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>hello &#123;Math.random()&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">const</span> [value, setValue] = <span class=\"title function_\">useState</span>(<span class=\"string\">&quot;&quot;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"keyword\">return</span> (</span><br><span class=\"line\">    <span class=\"language-xml\"><span class=\"tag\">&lt;&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">value</span>=<span class=\"string\">&#123;value&#125;</span> <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> setValue(e.target.value)&#125; /&gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">Test1</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">    <span class=\"tag\">&lt;/&gt;</span></span></span><br><span class=\"line\">  );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061103775.png\"></p>\n<p>如上，虽然<code>Test1</code>组件和<code>value</code>状态并无关系，但每一次输入都会导致<code>Test1</code>组件的重新渲染。如果<code>Test1</code>组件的逻辑和渲染够复杂，那么很容易影响性能。</p>\n<p>究其原理，Fiber 在节点这一层保存了组件函数中状态和虚拟 Dom 的关系，它的最小渲染单元就是本组件函数。</p>\n<p>根据这个原理，试试将输入框拆分成另一个组件：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><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> <span class=\"title class_\">Input1</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">const</span> [value, setValue] = <span class=\"title function_\">useState</span>(<span class=\"string\">&quot;&quot;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">value</span>=<span class=\"string\">&#123;value&#125;</span> <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> setValue(e.target.value)&#125; /&gt;</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 class_\">Test1</span>: <span class=\"variable constant_\">FC</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 class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>());</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>hello &#123;Math.random()&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> (</span><br><span class=\"line\">    <span class=\"language-xml\"><span class=\"tag\">&lt;&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">Input1</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">Test1</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">    <span class=\"tag\">&lt;/&gt;</span></span></span><br><span class=\"line\">  );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061111086.png\"></p>\n<p>如上，连续输入 abc，并不触发<code>Test1</code>的多次执行，<code>Input1</code>组件在一个独立的 Fiber 结构中，它的状态更新便不会影响到<code>Main</code>函数。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/18\">https://github.com/taoliujun/blog/issues/18</a></p>\n<!--hexo\n---\nurl: react-performance optimization\ntags:\n  - react\n---\n-->\n\n<p>React 没有最佳性能优化项，性能优化和项目的复杂度相关，所以以下记录的优化项，酌情使用。</p>\n<p>评论区见。</p>\n<ul>\n<li><a href=\"https://github.com/taoliujun/blog/issues/18#issuecomment-1623078715\">组件需要更细粒度</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/20\">React useDeferredValue在性能优化中的使用</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/19\">React useTransition在性能优化中的使用</a></li>\n</ul>\n<!--hexo-->\n\n<h1 id=\"组件需要更细粒度\"><a href=\"#组件需要更细粒度\" class=\"headerlink\" title=\"组件需要更细粒度\"></a>组件需要更细粒度</h1><p><strong>结论：如果组件中的状态更新频率很快，那么尽量将组件拆分到更细粒度。</strong></p>\n<p>先看一个例子：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><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> <span class=\"title class_\">Test1</span>: <span class=\"variable constant_\">FC</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 class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>());</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>hello &#123;Math.random()&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">const</span> [value, setValue] = <span class=\"title function_\">useState</span>(<span class=\"string\">&quot;&quot;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"keyword\">return</span> (</span><br><span class=\"line\">    <span class=\"language-xml\"><span class=\"tag\">&lt;&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">value</span>=<span class=\"string\">&#123;value&#125;</span> <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> setValue(e.target.value)&#125; /&gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">Test1</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">    <span class=\"tag\">&lt;/&gt;</span></span></span><br><span class=\"line\">  );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061103775.png\"></p>\n<p>如上，虽然<code>Test1</code>组件和<code>value</code>状态并无关系，但每一次输入都会导致<code>Test1</code>组件的重新渲染。如果<code>Test1</code>组件的逻辑和渲染够复杂，那么很容易影响性能。</p>\n<p>究其原理，Fiber 在节点这一层保存了组件函数中状态和虚拟 Dom 的关系，它的最小渲染单元就是本组件函数。</p>\n<p>根据这个原理，试试将输入框拆分成另一个组件：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><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> <span class=\"title class_\">Input1</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">const</span> [value, setValue] = <span class=\"title function_\">useState</span>(<span class=\"string\">&quot;&quot;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">value</span>=<span class=\"string\">&#123;value&#125;</span> <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> setValue(e.target.value)&#125; /&gt;</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 class_\">Test1</span>: <span class=\"variable constant_\">FC</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 class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>());</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>hello &#123;Math.random()&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> (</span><br><span class=\"line\">    <span class=\"language-xml\"><span class=\"tag\">&lt;&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">Input1</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">Test1</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">    <span class=\"tag\">&lt;/&gt;</span></span></span><br><span class=\"line\">  );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061111086.png\"></p>\n<p>如上，连续输入 abc，并不触发<code>Test1</code>的多次执行，<code>Input1</code>组件在一个独立的 Fiber 结构中，它的状态更新便不会影响到<code>Main</code>函数。</p>\n"},{"title":"React useDeferredValue在性能优化中的使用","date":"2023-07-05T22:38:14.000Z","url":"react-usedeferredvalue","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/20](https://github.com/taoliujun/blog/issues/20)\n\n<!--hexo\n---\nurl: react-usedeferredvalue\ntags:\n  - react\n---\n-->\n\n## 一个卡顿场景\n\n已知浏览器在一帧时间里（默认16.6毫秒）要完成好多工作，其中最耗时的是js脚本执行和页面渲染。如果js脚本耗时太长，那要引起页面渲染掉帧，在用户的体验上就是卡顿。\n\n这里有一个处理用户输入的搜索词语，将结果渲染到一个dom列表上的场景：\n\n```tsx\nimport { FC, useMemo, useState } from 'react';\n\nconst SearchResults: FC<{ query: string }> = ({ query }) => {\n    const datas = useMemo(() => {\n        return new Array(10000).fill(null).map(() => {\n            return `${query} ${Math.random()}`;\n        });\n    }, [query]);\n\n    if (!query) {\n        return null;\n    }\n\n    return (\n        <div>\n            <h2>search \"{query}\" list:</h2>\n            {datas.map((v, k) => {\n                return <p key={k}>{v}</p>;\n            })}\n        </div>\n    );\n};\n\nexport const Main: FC = () => {\n    const [query, setQuery] = useState('');\n\n    return (\n        <>\n            Search:\n            <input\n                value={query}\n                onChange={(e) => {\n                    setQuery(e.target.value);\n                }}\n            />\n            <SearchResults query={query} />\n        </>\n    );\n};\n```\n\n当用户每次输入一个字符，就会触发`SearchResults`组件的重新渲染，这个渲染包括`datas`的重新计算，和dom结构的重新渲染，这个时间远远超过16毫秒，会导致下一个输入值的处理任务一直在等待中，造成卡顿。\n\n## useDeferredValue\n\nReact提供了`时间切片`的模式，这里不详细展开了，允许你在调度任务的过程中安排高优先级的任务，而`useDeferredValue`就是这个模式的一个hook，它可以**延迟更新部分UI**\n\n在之前的代码中，我们稍作修改：\n\n```tsx\n//...\n\nconst [query, setQuery] = useState('');\nconst defreredQuery = useDeferredValue(query);\n\n//...\n<SearchResults query={defreredQuery} />\n```\n\n当用户**快速**输入一个字符时，`SearchResults`组件的渲染就会被延迟，这样就尽量减少卡顿了。\n\n`useDeferredValue`通过延迟状态的更新来实现这个目的，它不同于节流或防抖的固定时间控制，而是根据一系列复杂调度算法来决定延迟的时间，这样可以尽量减少卡顿的发生。\n\n\n\n","source":"_posts/react-usedeferredvalue.md","raw":"---\ntitle: \"React useDeferredValue在性能优化中的使用\"\ndate: \"2023-07-06T06:38:14Z\"\ncategories:\n  - [React]\n\nurl: react-usedeferredvalue\ntags:\n  - react\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/20](https://github.com/taoliujun/blog/issues/20)\n\n<!--hexo\n---\nurl: react-usedeferredvalue\ntags:\n  - react\n---\n-->\n\n## 一个卡顿场景\n\n已知浏览器在一帧时间里（默认16.6毫秒）要完成好多工作，其中最耗时的是js脚本执行和页面渲染。如果js脚本耗时太长，那要引起页面渲染掉帧，在用户的体验上就是卡顿。\n\n这里有一个处理用户输入的搜索词语，将结果渲染到一个dom列表上的场景：\n\n```tsx\nimport { FC, useMemo, useState } from 'react';\n\nconst SearchResults: FC<{ query: string }> = ({ query }) => {\n    const datas = useMemo(() => {\n        return new Array(10000).fill(null).map(() => {\n            return `${query} ${Math.random()}`;\n        });\n    }, [query]);\n\n    if (!query) {\n        return null;\n    }\n\n    return (\n        <div>\n            <h2>search \"{query}\" list:</h2>\n            {datas.map((v, k) => {\n                return <p key={k}>{v}</p>;\n            })}\n        </div>\n    );\n};\n\nexport const Main: FC = () => {\n    const [query, setQuery] = useState('');\n\n    return (\n        <>\n            Search:\n            <input\n                value={query}\n                onChange={(e) => {\n                    setQuery(e.target.value);\n                }}\n            />\n            <SearchResults query={query} />\n        </>\n    );\n};\n```\n\n当用户每次输入一个字符，就会触发`SearchResults`组件的重新渲染，这个渲染包括`datas`的重新计算，和dom结构的重新渲染，这个时间远远超过16毫秒，会导致下一个输入值的处理任务一直在等待中，造成卡顿。\n\n## useDeferredValue\n\nReact提供了`时间切片`的模式，这里不详细展开了，允许你在调度任务的过程中安排高优先级的任务，而`useDeferredValue`就是这个模式的一个hook，它可以**延迟更新部分UI**\n\n在之前的代码中，我们稍作修改：\n\n```tsx\n//...\n\nconst [query, setQuery] = useState('');\nconst defreredQuery = useDeferredValue(query);\n\n//...\n<SearchResults query={defreredQuery} />\n```\n\n当用户**快速**输入一个字符时，`SearchResults`组件的渲染就会被延迟，这样就尽量减少卡顿了。\n\n`useDeferredValue`通过延迟状态的更新来实现这个目的，它不同于节流或防抖的固定时间控制，而是根据一系列复杂调度算法来决定延迟的时间，这样可以尽量减少卡顿的发生。\n\n\n\n","slug":"react-usedeferredvalue","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvy8001djaotbiagf004","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/20\">https://github.com/taoliujun/blog/issues/20</a></p>\n<!--hexo\n---\nurl: react-usedeferredvalue\ntags:\n  - react\n---\n-->\n\n<h2 id=\"一个卡顿场景\"><a href=\"#一个卡顿场景\" class=\"headerlink\" title=\"一个卡顿场景\"></a>一个卡顿场景</h2><p>已知浏览器在一帧时间里（默认16.6毫秒）要完成好多工作，其中最耗时的是js脚本执行和页面渲染。如果js脚本耗时太长，那要引起页面渲染掉帧，在用户的体验上就是卡顿。</p>\n<p>这里有一个处理用户输入的搜索词语，将结果渲染到一个dom列表上的场景：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"keyword\">import</span> &#123; <span class=\"variable constant_\">FC</span>, useMemo, useState &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;react&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title class_\">SearchResults</span>: <span class=\"variable constant_\">FC</span>&lt;&#123; <span class=\"attr\">query</span>: <span class=\"built_in\">string</span> &#125;&gt; = <span class=\"function\">(<span class=\"params\">&#123; query &#125;</span>) =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> datas = <span class=\"title function_\">useMemo</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> <span class=\"keyword\">new</span> <span class=\"title class_\">Array</span>(<span class=\"number\">10000</span>).<span class=\"title function_\">fill</span>(<span class=\"literal\">null</span>).<span class=\"title function_\">map</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">            <span class=\"keyword\">return</span> <span class=\"string\">`<span class=\"subst\">$&#123;query&#125;</span> <span class=\"subst\">$&#123;<span class=\"built_in\">Math</span>.random()&#125;</span>`</span>;</span><br><span class=\"line\">        &#125;);</span><br><span class=\"line\">    &#125;, [query]);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">if</span> (!query) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> <span class=\"literal\">null</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</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\">h2</span>&gt;</span>search &quot;&#123;query&#125;&quot; list:<span class=\"tag\">&lt;/<span class=\"name\">h2</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            &#123;datas.map((v, k) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                return <span class=\"tag\">&lt;<span class=\"name\">p</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;k&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &#125;)&#125;</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><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">const</span> <span class=\"title class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [query, setQuery] = <span class=\"title function_\">useState</span>(<span class=\"string\">&#x27;&#x27;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</span> (</span><br><span class=\"line\">        <span class=\"language-xml\"><span class=\"tag\">&lt;&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            Search:</span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">input</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">value</span>=<span class=\"string\">&#123;query&#125;</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    setQuery(e.target.value);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            /&gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">SearchResults</span> <span class=\"attr\">query</span>=<span class=\"string\">&#123;query&#125;</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">        <span class=\"tag\">&lt;/&gt;</span></span></span><br><span class=\"line\">    );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>当用户每次输入一个字符，就会触发<code>SearchResults</code>组件的重新渲染，这个渲染包括<code>datas</code>的重新计算，和dom结构的重新渲染，这个时间远远超过16毫秒，会导致下一个输入值的处理任务一直在等待中，造成卡顿。</p>\n<h2 id=\"useDeferredValue\"><a href=\"#useDeferredValue\" class=\"headerlink\" title=\"useDeferredValue\"></a>useDeferredValue</h2><p>React提供了<code>时间切片</code>的模式，这里不详细展开了，允许你在调度任务的过程中安排高优先级的任务，而<code>useDeferredValue</code>就是这个模式的一个hook，它可以<strong>延迟更新部分UI</strong></p>\n<p>在之前的代码中，我们稍作修改：</p>\n<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><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><br><span class=\"line\"><span class=\"keyword\">const</span> [query, setQuery] = <span class=\"title function_\">useState</span>(<span class=\"string\">&#x27;&#x27;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> defreredQuery = <span class=\"title function_\">useDeferredValue</span>(query);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">//...</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">SearchResults</span> <span class=\"attr\">query</span>=<span class=\"string\">&#123;defreredQuery&#125;</span> /&gt;</span></span></span><br></pre></td></tr></table></figure>\n\n<p>当用户<strong>快速</strong>输入一个字符时，<code>SearchResults</code>组件的渲染就会被延迟，这样就尽量减少卡顿了。</p>\n<p><code>useDeferredValue</code>通过延迟状态的更新来实现这个目的，它不同于节流或防抖的固定时间控制，而是根据一系列复杂调度算法来决定延迟的时间，这样可以尽量减少卡顿的发生。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/20\">https://github.com/taoliujun/blog/issues/20</a></p>\n<!--hexo\n---\nurl: react-usedeferredvalue\ntags:\n  - react\n---\n-->\n\n<h2 id=\"一个卡顿场景\"><a href=\"#一个卡顿场景\" class=\"headerlink\" title=\"一个卡顿场景\"></a>一个卡顿场景</h2><p>已知浏览器在一帧时间里（默认16.6毫秒）要完成好多工作，其中最耗时的是js脚本执行和页面渲染。如果js脚本耗时太长，那要引起页面渲染掉帧，在用户的体验上就是卡顿。</p>\n<p>这里有一个处理用户输入的搜索词语，将结果渲染到一个dom列表上的场景：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"keyword\">import</span> &#123; <span class=\"variable constant_\">FC</span>, useMemo, useState &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;react&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title class_\">SearchResults</span>: <span class=\"variable constant_\">FC</span>&lt;&#123; <span class=\"attr\">query</span>: <span class=\"built_in\">string</span> &#125;&gt; = <span class=\"function\">(<span class=\"params\">&#123; query &#125;</span>) =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> datas = <span class=\"title function_\">useMemo</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> <span class=\"keyword\">new</span> <span class=\"title class_\">Array</span>(<span class=\"number\">10000</span>).<span class=\"title function_\">fill</span>(<span class=\"literal\">null</span>).<span class=\"title function_\">map</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">            <span class=\"keyword\">return</span> <span class=\"string\">`<span class=\"subst\">$&#123;query&#125;</span> <span class=\"subst\">$&#123;<span class=\"built_in\">Math</span>.random()&#125;</span>`</span>;</span><br><span class=\"line\">        &#125;);</span><br><span class=\"line\">    &#125;, [query]);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">if</span> (!query) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> <span class=\"literal\">null</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</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\">h2</span>&gt;</span>search &quot;&#123;query&#125;&quot; list:<span class=\"tag\">&lt;/<span class=\"name\">h2</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            &#123;datas.map((v, k) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                return <span class=\"tag\">&lt;<span class=\"name\">p</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;k&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &#125;)&#125;</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><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">const</span> <span class=\"title class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [query, setQuery] = <span class=\"title function_\">useState</span>(<span class=\"string\">&#x27;&#x27;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</span> (</span><br><span class=\"line\">        <span class=\"language-xml\"><span class=\"tag\">&lt;&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            Search:</span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">input</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">value</span>=<span class=\"string\">&#123;query&#125;</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    setQuery(e.target.value);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            /&gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">SearchResults</span> <span class=\"attr\">query</span>=<span class=\"string\">&#123;query&#125;</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">        <span class=\"tag\">&lt;/&gt;</span></span></span><br><span class=\"line\">    );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>当用户每次输入一个字符，就会触发<code>SearchResults</code>组件的重新渲染，这个渲染包括<code>datas</code>的重新计算，和dom结构的重新渲染，这个时间远远超过16毫秒，会导致下一个输入值的处理任务一直在等待中，造成卡顿。</p>\n<h2 id=\"useDeferredValue\"><a href=\"#useDeferredValue\" class=\"headerlink\" title=\"useDeferredValue\"></a>useDeferredValue</h2><p>React提供了<code>时间切片</code>的模式，这里不详细展开了，允许你在调度任务的过程中安排高优先级的任务，而<code>useDeferredValue</code>就是这个模式的一个hook，它可以<strong>延迟更新部分UI</strong></p>\n<p>在之前的代码中，我们稍作修改：</p>\n<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><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><br><span class=\"line\"><span class=\"keyword\">const</span> [query, setQuery] = <span class=\"title function_\">useState</span>(<span class=\"string\">&#x27;&#x27;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> defreredQuery = <span class=\"title function_\">useDeferredValue</span>(query);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">//...</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">SearchResults</span> <span class=\"attr\">query</span>=<span class=\"string\">&#123;defreredQuery&#125;</span> /&gt;</span></span></span><br></pre></td></tr></table></figure>\n\n<p>当用户<strong>快速</strong>输入一个字符时，<code>SearchResults</code>组件的渲染就会被延迟，这样就尽量减少卡顿了。</p>\n<p><code>useDeferredValue</code>通过延迟状态的更新来实现这个目的，它不同于节流或防抖的固定时间控制，而是根据一系列复杂调度算法来决定延迟的时间，这样可以尽量减少卡顿的发生。</p>\n"},{"title":"React useTransition在性能优化中的使用","date":"2023-07-05T22:37:42.000Z","url":"react-usetransition","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/19](https://github.com/taoliujun/blog/issues/19)\n\n<!--hexo\n---\nurl: react-usetransition\ntags:\n  - react\n---\n-->\n\n`useTransition` is a React Hook that lets you update the state without blocking the UI.\n\n文档中简单一句话说明`useTransition`的用途：不阻塞UI的情况下更新**状态**。\n\n## 解决什么问题？\n\n正常代码下，JavaScript是单线程的，所以执行一段耗时的代码，会阻塞UI的渲染，导致页面卡顿。React提供了**时间切片**的功能来尽量确保一帧中有充足的时间来渲染UI，而`useTransition`就是在这个基础上，可以在不阻塞UI的情况下使用时间分片特性**更新状态**。\n\n\n## 一个例子\n\n先看下卡顿是如何形成的，一个简单的代码，每500ms，更新`name`状态。另外点击按钮的时候，更新一系列状态并渲染到dom中。\n\n```tsx\nconst getDatas = () => {\n    const datas = [];\n    for (let i = 1; i <= 2000; i += 1) {\n        const s = Math.random() * Math.random();\n        datas.push(s);\n    }\n    return datas;\n};\n\nconst Main: FC = () => {\n    const [name, setName] = useState('world');\n\n    const [datas1, setDatas1] = useState<number[]>([]);\n    const [datas2, setDatas2] = useState<number[]>([]);\n    const [datas3, setDatas3] = useState<number[]>([]);\n    const [datas4, setDatas4] = useState<number[]>([]);\n    const [datas5, setDatas5] = useState<number[]>([]);\n    const [datas6, setDatas6] = useState<number[]>([]);\n    const [datas7, setDatas7] = useState<number[]>([]);\n    const [datas8, setDatas8] = useState<number[]>([]);\n\n    const onClick1 = useCallback(() => {\n        setDatas1(getDatas());\n        setDatas2(getDatas());\n        setDatas3(getDatas());\n        setDatas4(getDatas());\n        setDatas5(getDatas());\n        setDatas6(getDatas());\n        setDatas7(getDatas());\n        setDatas8(getDatas());\n    }, []);\n\n    useEffect(() => {\n        window.setInterval(() => {\n            setName(`world ${Math.random()}`);\n        }, 500);\n    }, []);\n\n    return (\n        <div>\n            hello {name}\n            <br />\n            <button onClick={onClick1}>click me</button>\n            <br />\n            <div>\n                {datas1.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas2.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas3.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas4.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas5.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas6.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas7.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas8.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n        </div>\n    );\n};\n```\n\n**首先不点击按钮，观察5秒，没有卡顿现象，性能表现如图：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041609217.png)\n\n可以看到有几个微微凸起的黄色点，对应着每次的`hello`状态更新和渲染，它们的执行时间都在1ms，没有超过一帧的时间。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041610767.png)\n\n选取其中一个黄色的点，查看它的详情。React的调度器、协调器、渲染器创建了对应的任务，分步执行了任务，具体可阅读React架构的相关文章。\n\n**然后连续点几次按钮，`hello`的渲染出现明显的卡顿，性能表现如图：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041608992.png)\n\n在性能图中截取的一段时间中，黄色是脚本执行时间，灰色是UI渲染时间，白色是空闲时间（我停止点击了一会儿），在每帧里，要跑完所有的状态变更和UI渲染，`datas`系列的状态变更和渲染占据了大量的时间，基本是阻塞了`hello`的状态变更和渲染。\n\n**只点击一次，性能表现如图：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041625903.png)\n\n可以看到几个Task，第一个Task就是在更新`datas`系列状态和渲染，它占据了太多帧的时间，导致`hello`的状态变更和渲染被推迟到后面的帧。\n\n## 优化它\n\n前面说到，React的架构中实现了**时间切片**，它允许开发者将*不重要*的变更推迟到后面的帧，这样就可以尽量保证优先执行默认任务。使用`useTransition`改下代码：\n\n```tsx\nconst [pending, startTransition] = useTransition();\n\nconst onClick1 = useCallback(() => {\n    startTransition(() => {\n        setDatas1(getDatas());\n        setDatas2(getDatas());\n        setDatas3(getDatas());\n        setDatas4(getDatas());\n        setDatas5(getDatas());\n        setDatas6(getDatas());\n        setDatas7(getDatas());\n        setDatas8(getDatas());\n    });\n}, []);\n```\n\n**再次连续点击按钮，卡顿现象明显减轻很多，性能表现如下：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041629743.png)\n\n一看起来，执行时间还是很长，那么为什么`hello`渲染看起来不卡顿呢？\n\n**只点一次，看看性能表现：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041631650.png)\n\n查看几个Task的详情，发现`datas`系列状态的更新，被分配在了多个Task中，中间还穿插了`hello`的状态更新的任务。这也印证了`useTransition`的实现背景：将不重要的任务通过时间切片架构，分配到多帧中，优先执行其他任务，从而实现不卡顿的目的。\n\n## 注意事项\n\n* `useTransition`是个hook，它的返回值还包括了一个pending状态，用来表示是否处于时间切片的过程中，可以用来优化UI，比如显示一个loading。\n\n* 你也可以使用`startTransition`这个util函数代替hook的使用。\n\n* 时间切片架构是调度状态变化的，所以`startTransition`的入参函数里，将状态更新标记为可切片，普通的代码段不会被标记。所以简单的说，你还是得将一个状态变更的执行时间控制在5ms内。\n\n\n\n","source":"_posts/react-usetransition.md","raw":"---\ntitle: \"React useTransition在性能优化中的使用\"\ndate: \"2023-07-06T06:37:42Z\"\ncategories:\n  - [React]\n\nurl: react-usetransition\ntags:\n  - react\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/19](https://github.com/taoliujun/blog/issues/19)\n\n<!--hexo\n---\nurl: react-usetransition\ntags:\n  - react\n---\n-->\n\n`useTransition` is a React Hook that lets you update the state without blocking the UI.\n\n文档中简单一句话说明`useTransition`的用途：不阻塞UI的情况下更新**状态**。\n\n## 解决什么问题？\n\n正常代码下，JavaScript是单线程的，所以执行一段耗时的代码，会阻塞UI的渲染，导致页面卡顿。React提供了**时间切片**的功能来尽量确保一帧中有充足的时间来渲染UI，而`useTransition`就是在这个基础上，可以在不阻塞UI的情况下使用时间分片特性**更新状态**。\n\n\n## 一个例子\n\n先看下卡顿是如何形成的，一个简单的代码，每500ms，更新`name`状态。另外点击按钮的时候，更新一系列状态并渲染到dom中。\n\n```tsx\nconst getDatas = () => {\n    const datas = [];\n    for (let i = 1; i <= 2000; i += 1) {\n        const s = Math.random() * Math.random();\n        datas.push(s);\n    }\n    return datas;\n};\n\nconst Main: FC = () => {\n    const [name, setName] = useState('world');\n\n    const [datas1, setDatas1] = useState<number[]>([]);\n    const [datas2, setDatas2] = useState<number[]>([]);\n    const [datas3, setDatas3] = useState<number[]>([]);\n    const [datas4, setDatas4] = useState<number[]>([]);\n    const [datas5, setDatas5] = useState<number[]>([]);\n    const [datas6, setDatas6] = useState<number[]>([]);\n    const [datas7, setDatas7] = useState<number[]>([]);\n    const [datas8, setDatas8] = useState<number[]>([]);\n\n    const onClick1 = useCallback(() => {\n        setDatas1(getDatas());\n        setDatas2(getDatas());\n        setDatas3(getDatas());\n        setDatas4(getDatas());\n        setDatas5(getDatas());\n        setDatas6(getDatas());\n        setDatas7(getDatas());\n        setDatas8(getDatas());\n    }, []);\n\n    useEffect(() => {\n        window.setInterval(() => {\n            setName(`world ${Math.random()}`);\n        }, 500);\n    }, []);\n\n    return (\n        <div>\n            hello {name}\n            <br />\n            <button onClick={onClick1}>click me</button>\n            <br />\n            <div>\n                {datas1.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas2.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas3.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas4.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas5.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas6.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas7.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas8.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n        </div>\n    );\n};\n```\n\n**首先不点击按钮，观察5秒，没有卡顿现象，性能表现如图：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041609217.png)\n\n可以看到有几个微微凸起的黄色点，对应着每次的`hello`状态更新和渲染，它们的执行时间都在1ms，没有超过一帧的时间。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041610767.png)\n\n选取其中一个黄色的点，查看它的详情。React的调度器、协调器、渲染器创建了对应的任务，分步执行了任务，具体可阅读React架构的相关文章。\n\n**然后连续点几次按钮，`hello`的渲染出现明显的卡顿，性能表现如图：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041608992.png)\n\n在性能图中截取的一段时间中，黄色是脚本执行时间，灰色是UI渲染时间，白色是空闲时间（我停止点击了一会儿），在每帧里，要跑完所有的状态变更和UI渲染，`datas`系列的状态变更和渲染占据了大量的时间，基本是阻塞了`hello`的状态变更和渲染。\n\n**只点击一次，性能表现如图：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041625903.png)\n\n可以看到几个Task，第一个Task就是在更新`datas`系列状态和渲染，它占据了太多帧的时间，导致`hello`的状态变更和渲染被推迟到后面的帧。\n\n## 优化它\n\n前面说到，React的架构中实现了**时间切片**，它允许开发者将*不重要*的变更推迟到后面的帧，这样就可以尽量保证优先执行默认任务。使用`useTransition`改下代码：\n\n```tsx\nconst [pending, startTransition] = useTransition();\n\nconst onClick1 = useCallback(() => {\n    startTransition(() => {\n        setDatas1(getDatas());\n        setDatas2(getDatas());\n        setDatas3(getDatas());\n        setDatas4(getDatas());\n        setDatas5(getDatas());\n        setDatas6(getDatas());\n        setDatas7(getDatas());\n        setDatas8(getDatas());\n    });\n}, []);\n```\n\n**再次连续点击按钮，卡顿现象明显减轻很多，性能表现如下：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041629743.png)\n\n一看起来，执行时间还是很长，那么为什么`hello`渲染看起来不卡顿呢？\n\n**只点一次，看看性能表现：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041631650.png)\n\n查看几个Task的详情，发现`datas`系列状态的更新，被分配在了多个Task中，中间还穿插了`hello`的状态更新的任务。这也印证了`useTransition`的实现背景：将不重要的任务通过时间切片架构，分配到多帧中，优先执行其他任务，从而实现不卡顿的目的。\n\n## 注意事项\n\n* `useTransition`是个hook，它的返回值还包括了一个pending状态，用来表示是否处于时间切片的过程中，可以用来优化UI，比如显示一个loading。\n\n* 你也可以使用`startTransition`这个util函数代替hook的使用。\n\n* 时间切片架构是调度状态变化的，所以`startTransition`的入参函数里，将状态更新标记为可切片，普通的代码段不会被标记。所以简单的说，你还是得将一个状态变更的执行时间控制在5ms内。\n\n\n\n","slug":"react-usetransition","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvy9001gjaot8o6ygvby","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/19\">https://github.com/taoliujun/blog/issues/19</a></p>\n<!--hexo\n---\nurl: react-usetransition\ntags:\n  - react\n---\n-->\n\n<p><code>useTransition</code> is a React Hook that lets you update the state without blocking the UI.</p>\n<p>文档中简单一句话说明<code>useTransition</code>的用途：不阻塞UI的情况下更新<strong>状态</strong>。</p>\n<h2 id=\"解决什么问题？\"><a href=\"#解决什么问题？\" class=\"headerlink\" title=\"解决什么问题？\"></a>解决什么问题？</h2><p>正常代码下，JavaScript是单线程的，所以执行一段耗时的代码，会阻塞UI的渲染，导致页面卡顿。React提供了<strong>时间切片</strong>的功能来尽量确保一帧中有充足的时间来渲染UI，而<code>useTransition</code>就是在这个基础上，可以在不阻塞UI的情况下使用时间分片特性<strong>更新状态</strong>。</p>\n<h2 id=\"一个例子\"><a href=\"#一个例子\" class=\"headerlink\" title=\"一个例子\"></a>一个例子</h2><p>先看下卡顿是如何形成的，一个简单的代码，每500ms，更新<code>name</code>状态。另外点击按钮的时候，更新一系列状态并渲染到dom中。</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title function_\">getDatas</span> = (<span class=\"params\"></span>) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> datas = [];</span><br><span class=\"line\">    <span class=\"keyword\">for</span> (<span class=\"keyword\">let</span> i = <span class=\"number\">1</span>; i &lt;= <span class=\"number\">2000</span>; i += <span class=\"number\">1</span>) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">const</span> s = <span class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>() * <span class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>();</span><br><span class=\"line\">        datas.<span class=\"title function_\">push</span>(s);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> datas;</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [name, setName] = <span class=\"title function_\">useState</span>(<span class=\"string\">&#x27;world&#x27;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas1, setDatas1] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas2, setDatas2] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas3, setDatas3] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas4, setDatas4] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas5, setDatas5] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas6, setDatas6] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas7, setDatas7] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas8, setDatas8] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> onClick1 = <span class=\"title function_\">useCallback</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"title function_\">setDatas1</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas2</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas3</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas4</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas5</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas6</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas7</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas8</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">    &#125;, []);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"title function_\">useEffect</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"variable language_\">window</span>.<span class=\"built_in\">setInterval</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">            <span class=\"title function_\">setName</span>(<span class=\"string\">`world <span class=\"subst\">$&#123;<span class=\"built_in\">Math</span>.random()&#125;</span>`</span>);</span><br><span class=\"line\">        &#125;, <span class=\"number\">500</span>);</span><br><span class=\"line\">    &#125;, []);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</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\">            hello &#123;name&#125;</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\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;onClick1&#125;</span>&gt;</span>click me<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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas1.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas2.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas3.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas4.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas5.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas6.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas7.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas8.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\">    );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p><strong>首先不点击按钮，观察5秒，没有卡顿现象，性能表现如图：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041609217.png\"></p>\n<p>可以看到有几个微微凸起的黄色点，对应着每次的<code>hello</code>状态更新和渲染，它们的执行时间都在1ms，没有超过一帧的时间。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041610767.png\"></p>\n<p>选取其中一个黄色的点，查看它的详情。React的调度器、协调器、渲染器创建了对应的任务，分步执行了任务，具体可阅读React架构的相关文章。</p>\n<p><strong>然后连续点几次按钮，<code>hello</code>的渲染出现明显的卡顿，性能表现如图：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041608992.png\"></p>\n<p>在性能图中截取的一段时间中，黄色是脚本执行时间，灰色是UI渲染时间，白色是空闲时间（我停止点击了一会儿），在每帧里，要跑完所有的状态变更和UI渲染，<code>datas</code>系列的状态变更和渲染占据了大量的时间，基本是阻塞了<code>hello</code>的状态变更和渲染。</p>\n<p><strong>只点击一次，性能表现如图：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041625903.png\"></p>\n<p>可以看到几个Task，第一个Task就是在更新<code>datas</code>系列状态和渲染，它占据了太多帧的时间，导致<code>hello</code>的状态变更和渲染被推迟到后面的帧。</p>\n<h2 id=\"优化它\"><a href=\"#优化它\" class=\"headerlink\" title=\"优化它\"></a>优化它</h2><p>前面说到，React的架构中实现了<strong>时间切片</strong>，它允许开发者将<em>不重要</em>的变更推迟到后面的帧，这样就可以尽量保证优先执行默认任务。使用<code>useTransition</code>改下代码：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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> [pending, startTransition] = <span class=\"title function_\">useTransition</span>();</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> onClick1 = <span class=\"title function_\">useCallback</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"title function_\">startTransition</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"title function_\">setDatas1</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas2</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas3</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas4</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas5</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas6</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas7</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas8</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">&#125;, []);</span><br></pre></td></tr></table></figure>\n\n<p><strong>再次连续点击按钮，卡顿现象明显减轻很多，性能表现如下：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041629743.png\"></p>\n<p>一看起来，执行时间还是很长，那么为什么<code>hello</code>渲染看起来不卡顿呢？</p>\n<p><strong>只点一次，看看性能表现：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041631650.png\"></p>\n<p>查看几个Task的详情，发现<code>datas</code>系列状态的更新，被分配在了多个Task中，中间还穿插了<code>hello</code>的状态更新的任务。这也印证了<code>useTransition</code>的实现背景：将不重要的任务通过时间切片架构，分配到多帧中，优先执行其他任务，从而实现不卡顿的目的。</p>\n<h2 id=\"注意事项\"><a href=\"#注意事项\" class=\"headerlink\" title=\"注意事项\"></a>注意事项</h2><ul>\n<li><p><code>useTransition</code>是个hook，它的返回值还包括了一个pending状态，用来表示是否处于时间切片的过程中，可以用来优化UI，比如显示一个loading。</p>\n</li>\n<li><p>你也可以使用<code>startTransition</code>这个util函数代替hook的使用。</p>\n</li>\n<li><p>时间切片架构是调度状态变化的，所以<code>startTransition</code>的入参函数里，将状态更新标记为可切片，普通的代码段不会被标记。所以简单的说，你还是得将一个状态变更的执行时间控制在5ms内。</p>\n</li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/19\">https://github.com/taoliujun/blog/issues/19</a></p>\n<!--hexo\n---\nurl: react-usetransition\ntags:\n  - react\n---\n-->\n\n<p><code>useTransition</code> is a React Hook that lets you update the state without blocking the UI.</p>\n<p>文档中简单一句话说明<code>useTransition</code>的用途：不阻塞UI的情况下更新<strong>状态</strong>。</p>\n<h2 id=\"解决什么问题？\"><a href=\"#解决什么问题？\" class=\"headerlink\" title=\"解决什么问题？\"></a>解决什么问题？</h2><p>正常代码下，JavaScript是单线程的，所以执行一段耗时的代码，会阻塞UI的渲染，导致页面卡顿。React提供了<strong>时间切片</strong>的功能来尽量确保一帧中有充足的时间来渲染UI，而<code>useTransition</code>就是在这个基础上，可以在不阻塞UI的情况下使用时间分片特性<strong>更新状态</strong>。</p>\n<h2 id=\"一个例子\"><a href=\"#一个例子\" class=\"headerlink\" title=\"一个例子\"></a>一个例子</h2><p>先看下卡顿是如何形成的，一个简单的代码，每500ms，更新<code>name</code>状态。另外点击按钮的时候，更新一系列状态并渲染到dom中。</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title function_\">getDatas</span> = (<span class=\"params\"></span>) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> datas = [];</span><br><span class=\"line\">    <span class=\"keyword\">for</span> (<span class=\"keyword\">let</span> i = <span class=\"number\">1</span>; i &lt;= <span class=\"number\">2000</span>; i += <span class=\"number\">1</span>) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">const</span> s = <span class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>() * <span class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>();</span><br><span class=\"line\">        datas.<span class=\"title function_\">push</span>(s);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> datas;</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [name, setName] = <span class=\"title function_\">useState</span>(<span class=\"string\">&#x27;world&#x27;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas1, setDatas1] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas2, setDatas2] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas3, setDatas3] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas4, setDatas4] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas5, setDatas5] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas6, setDatas6] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas7, setDatas7] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas8, setDatas8] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> onClick1 = <span class=\"title function_\">useCallback</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"title function_\">setDatas1</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas2</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas3</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas4</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas5</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas6</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas7</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas8</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">    &#125;, []);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"title function_\">useEffect</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"variable language_\">window</span>.<span class=\"built_in\">setInterval</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">            <span class=\"title function_\">setName</span>(<span class=\"string\">`world <span class=\"subst\">$&#123;<span class=\"built_in\">Math</span>.random()&#125;</span>`</span>);</span><br><span class=\"line\">        &#125;, <span class=\"number\">500</span>);</span><br><span class=\"line\">    &#125;, []);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</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\">            hello &#123;name&#125;</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\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;onClick1&#125;</span>&gt;</span>click me<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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas1.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas2.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas3.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas4.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas5.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas6.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas7.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas8.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\">    );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p><strong>首先不点击按钮，观察5秒，没有卡顿现象，性能表现如图：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041609217.png\"></p>\n<p>可以看到有几个微微凸起的黄色点，对应着每次的<code>hello</code>状态更新和渲染，它们的执行时间都在1ms，没有超过一帧的时间。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041610767.png\"></p>\n<p>选取其中一个黄色的点，查看它的详情。React的调度器、协调器、渲染器创建了对应的任务，分步执行了任务，具体可阅读React架构的相关文章。</p>\n<p><strong>然后连续点几次按钮，<code>hello</code>的渲染出现明显的卡顿，性能表现如图：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041608992.png\"></p>\n<p>在性能图中截取的一段时间中，黄色是脚本执行时间，灰色是UI渲染时间，白色是空闲时间（我停止点击了一会儿），在每帧里，要跑完所有的状态变更和UI渲染，<code>datas</code>系列的状态变更和渲染占据了大量的时间，基本是阻塞了<code>hello</code>的状态变更和渲染。</p>\n<p><strong>只点击一次，性能表现如图：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041625903.png\"></p>\n<p>可以看到几个Task，第一个Task就是在更新<code>datas</code>系列状态和渲染，它占据了太多帧的时间，导致<code>hello</code>的状态变更和渲染被推迟到后面的帧。</p>\n<h2 id=\"优化它\"><a href=\"#优化它\" class=\"headerlink\" title=\"优化它\"></a>优化它</h2><p>前面说到，React的架构中实现了<strong>时间切片</strong>，它允许开发者将<em>不重要</em>的变更推迟到后面的帧，这样就可以尽量保证优先执行默认任务。使用<code>useTransition</code>改下代码：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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> [pending, startTransition] = <span class=\"title function_\">useTransition</span>();</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> onClick1 = <span class=\"title function_\">useCallback</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"title function_\">startTransition</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"title function_\">setDatas1</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas2</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas3</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas4</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas5</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas6</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas7</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas8</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">&#125;, []);</span><br></pre></td></tr></table></figure>\n\n<p><strong>再次连续点击按钮，卡顿现象明显减轻很多，性能表现如下：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041629743.png\"></p>\n<p>一看起来，执行时间还是很长，那么为什么<code>hello</code>渲染看起来不卡顿呢？</p>\n<p><strong>只点一次，看看性能表现：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041631650.png\"></p>\n<p>查看几个Task的详情，发现<code>datas</code>系列状态的更新，被分配在了多个Task中，中间还穿插了<code>hello</code>的状态更新的任务。这也印证了<code>useTransition</code>的实现背景：将不重要的任务通过时间切片架构，分配到多帧中，优先执行其他任务，从而实现不卡顿的目的。</p>\n<h2 id=\"注意事项\"><a href=\"#注意事项\" class=\"headerlink\" title=\"注意事项\"></a>注意事项</h2><ul>\n<li><p><code>useTransition</code>是个hook，它的返回值还包括了一个pending状态，用来表示是否处于时间切片的过程中，可以用来优化UI，比如显示一个loading。</p>\n</li>\n<li><p>你也可以使用<code>startTransition</code>这个util函数代替hook的使用。</p>\n</li>\n<li><p>时间切片架构是调度状态变化的，所以<code>startTransition</code>的入参函数里，将状态更新标记为可切片，普通的代码段不会被标记。所以简单的说，你还是得将一个状态变更的执行时间控制在5ms内。</p>\n</li>\n</ul>\n"},{"title":"React公共状态利器 - Zustand","date":"2023-12-12T22:46:26.000Z","url":"react-zustand","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/35](https://github.com/taoliujun/blog/issues/35)\n\n<!--hexo\n---\nurl: react-zustand\ntags:\n  - zustand\n  - react store\n---\n-->\n\n官方文档：https://docs.pmnd.rs/zustand\n\n# 如何使用\n\n**Zustand** 是一个非常简单粗暴的全局状态管理库，它的使用有多简单呢？如下：\n\n```bash\n> pnpm add zustand\n```\n\n```ts\n// useFormStateStore.ts\nimport { create } from 'zustand';\n\ninterface State {\n    loading: boolean;\n    disabled: boolean;\n    setLoadingByAge: (value: number) => void;\n}\n\nexport const useFormStateStore = create<State>((set) => ({\n    loading: false,\n    disabled: false,\n    setLoadingByAge: (value) => {\n        set({ loading: value > 10 });\n    },\n}));\n```\n\n```tsx\n// app.tsx\nimport { useState, type FC } from 'react';\nimport { useFormStateStore } from './useFormStateStore';\nimport { Button } from '@/components/Button';\n\nconst Loading: FC = () => {\n    const { loading } = useFormStateStore();\n    return <div>loading: {String(loading)}</div>;\n};\n\nconst Disabled: FC = () => {\n    const { disabled } = useFormStateStore();\n    return <div>disabled: {String(disabled)}</div>;\n};\n\nconst Main: FC = () => {\n    const { setLoadingByAge } = useFormStateStore();\n    const [age, setAge] = useState(0);\n\n    return (\n        <div>\n            <Loading />\n            <br />\n            <Disabled />\n            <br />\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        loading: true,\n                    });\n                }}\n            >\n                set loading true\n            </Button>\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        loading: false,\n                    });\n                }}\n            >\n                set loading false\n            </Button>\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        disabled: true,\n                    });\n                }}\n            >\n                set disabled true\n            </Button>\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        disabled: false,\n                    });\n                }}\n            >\n                set disabled false\n            </Button>\n            <br />\n            <input\n                type=\"number\"\n                value={age}\n                onChange={(e) => {\n                    setAge(Number(e.target.value));\n                }}\n            />\n            <br />\n            <Button\n                onClick={() => {\n                    setLoadingByAge(age);\n                }}\n            >\n                set loading by age\n            </Button>\n        </div>\n    );\n};\n\nexport default Main;\n```\n\n在`useFormStateStore.ts`中定义了状态，然后在`app.tsx`中使用，就是这么简单粗暴！这里有几点介绍下：\n\n- 对于简单的状态更新，使用`setState`方法就可以，它的参数是一个对象，这个对象就是你要更新的状态，它会和之前的状态进行合并，然后返回一个新的状态，从而触发组件更新。\n\n- 对于需要通用的逻辑处理的状态更新，参照`useFormStateStore.ts`中的`setLoadingByAge`方法，将它作为状态里的一个方法就行了。\n\n# Zustand\n\n使用非常简单，API也很少，它的原理是使用了`Proxy`，所以它的性能非常好。\n\n# 相比Redux\n\n相比Redux，Zustand的代码非常简单明了，不需要使用`connect`、`mapStateToProps`、`mapDispatchToProps`这些方法。\n\n# 相比React Context\n\nReact Context需要一个`Provider`包裹组件以传递状态，需要一个`useContext`使用状态，光从层级上就让人绕起来了。而Zustand只需要一个`create`方法，就可以使用了，且状态是全局的，不需要传递。\n\n\n\n\n","source":"_posts/react-zustand.md","raw":"---\ntitle: \"React公共状态利器 - Zustand\"\ndate: \"2023-12-13T06:46:26Z\"\ncategories:\n  - [React]\n\nurl: react-zustand\ntags:\n  - zustand\n  - react store\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/35](https://github.com/taoliujun/blog/issues/35)\n\n<!--hexo\n---\nurl: react-zustand\ntags:\n  - zustand\n  - react store\n---\n-->\n\n官方文档：https://docs.pmnd.rs/zustand\n\n# 如何使用\n\n**Zustand** 是一个非常简单粗暴的全局状态管理库，它的使用有多简单呢？如下：\n\n```bash\n> pnpm add zustand\n```\n\n```ts\n// useFormStateStore.ts\nimport { create } from 'zustand';\n\ninterface State {\n    loading: boolean;\n    disabled: boolean;\n    setLoadingByAge: (value: number) => void;\n}\n\nexport const useFormStateStore = create<State>((set) => ({\n    loading: false,\n    disabled: false,\n    setLoadingByAge: (value) => {\n        set({ loading: value > 10 });\n    },\n}));\n```\n\n```tsx\n// app.tsx\nimport { useState, type FC } from 'react';\nimport { useFormStateStore } from './useFormStateStore';\nimport { Button } from '@/components/Button';\n\nconst Loading: FC = () => {\n    const { loading } = useFormStateStore();\n    return <div>loading: {String(loading)}</div>;\n};\n\nconst Disabled: FC = () => {\n    const { disabled } = useFormStateStore();\n    return <div>disabled: {String(disabled)}</div>;\n};\n\nconst Main: FC = () => {\n    const { setLoadingByAge } = useFormStateStore();\n    const [age, setAge] = useState(0);\n\n    return (\n        <div>\n            <Loading />\n            <br />\n            <Disabled />\n            <br />\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        loading: true,\n                    });\n                }}\n            >\n                set loading true\n            </Button>\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        loading: false,\n                    });\n                }}\n            >\n                set loading false\n            </Button>\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        disabled: true,\n                    });\n                }}\n            >\n                set disabled true\n            </Button>\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        disabled: false,\n                    });\n                }}\n            >\n                set disabled false\n            </Button>\n            <br />\n            <input\n                type=\"number\"\n                value={age}\n                onChange={(e) => {\n                    setAge(Number(e.target.value));\n                }}\n            />\n            <br />\n            <Button\n                onClick={() => {\n                    setLoadingByAge(age);\n                }}\n            >\n                set loading by age\n            </Button>\n        </div>\n    );\n};\n\nexport default Main;\n```\n\n在`useFormStateStore.ts`中定义了状态，然后在`app.tsx`中使用，就是这么简单粗暴！这里有几点介绍下：\n\n- 对于简单的状态更新，使用`setState`方法就可以，它的参数是一个对象，这个对象就是你要更新的状态，它会和之前的状态进行合并，然后返回一个新的状态，从而触发组件更新。\n\n- 对于需要通用的逻辑处理的状态更新，参照`useFormStateStore.ts`中的`setLoadingByAge`方法，将它作为状态里的一个方法就行了。\n\n# Zustand\n\n使用非常简单，API也很少，它的原理是使用了`Proxy`，所以它的性能非常好。\n\n# 相比Redux\n\n相比Redux，Zustand的代码非常简单明了，不需要使用`connect`、`mapStateToProps`、`mapDispatchToProps`这些方法。\n\n# 相比React Context\n\nReact Context需要一个`Provider`包裹组件以传递状态，需要一个`useContext`使用状态，光从层级上就让人绕起来了。而Zustand只需要一个`create`方法，就可以使用了，且状态是全局的，不需要传递。\n\n\n\n\n","slug":"react-zustand","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvya001jjaotaulf9tew","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/35\">https://github.com/taoliujun/blog/issues/35</a></p>\n<!--hexo\n---\nurl: react-zustand\ntags:\n  - zustand\n  - react store\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.pmnd.rs/zustand\">https://docs.pmnd.rs/zustand</a></p>\n<h1 id=\"如何使用\"><a href=\"#如何使用\" class=\"headerlink\" title=\"如何使用\"></a>如何使用</h1><p><strong>Zustand</strong> 是一个非常简单粗暴的全局状态管理库，它的使用有多简单呢？如下：</p>\n<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\">&gt; pnpm add zustand</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">// useFormStateStore.ts</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; create &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;zustand&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">interface</span> <span class=\"title class_\">State</span> &#123;</span><br><span class=\"line\">    <span class=\"attr\">loading</span>: <span class=\"built_in\">boolean</span>;</span><br><span class=\"line\">    <span class=\"attr\">disabled</span>: <span class=\"built_in\">boolean</span>;</span><br><span class=\"line\">    <span class=\"attr\">setLoadingByAge</span>: <span class=\"function\">(<span class=\"params\">value: <span class=\"built_in\">number</span></span>) =&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 class=\"keyword\">export</span> <span class=\"keyword\">const</span> useFormStateStore = create&lt;<span class=\"title class_\">State</span>&gt;(<span class=\"function\">(<span class=\"params\">set</span>) =&gt;</span> (&#123;</span><br><span class=\"line\">    <span class=\"attr\">loading</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\">    <span class=\"attr\">disabled</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\">    <span class=\"attr\">setLoadingByAge</span>: <span class=\"function\">(<span class=\"params\">value</span>) =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"title function_\">set</span>(&#123; <span class=\"attr\">loading</span>: value &gt; <span class=\"number\">10</span> &#125;);</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">&#125;));</span><br></pre></td></tr></table></figure>\n\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"comment\">// app.tsx</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; useState, <span class=\"keyword\">type</span> <span class=\"variable constant_\">FC</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;react&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; useFormStateStore &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;./useFormStateStore&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; <span class=\"title class_\">Button</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;@/components/Button&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title class_\">Loading</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> &#123; loading &#125; = <span class=\"title function_\">useFormStateStore</span>();</span><br><span class=\"line\">    <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>loading: &#123;String(loading)&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Disabled</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> &#123; disabled &#125; = <span class=\"title function_\">useFormStateStore</span>();</span><br><span class=\"line\">    <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>disabled: &#123;String(disabled)&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> &#123; setLoadingByAge &#125; = <span class=\"title function_\">useFormStateStore</span>();</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [age, setAge] = <span class=\"title function_\">useState</span>(<span class=\"number\">0</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</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\">Loading</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\">Disabled</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\">Button</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        loading: true,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set loading true</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        loading: false,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set loading false</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        disabled: true,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set disabled true</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        disabled: false,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set disabled false</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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\">input</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">type</span>=<span class=\"string\">&quot;number&quot;</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">value</span>=<span class=\"string\">&#123;age&#125;</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    setAge(Number(e.target.value));</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            /&gt;</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\">Button</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    setLoadingByAge(age);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set loading by age</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"title class_\">Main</span>;</span><br></pre></td></tr></table></figure>\n\n<p>在<code>useFormStateStore.ts</code>中定义了状态，然后在<code>app.tsx</code>中使用，就是这么简单粗暴！这里有几点介绍下：</p>\n<ul>\n<li><p>对于简单的状态更新，使用<code>setState</code>方法就可以，它的参数是一个对象，这个对象就是你要更新的状态，它会和之前的状态进行合并，然后返回一个新的状态，从而触发组件更新。</p>\n</li>\n<li><p>对于需要通用的逻辑处理的状态更新，参照<code>useFormStateStore.ts</code>中的<code>setLoadingByAge</code>方法，将它作为状态里的一个方法就行了。</p>\n</li>\n</ul>\n<h1 id=\"Zustand\"><a href=\"#Zustand\" class=\"headerlink\" title=\"Zustand\"></a>Zustand</h1><p>使用非常简单，API也很少，它的原理是使用了<code>Proxy</code>，所以它的性能非常好。</p>\n<h1 id=\"相比Redux\"><a href=\"#相比Redux\" class=\"headerlink\" title=\"相比Redux\"></a>相比Redux</h1><p>相比Redux，Zustand的代码非常简单明了，不需要使用<code>connect</code>、<code>mapStateToProps</code>、<code>mapDispatchToProps</code>这些方法。</p>\n<h1 id=\"相比React-Context\"><a href=\"#相比React-Context\" class=\"headerlink\" title=\"相比React Context\"></a>相比React Context</h1><p>React Context需要一个<code>Provider</code>包裹组件以传递状态，需要一个<code>useContext</code>使用状态，光从层级上就让人绕起来了。而Zustand只需要一个<code>create</code>方法，就可以使用了，且状态是全局的，不需要传递。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/35\">https://github.com/taoliujun/blog/issues/35</a></p>\n<!--hexo\n---\nurl: react-zustand\ntags:\n  - zustand\n  - react store\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.pmnd.rs/zustand\">https://docs.pmnd.rs/zustand</a></p>\n<h1 id=\"如何使用\"><a href=\"#如何使用\" class=\"headerlink\" title=\"如何使用\"></a>如何使用</h1><p><strong>Zustand</strong> 是一个非常简单粗暴的全局状态管理库，它的使用有多简单呢？如下：</p>\n<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\">&gt; pnpm add zustand</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">// useFormStateStore.ts</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; create &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;zustand&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">interface</span> <span class=\"title class_\">State</span> &#123;</span><br><span class=\"line\">    <span class=\"attr\">loading</span>: <span class=\"built_in\">boolean</span>;</span><br><span class=\"line\">    <span class=\"attr\">disabled</span>: <span class=\"built_in\">boolean</span>;</span><br><span class=\"line\">    <span class=\"attr\">setLoadingByAge</span>: <span class=\"function\">(<span class=\"params\">value: <span class=\"built_in\">number</span></span>) =&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 class=\"keyword\">export</span> <span class=\"keyword\">const</span> useFormStateStore = create&lt;<span class=\"title class_\">State</span>&gt;(<span class=\"function\">(<span class=\"params\">set</span>) =&gt;</span> (&#123;</span><br><span class=\"line\">    <span class=\"attr\">loading</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\">    <span class=\"attr\">disabled</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\">    <span class=\"attr\">setLoadingByAge</span>: <span class=\"function\">(<span class=\"params\">value</span>) =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"title function_\">set</span>(&#123; <span class=\"attr\">loading</span>: value &gt; <span class=\"number\">10</span> &#125;);</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">&#125;));</span><br></pre></td></tr></table></figure>\n\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"comment\">// app.tsx</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; useState, <span class=\"keyword\">type</span> <span class=\"variable constant_\">FC</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;react&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; useFormStateStore &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;./useFormStateStore&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; <span class=\"title class_\">Button</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;@/components/Button&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title class_\">Loading</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> &#123; loading &#125; = <span class=\"title function_\">useFormStateStore</span>();</span><br><span class=\"line\">    <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>loading: &#123;String(loading)&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Disabled</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> &#123; disabled &#125; = <span class=\"title function_\">useFormStateStore</span>();</span><br><span class=\"line\">    <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>disabled: &#123;String(disabled)&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> &#123; setLoadingByAge &#125; = <span class=\"title function_\">useFormStateStore</span>();</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [age, setAge] = <span class=\"title function_\">useState</span>(<span class=\"number\">0</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</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\">Loading</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\">Disabled</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\">Button</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        loading: true,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set loading true</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        loading: false,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set loading false</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        disabled: true,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set disabled true</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        disabled: false,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set disabled false</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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\">input</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">type</span>=<span class=\"string\">&quot;number&quot;</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">value</span>=<span class=\"string\">&#123;age&#125;</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    setAge(Number(e.target.value));</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            /&gt;</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\">Button</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    setLoadingByAge(age);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set loading by age</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"title class_\">Main</span>;</span><br></pre></td></tr></table></figure>\n\n<p>在<code>useFormStateStore.ts</code>中定义了状态，然后在<code>app.tsx</code>中使用，就是这么简单粗暴！这里有几点介绍下：</p>\n<ul>\n<li><p>对于简单的状态更新，使用<code>setState</code>方法就可以，它的参数是一个对象，这个对象就是你要更新的状态，它会和之前的状态进行合并，然后返回一个新的状态，从而触发组件更新。</p>\n</li>\n<li><p>对于需要通用的逻辑处理的状态更新，参照<code>useFormStateStore.ts</code>中的<code>setLoadingByAge</code>方法，将它作为状态里的一个方法就行了。</p>\n</li>\n</ul>\n<h1 id=\"Zustand\"><a href=\"#Zustand\" class=\"headerlink\" title=\"Zustand\"></a>Zustand</h1><p>使用非常简单，API也很少，它的原理是使用了<code>Proxy</code>，所以它的性能非常好。</p>\n<h1 id=\"相比Redux\"><a href=\"#相比Redux\" class=\"headerlink\" title=\"相比Redux\"></a>相比Redux</h1><p>相比Redux，Zustand的代码非常简单明了，不需要使用<code>connect</code>、<code>mapStateToProps</code>、<code>mapDispatchToProps</code>这些方法。</p>\n<h1 id=\"相比React-Context\"><a href=\"#相比React-Context\" class=\"headerlink\" title=\"相比React Context\"></a>相比React Context</h1><p>React Context需要一个<code>Provider</code>包裹组件以传递状态，需要一个<code>useContext</code>使用状态，光从层级上就让人绕起来了。而Zustand只需要一个<code>create</code>方法，就可以使用了，且状态是全局的，不需要传递。</p>\n"},{"title":"snapshot对单测覆盖率的影响以及应对方案","date":"2024-01-09T00:44:02.000Z","url":"snapshot-impact-on-coverage","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/46](https://github.com/taoliujun/blog/issues/46)\n\n<!--hexo\n---\nurl: snapshot-impact-on-coverage\ntags:\n  - jest\n---\n-->\n\nJest snapshot是把双刃剑，虽然使用它可以快速的编写测试用例，但它导致开发者忽略了测试用例的细节设计。\n\n## 问题\n\n试想一个场景，有一个方法返回了复杂的结构，开发者A由于懒惰或自信以后能根据snapshot的结果来修复问题，而只写了snapshot。过了一段时间，开发者A或B修改了该方法，发现snapshot匹配失败，那么他会这样做：\n\n1. 仔细检查匹配失败的原因，然后或修改代码、或更新snapshot。\n2. 直接更新snapshot。\n\n我相信，大部分人都会选择第二种方式，因为这样更快，更简单。但后果是，大家都只关心了方法的结果，而忽略了方法的细节设计，这样的测试用例是不可靠的。即便在pull request环节，Reviewers面对难以阅读的snapshot文件，也往往是选择了approve。\n\n所以，需要一个方案来实现几个目的：\n\n- 保留snapshot对复杂结构进行测试。\n- snapshot不提高覆盖率，因为低覆盖率会警告开发者去关注测试用例的细节设计。\n\n## 方案\n\n因为jest的限制，执行用例肯定会影响覆盖率。那么可以执行两次用例，一次是执行包含snapshot的文件来校验用例，一次是执行不包含snapshot的文件来生成测试覆盖率。\n\n于是，新增两个`script`：\n\n```json\n// package.json\n\"scripts\": {\n  \"test\": \"pnpm exec jest\",\n  \"test:coverage\": \"pnpm exec jest --config=jest.coverage.config.js\",\n},\n```\n\n默认的`jest.config.js`配置不包含覆盖率配置，而`jest.coverage.config.js`包含覆盖率配置。\n\n```js\n// jest.config.js\nmodule.exports = {\n    // ...\n};\n```\n\n```js\n// jest.coverage.config.js\nconst baseConfig = require('./jest.config');\n\nmodule.exports = {\n    ...baseConfig,\n\n    testMatch: ['**/src/**/__tests__/**/*.ts', '!**/src/**/__tests__/**/*.snap.test.ts'],\n\n    collectCoverage: true,\n    collectCoverageFrom: ['src/**/*.ts', '!src/**/*.snap.test.ts', '!src/index.ts'],\n    coverageDirectory: 'reports/jest',\n    coverageThreshold: { global: { lines: 90, branches: 50 } },\n    coverageReporters: ['html'],\n};\n```\n\n在`jest.coverage.config.js`中，`testMatch`排除执行`.snap.test.ts`用例文件，`collectCoverageFrom`也排除了`.snap.test.ts`文件本身作为源码文件被收集的问题。\n\n接下来，只需要把包含`toMatchSnapshot`等方法的测试用例，单独成文件且命名为`*.snap.test.ts`，就可以了。\n\n\n\n","source":"_posts/snapshot-impact-on-coverage.md","raw":"---\ntitle: \"snapshot对单测覆盖率的影响以及应对方案\"\ndate: \"2024-01-09T08:44:02Z\"\ncategories:\n  - [工程化]\n\nurl: snapshot-impact-on-coverage\ntags:\n  - jest\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/46](https://github.com/taoliujun/blog/issues/46)\n\n<!--hexo\n---\nurl: snapshot-impact-on-coverage\ntags:\n  - jest\n---\n-->\n\nJest snapshot是把双刃剑，虽然使用它可以快速的编写测试用例，但它导致开发者忽略了测试用例的细节设计。\n\n## 问题\n\n试想一个场景，有一个方法返回了复杂的结构，开发者A由于懒惰或自信以后能根据snapshot的结果来修复问题，而只写了snapshot。过了一段时间，开发者A或B修改了该方法，发现snapshot匹配失败，那么他会这样做：\n\n1. 仔细检查匹配失败的原因，然后或修改代码、或更新snapshot。\n2. 直接更新snapshot。\n\n我相信，大部分人都会选择第二种方式，因为这样更快，更简单。但后果是，大家都只关心了方法的结果，而忽略了方法的细节设计，这样的测试用例是不可靠的。即便在pull request环节，Reviewers面对难以阅读的snapshot文件，也往往是选择了approve。\n\n所以，需要一个方案来实现几个目的：\n\n- 保留snapshot对复杂结构进行测试。\n- snapshot不提高覆盖率，因为低覆盖率会警告开发者去关注测试用例的细节设计。\n\n## 方案\n\n因为jest的限制，执行用例肯定会影响覆盖率。那么可以执行两次用例，一次是执行包含snapshot的文件来校验用例，一次是执行不包含snapshot的文件来生成测试覆盖率。\n\n于是，新增两个`script`：\n\n```json\n// package.json\n\"scripts\": {\n  \"test\": \"pnpm exec jest\",\n  \"test:coverage\": \"pnpm exec jest --config=jest.coverage.config.js\",\n},\n```\n\n默认的`jest.config.js`配置不包含覆盖率配置，而`jest.coverage.config.js`包含覆盖率配置。\n\n```js\n// jest.config.js\nmodule.exports = {\n    // ...\n};\n```\n\n```js\n// jest.coverage.config.js\nconst baseConfig = require('./jest.config');\n\nmodule.exports = {\n    ...baseConfig,\n\n    testMatch: ['**/src/**/__tests__/**/*.ts', '!**/src/**/__tests__/**/*.snap.test.ts'],\n\n    collectCoverage: true,\n    collectCoverageFrom: ['src/**/*.ts', '!src/**/*.snap.test.ts', '!src/index.ts'],\n    coverageDirectory: 'reports/jest',\n    coverageThreshold: { global: { lines: 90, branches: 50 } },\n    coverageReporters: ['html'],\n};\n```\n\n在`jest.coverage.config.js`中，`testMatch`排除执行`.snap.test.ts`用例文件，`collectCoverageFrom`也排除了`.snap.test.ts`文件本身作为源码文件被收集的问题。\n\n接下来，只需要把包含`toMatchSnapshot`等方法的测试用例，单独成文件且命名为`*.snap.test.ts`，就可以了。\n\n\n\n","slug":"snapshot-impact-on-coverage","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvyb001njaotgf4c4r3y","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/46\">https://github.com/taoliujun/blog/issues/46</a></p>\n<!--hexo\n---\nurl: snapshot-impact-on-coverage\ntags:\n  - jest\n---\n-->\n\n<p>Jest snapshot是把双刃剑，虽然使用它可以快速的编写测试用例，但它导致开发者忽略了测试用例的细节设计。</p>\n<h2 id=\"问题\"><a href=\"#问题\" class=\"headerlink\" title=\"问题\"></a>问题</h2><p>试想一个场景，有一个方法返回了复杂的结构，开发者A由于懒惰或自信以后能根据snapshot的结果来修复问题，而只写了snapshot。过了一段时间，开发者A或B修改了该方法，发现snapshot匹配失败，那么他会这样做：</p>\n<ol>\n<li>仔细检查匹配失败的原因，然后或修改代码、或更新snapshot。</li>\n<li>直接更新snapshot。</li>\n</ol>\n<p>我相信，大部分人都会选择第二种方式，因为这样更快，更简单。但后果是，大家都只关心了方法的结果，而忽略了方法的细节设计，这样的测试用例是不可靠的。即便在pull request环节，Reviewers面对难以阅读的snapshot文件，也往往是选择了approve。</p>\n<p>所以，需要一个方案来实现几个目的：</p>\n<ul>\n<li>保留snapshot对复杂结构进行测试。</li>\n<li>snapshot不提高覆盖率，因为低覆盖率会警告开发者去关注测试用例的细节设计。</li>\n</ul>\n<h2 id=\"方案\"><a href=\"#方案\" class=\"headerlink\" title=\"方案\"></a>方案</h2><p>因为jest的限制，执行用例肯定会影响覆盖率。那么可以执行两次用例，一次是执行包含snapshot的文件来校验用例，一次是执行不包含snapshot的文件来生成测试覆盖率。</p>\n<p>于是，新增两个<code>script</code>：</p>\n<figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"attr\">&quot;scripts&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;test&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;pnpm exec jest&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;test:coverage&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;pnpm exec jest --config=jest.coverage.config.js&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span><span class=\"punctuation\">,</span></span><br></pre></td></tr></table></figure>\n\n<p>默认的<code>jest.config.js</code>配置不包含覆盖率配置，而<code>jest.coverage.config.js</code>包含覆盖率配置。</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><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\">// jest.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=\"comment\">// ...</span></span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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\">// jest.coverage.config.js</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> baseConfig = <span class=\"built_in\">require</span>(<span class=\"string\">&#x27;./jest.config&#x27;</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\">    ...baseConfig,</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">testMatch</span>: [<span class=\"string\">&#x27;**/src/**/__tests__/**/*.ts&#x27;</span>, <span class=\"string\">&#x27;!**/src/**/__tests__/**/*.snap.test.ts&#x27;</span>],</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">collectCoverage</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    <span class=\"attr\">collectCoverageFrom</span>: [<span class=\"string\">&#x27;src/**/*.ts&#x27;</span>, <span class=\"string\">&#x27;!src/**/*.snap.test.ts&#x27;</span>, <span class=\"string\">&#x27;!src/index.ts&#x27;</span>],</span><br><span class=\"line\">    <span class=\"attr\">coverageDirectory</span>: <span class=\"string\">&#x27;reports/jest&#x27;</span>,</span><br><span class=\"line\">    <span class=\"attr\">coverageThreshold</span>: &#123; <span class=\"attr\">global</span>: &#123; <span class=\"attr\">lines</span>: <span class=\"number\">90</span>, <span class=\"attr\">branches</span>: <span class=\"number\">50</span> &#125; &#125;,</span><br><span class=\"line\">    <span class=\"attr\">coverageReporters</span>: [<span class=\"string\">&#x27;html&#x27;</span>],</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>在<code>jest.coverage.config.js</code>中，<code>testMatch</code>排除执行<code>.snap.test.ts</code>用例文件，<code>collectCoverageFrom</code>也排除了<code>.snap.test.ts</code>文件本身作为源码文件被收集的问题。</p>\n<p>接下来，只需要把包含<code>toMatchSnapshot</code>等方法的测试用例，单独成文件且命名为<code>*.snap.test.ts</code>，就可以了。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/46\">https://github.com/taoliujun/blog/issues/46</a></p>\n<!--hexo\n---\nurl: snapshot-impact-on-coverage\ntags:\n  - jest\n---\n-->\n\n<p>Jest snapshot是把双刃剑，虽然使用它可以快速的编写测试用例，但它导致开发者忽略了测试用例的细节设计。</p>\n<h2 id=\"问题\"><a href=\"#问题\" class=\"headerlink\" title=\"问题\"></a>问题</h2><p>试想一个场景，有一个方法返回了复杂的结构，开发者A由于懒惰或自信以后能根据snapshot的结果来修复问题，而只写了snapshot。过了一段时间，开发者A或B修改了该方法，发现snapshot匹配失败，那么他会这样做：</p>\n<ol>\n<li>仔细检查匹配失败的原因，然后或修改代码、或更新snapshot。</li>\n<li>直接更新snapshot。</li>\n</ol>\n<p>我相信，大部分人都会选择第二种方式，因为这样更快，更简单。但后果是，大家都只关心了方法的结果，而忽略了方法的细节设计，这样的测试用例是不可靠的。即便在pull request环节，Reviewers面对难以阅读的snapshot文件，也往往是选择了approve。</p>\n<p>所以，需要一个方案来实现几个目的：</p>\n<ul>\n<li>保留snapshot对复杂结构进行测试。</li>\n<li>snapshot不提高覆盖率，因为低覆盖率会警告开发者去关注测试用例的细节设计。</li>\n</ul>\n<h2 id=\"方案\"><a href=\"#方案\" class=\"headerlink\" title=\"方案\"></a>方案</h2><p>因为jest的限制，执行用例肯定会影响覆盖率。那么可以执行两次用例，一次是执行包含snapshot的文件来校验用例，一次是执行不包含snapshot的文件来生成测试覆盖率。</p>\n<p>于是，新增两个<code>script</code>：</p>\n<figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"attr\">&quot;scripts&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;test&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;pnpm exec jest&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;test:coverage&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;pnpm exec jest --config=jest.coverage.config.js&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span><span class=\"punctuation\">,</span></span><br></pre></td></tr></table></figure>\n\n<p>默认的<code>jest.config.js</code>配置不包含覆盖率配置，而<code>jest.coverage.config.js</code>包含覆盖率配置。</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><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\">// jest.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=\"comment\">// ...</span></span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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\">// jest.coverage.config.js</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> baseConfig = <span class=\"built_in\">require</span>(<span class=\"string\">&#x27;./jest.config&#x27;</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\">    ...baseConfig,</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">testMatch</span>: [<span class=\"string\">&#x27;**/src/**/__tests__/**/*.ts&#x27;</span>, <span class=\"string\">&#x27;!**/src/**/__tests__/**/*.snap.test.ts&#x27;</span>],</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">collectCoverage</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    <span class=\"attr\">collectCoverageFrom</span>: [<span class=\"string\">&#x27;src/**/*.ts&#x27;</span>, <span class=\"string\">&#x27;!src/**/*.snap.test.ts&#x27;</span>, <span class=\"string\">&#x27;!src/index.ts&#x27;</span>],</span><br><span class=\"line\">    <span class=\"attr\">coverageDirectory</span>: <span class=\"string\">&#x27;reports/jest&#x27;</span>,</span><br><span class=\"line\">    <span class=\"attr\">coverageThreshold</span>: &#123; <span class=\"attr\">global</span>: &#123; <span class=\"attr\">lines</span>: <span class=\"number\">90</span>, <span class=\"attr\">branches</span>: <span class=\"number\">50</span> &#125; &#125;,</span><br><span class=\"line\">    <span class=\"attr\">coverageReporters</span>: [<span class=\"string\">&#x27;html&#x27;</span>],</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>在<code>jest.coverage.config.js</code>中，<code>testMatch</code>排除执行<code>.snap.test.ts</code>用例文件，<code>collectCoverageFrom</code>也排除了<code>.snap.test.ts</code>文件本身作为源码文件被收集的问题。</p>\n<p>接下来，只需要把包含<code>toMatchSnapshot</code>等方法的测试用例，单独成文件且命名为<code>*.snap.test.ts</code>，就可以了。</p>\n"},{"title":"关于tsconfig.json，最后更新2023/11月...","date":"2023-09-04T18:51:45.000Z","url":"tsconfig-json","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/23](https://github.com/taoliujun/blog/issues/23)\n\n<!--hexo\n---\nurl: tsconfig-json\ntags:\n  - typescript\n---\n-->\n\n**截至TypeScript 5.2**，`tsconfig.json`的配置项已经有百十个之多，它的某些选项甚至影响了项目的执行结果，所以尽量多的了解它们能让程序员更深的了解ts，写出优美语句让CTO赞赏，甚至避免写出bug。\n\n本issue的内容，只是个人在工作经验的影响下，对官方文档的内容理解。且内容有所欠缺，基本只记录了我工作涉及到的配置项，比如不怎么使用class，对class的配置项就略过了。\n\n官方文档：https://www.typescriptlang.org/tsconfig\n\n****\n\n<!--hexo-->\n\n# Top Level\n\n一些根配置项。\n\n## extends\n\n继承另一个配置文件，推荐的一些官方的配置文件来继承使用：https://github.com/tsconfig/bases/tree/main/bases\n\n## files, include, exclude\n\n这几项指定了在项目里，被ts作用的文件集合。配置本身没什么好说的，记录下它们之间的关系。\n\n- 如果files指定了，那么include的默认值是`[]`，否则include的默认值是`**/*`；\n- exclude用于排除include已指定的文件集合，但这些文件仍然是可以在项目里被引用的；\n- exclude默认排除了`node_modules`、`outDir`；\n\n## references\n\n用于项目文件夹分别打包，并且其中有缓存机制的参与，所以编译速度会快很多。\n\n如下项目结构：\n\n```shell\n./interface\n./components\n./user\n./admin\n./tsconfig.json\n```\n\n在上面，user和admin文件夹分别是业务用户端、业务管理端，interface是接口定义，components是通用组件。在以往，改动了任何文件，都需要整个项目重新编译。而在使用references之后，将4个文件夹中放入对应的tsconfig.json并各有配置，在根tsconfig中指定好references的path后，tsc利用缓存机制，会只打包改动过的文件夹。\n<!--hexo-->\n\n# compilerOptions\n\n编译器配置项太多了，按作用拆分成几个评论来说。\n<!--hexo-->\n\n# compilerOptions - Type Checking\n\n和类型检查有关的配置项。\n\n## strict\n\nstrict是一个严格模式的快捷开关，开启后会默认打开strictNullChecks、noImplicitAny等选项。并且随着typescript的升级，它可能会默认开启新增特性，列出截至5.2默认开启的选项：\n\n[alwaysStrict](https://www.typescriptlang.org/tsconfig#alwaysStrict)\n[strictNullChecks](https://www.typescriptlang.org/tsconfig#strictNullChecks)\n[strictBindCallApply](https://www.typescriptlang.org/tsconfig#strictBindCallApply)\n[strictFunctionTypes](https://www.typescriptlang.org/tsconfig#strictFunctionTypes)\n[strictPropertyInitialization](https://www.typescriptlang.org/tsconfig#strictPropertyInitialization)\n[noImplicitAny](https://www.typescriptlang.org/tsconfig#noImplicitAny)\n[noImplicitThis](https://www.typescriptlang.org/tsconfig#noImplicitThis)\n[useUnknownInCatchVariables](https://www.typescriptlang.org/tsconfig#useUnknownInCatchVariables)\n\n## alwaysStrict\n\n对所有文件启用javascript strict模式。注意，这和typescript strict不是同一个东西。参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode\n\n## allowUnreachableCode\n\n对未使用的代码的处理策略，可设置警告(默认)、错误、忽略。\n\n## allowUnusedLabels\n\n对未使用的Label的处理策略，可设置警告(默认)、错误、忽略。\n\n## exactOptionalPropertyTypes\n\n对可选项设置为undefined的策略。\n\n举例：\n```typescript\ninterface User {\n    sex?: 1 | 0;\n}\n\nconst man: User = {};\nman.sex = 1;\nman.sex = 0;\nman.sex = undefined;\n```\n\n`User.sex`是一个可选项，它的预期值是`0|1|undefined`。但是呢，`sex`可选想表达的意思是未被定义，而不是值真的是undefined。那么开启本选项后，`man.sex = undefined`这个赋值语句会给一个报错。\n\n## noImplicitAny\n\n对推导类型为any的策略。\n\n```typescript\nfunction fn(s) {\n  console.log(s.subtr(3));\n}\n```\n\n入参`s`推导为`any`，在选项开启情况下会报错。\n\n## noImplicitReturns\n\n对函数每个分支必须有return语句的策略。\n\n```typescript\nfunction fn(s: string) {\n    if (s) {\n        return s.substring(3);\n    } else {\n        'nothing';\n    }\n}\n```\n\n开启后，ts报错认为`fn`函数的最后没有return语句。\n\n## noPropertyAccessFromIndexSignature\n\n对访问未定义的对象属性的策略。\n\n```typescript\ninterface User {\n    name?: string;\n    [key: string]: string;\n}\nconst a: User = {};\nconsole.log(a.name, a['name'], a.sex, a['sex']);\n```\n\n访问对象属性有`.`和`[index]`两个方式，访问未定义的属性，开启本选项后，在`a.sex`处会抛出一个错误。\n\n## noUncheckedIndexedAccess\n\n未定义的对象属性值类型，给追加上`undefined`类型。\n\n```typescript\ninterface User {\n    name: string;\n    [propName: string]: string;\n}\n\ndeclare const admin: User;\n\n// (property) User.name: string\nconsole.log(admin.name);\n// (index) User[string]: string\nconsole.log(admin.birthday);\n```\n\n上例中，birthday的值类型是`string`，开启本项后，类型追加上`undefined`。\n\n```typescript\n// (index) User[string]: string | undefined\nconsole.log(admin.birthday);\n```\n\n## noUnusedLocals\n\n局部变量未使用，抛出错误。\n\n```typescript\nfunction test() {\n  const defaultModelID = 23;\n// 'defaultModelID' is declared but its value is never read.\n}\n```\n\n## noUnusedParameters\n\n入参未使用，抛出错误。\n\n```typescript\nconst createDefaultKeyboard = (modelID: number) => {\n// 'modelID' is declared but its value is never read.\n  const defaultModelID = 23;\n  return { type: \"keyboard\", modelID: defaultModelID };\n};\n```\n\n## strictBindCallApply\n\n在使用函数的call、bind、apply时，是否要检查传入参数的类型。\n\n```typescript\nfunction fn(x: string) {\n    return x;\n}\nconst n1 = fn.call(undefined, '10');\nconst n2 = fn.call(undefined, false);\n```\n\n如上代码中，第二个call中的入参false和string类型不匹配而报错。\n\n## strictFunctionTypes\n\n更精确的检查函数入参类型。\n\n```typescript\ntype GetUser = (id: string | number) => any;\nfunction test(x: string) {\n    return x;\n}\nconst getUser: GetUser = test;\n```\n\n如上代码中，GetUser的入参类型`string | number`不能精确的分配给test的入参类型`string`。\n\n## strictNullChecks\n\n是否校验`null`, `undefined`的属性访问？\n\n在以往的纯js项目中，容易忽略变量为undefined后仍然访问其属性的场景，比如在如下代码中，忽略了`a`为`undefined`的情况，导致运行时引发异常。\n\n```javascript\nconst a = arr1.find();\nconsole.log(a.name)\n```\n\n本选项开启后，在静态检查时就提示开发者，变量可能是`null`, `undefined`，不能访问到`name`属性。\n\n## useUnknownInCatchVariables\n\n有时候我们并不知道catch的err类型是什么，它的类型由try里的实际运行分支决定，而如果当成any处理，那么访问它的属性是危险的。当开启本项后，err的类型是unknown，必须先限定其类型再安全的访问其属性，如：\n\n```typescript\ntry {\n  // ...\n} catch (err) {\n  if (err instanceof Error) {\n    console.log(err.message);\n  }\n}\n```\n\n<!--hexo-->\n\n# compilerOptions - Modules\n\n模块的处理策略。\n\n## allowArbitraryExtensions\n\nts默认支持了ts、js、cjs、jsx等模块的解析描述，通过`global.d.ts`的定义扩展，还可以支持css、jpg等模块的解析描述（你要自己保证webpack loader之类的解析器去真实支持加载这些模块）。而有时候，需要对特定模块文件（不管是否已全局定义过该模块的描述）做特别的描述，就可以开启该选项，并且创建一个`{file basename}.d.{extension}.ts`文件。\n\n如：\n\n```typescript\n// test.ts\n\n// 报错：Cannot find module './a.jpk' or its corresponding type declarations.ts(2307)\nimport a from './a.jpk';\n// doTest类型是any\nconsole.log(a.doTest());\n```\n\n开启该项，并增加`a.d.jpk.ts`文件：\n\n```typescript\n// a.d.jpk.ts\ndeclare const jpk: {\n    doTest: () => void;\n};\nexport default jpk;\n\n// test.ts\nimport a from './a.jpk';\n// doTest的类型：(property) doTest: () => void\nconsole.log(a.doTest());\n```\n\n## allowImportingTsExtensions\n\n是否允许在import path带入ts、tsx等后缀名。\n\nts项目需要编译成js代码后执行，如果我们使用ts-node来执行项目，可以启用`noEmit`来禁止这个编译行为，并且在项目源码中直接引入`.ts`来引入正确的、完整的路径。\n\n举例：\n\n```typescript\nimport { wait } from '@/utils/utils.ts';\n```\n\n## allowUmdGlobalAccess\n\n// TODO\n和umd的声明有关系，不过我还不明确它的意义。见：https://github.com/microsoft/TypeScript/pull/30776。\n\n## baseUrl\n\n为解析无路径修饰的模块，设置一个基础路径。 什么叫做无路径修饰？就是该模块不是一个绝对或相对路径，如`import a from '@/hello/world'`。\n\n如果配置了该项，那么ts从该项指定的目录中开始查找模块，优先级也高于`node_modules`。\n\n## module\n\n模块打包的策略，也就是指编译后的模块加载代码是require、import之类的语法。推荐大家阅读：[模块理论](https://www.typescriptlang.org/docs/handbook/modules/theory.html)。\n\n这个话题有点繁琐，也涉及到javascript的模块化amd、umd之类的历史，对于2023年这个时间点来说，关注下CommonJS、ESM即可，ESM还细分为ES2015、ES20XX等版本，他们的模块打包策略是一样的，区别是更高版本的ESM还支持了`dynamic imports`、`import.meta`和`top level await`之类的东西。\n\n补充的是，nodejs的模块打包策略也早就支持esm了，具体参照package.json的设置：https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext\n\n## moduleResolution\n\n加载模块的策略，也就是指用什么策略去解析`import xxx from 'pathA'`这里的`pathA`。**注意区分和module的关系，module指的是项目的模块化是如何打包的，而moduleResolution指的是项目如何加载模块的**。截至2023支持如下策略：\n\n* node16/nodenext，对于Node12+版本，本策略可自由根据import/require选择合适的算法去加载模块。\n* node10，对于Node12之前的版本，本策略只支持require算法加载模块。**基本不用关心了**\n* bundler，和node16一样，但不要求模块有后缀名。\n* classic，早期的策略，不用管了。\n\n**这东西还要和module搭配使用，并且！并且！和package.json还有扯不清的关系。强烈建议阅读上文提到的[模块理论](https://www.typescriptlang.org/docs/handbook/modules/theory.html)**\n\n另外，由于自己对这块的理解也不足深，还参考了这篇文章：https://zhuanlan.zhihu.com/p/621795173。\n\n## moduleSuffixes\n\n模块搜索时的文件扩展名补充，比如以下配置项：\n\n```json\n{\n  \"compilerOptions\": {\n    \"moduleSuffixes\": [\".ios\", \".native\", \"\"]\n  }\n}\n```\n\n```typescript\nimport * as foo from \"./foo\";\n```\nTypeScript 会按顺序寻找`./foo.ios.ts`、`./foo.native.ts`、`./foo.ts`。\n\n## paths\n\n在加载模块路径时，加入一个别名匹配。可以理解为webpack的alias。\n\n## resolveJsonModule\n\n允许加载json模块（文件）。\n\n## resolvePackageJsonExports\n\n引用`node_modules`包时，强制遵循包package.json的exports字段的定义。还是那句话，阅读下模块理论那篇文章，不然很难理解前面这句话的信息量。\n\n## resolvePackageJsonImports\n\n强制typescript使用package.json中imports字段的定义去加载`#`符号开头的模块路径。例：\n\n```typescript\n// package.json\n\"imports\": {\n   \"#test/*\": \"./src/test/*\"\n}\n```\n\n```typescript\n// src/test/1.ts\nexport const a = 123;\n```\n\n```typescript\n// src/b.ts\nimport { a } from '#test/1';\nconsole.log('==a', a);\n```\n\n## rootDir\n\n指定项目的根目录，默认值可以理解为所有ts文件目录的最大集。例如：\n\n```shell\nMyProj\n├── tsconfig.json\n├── core\n│   ├── a.ts\n│   ├── b.ts\n│   ├── sub\n│   │   ├── c.ts\n├── types.d.ts\n```\n\n如上的项目，rootDir的推断值是\"core\"。但是你可以手工指定为`tsconfig.json`的相对目录\"，比如.\"。\n\n另外，如果设置了`composite`，`rootDir`的默认值就是`tsconfig.json`文件的目录。\n\n## rootDirs\n\n这个属性有点拽，它可以将多个目录虚拟成一个目录。这样在`import`的时候，就当成同一个目录就行啦。\n\n## typeRoots\n\n类型定义文件的目录，默认所有@types目录都会被包含，包括node_modules下的@types目录。\n如果指定了typeRoots，那么@types目录的相关规则会被忽略。\n\n ## types\n\n类型定义文件的具体目录，规则和`typeRoots`一样，不同点是`types`只指定具体目录，而非`*`这种匹配型目录。\n\n<!--hexo-->\n\n# compilerOptions - Emit\n\n编译策略。\n\n## outDir\n\n编译文件放置的目录，默认和源码放同一个目录。\n\n## noEmit\n\n不要编译ts。\n\n项目中一般使用babel去编译，typescript仅用来做静态检查，所以设置noEmit就可以不生成js、sourcemap、declaration文件了。\n\n## noEmitOnError\n\n顾名思义，在检查到错误的时候，不要继续编译了。\n\n## declaration / emitDeclarationOnly / declarationDir\n\n生成类型描述文件。\n\n这个是typescript最重要的几个特性之一了，为`.ts`文件生成类型定义文件`.d.ts`。如果不想同时生成`.js`文件，则使用`emitDeclarationOnly`。\n\n同时，可以使用`declarationDir`指定类型定义文件的生成目录。\n\n## declarationMap\n\n给`.d.ts`文件增加一个map标识到`.ts`源文件，类似sourceMap。\n\n## sourceMap / inlineSourceMap / inlineSources / mapRoot / sourceRoot\n\ntypescript也是支持souce map的，这里就不解释sourcemap是什么了。它的相关配置项有：\n\nsourceMap，生成sourcemap文件。\ninlineSourceMap，不生成sourcemap文件，而是直接把source内容写在.js文件中。\ninlineSources，同inlineSourceMap。\nmapRoot，指定sourceMap文件的路径，比如部署到网络中，可以指定为\"[http://xxxx.com\"。](http://xxxx.com\"./)\nsourceRoot，指定source文件的路径，同mapRoot。\n\n## downlevelIteration\n\n对迭代器的降级解析。\n\n在es6中增加了for/of，spread等迭代特性，typescript在编译成es5的时候，要使用何种语法。文档中有个字符遍历的例子说明开启与否的迭代影响，这对业务计算结果是有影响的。\n\n不过项目中使用了babel之类的编译器，就不用担心这些影响了。\n\n## importHelpers\n\n引入降级解析的包。\n\n将es6的某些特新编译成es5，如迭代器、异步语法等，会将模块中每个相应的代码都编译成降级代码，使得类似代码重复。如：\n\n```typescript\nvar __read = (this && this.__read) || function (o, n) {\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n    if (!m) return o;\n    var i = m.call(o), r, ar = [], e;\n    try {\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n    }\n    catch (error) { e = { error: error }; }\n    finally {\n        try {\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\n        }\n        finally { if (e) throw e.error; }\n    }\n    return ar;\n};\nvar __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n            ar[i] = from[i];\n        }\n    }\n    return to.concat(ar || Array.prototype.slice.call(from));\n};\nexport function fn(arr) {\n    var arr2 = __spreadArray([1], __read(arr), false);\n}\n```\n\n如果同时开启了`downlevelIteration`和`importHelpers`，并且安装了`tslib`包，那么代码会编译成类似这样：\n\n```typescript\nimport { __read, __spreadArray } from \"tslib\";\nexport function fn(arr) {\n    var arr2 = __spreadArray([1], __read(arr), false);\n}\n ```\n\n## noEmitHelpers\n\ntypescript处理迭代器、异步等的降级策略是生成一堆降级代码，也可以使用\"importHelpers\"和\"tslib\"来提取公共代码。但通过这个配置，可以自定义降级代码了。具体参照文档。\n\n## preserveConstEnums\n\n是否在编辑结果中移除`const enum`的定义。因为javascript没有enum概念，typescript会将enum的引用编译成具体的值。如：\n\n```typescript\nconst enum Album {\n  JimmyEatWorldFutures = 1,\n  TubRingZooHypothesis = 2,\n  DogFashionDiscoAdultery = 3,\n}\n \nconst selectedAlbum = Album.JimmyEatWorldFutures;\nif (selectedAlbum === Album.JimmyEatWorldFutures) {\n  console.log(\"That is a great choice.\");\n}\n```\n\n编译结果如下：\n\n```javascript\n\"use strict\";\nconst selectedAlbum = 1 /* Album.JimmyEatWorldFutures */;\nif (selectedAlbum === 1 /* Album.JimmyEatWorldFutures */) {\n    console.log(\"That is a great choice.\");\n}\n```\n\n如果开启此项，则编译结果中会描述出该enum的结构。如下：\n\n```javascript\n\"use strict\";\nvar Album;\n(function (Album) {\n    Album[Album[\"JimmyEatWorldFutures\"] = 1] = \"JimmyEatWorldFutures\";\n    Album[Album[\"TubRingZooHypothesis\"] = 2] = \"TubRingZooHypothesis\";\n    Album[Album[\"DogFashionDiscoAdultery\"] = 3] = \"DogFashionDiscoAdultery\";\n})(Album || (Album = {}));\nconst selectedAlbum = 1 /* Album.JimmyEatWorldFutures */;\nif (selectedAlbum === 1 /* Album.JimmyEatWorldFutures */) {\n    console.log(\"That is a great choice.\");\n}\n\n```\n\n## preserveValueImports\n\n通常，打包器会将未使用的\"import\"移除掉，但开启了该特性后，会在编译中保留未使用的\"import\"。例如：\n\n```typescript\nimport { Animal } from \"./animal.js\";\neval(\"console.log(new Animal().isDangerous())\");\n```\n\n## removeComments\n\n移除代码中的注释。\n\n\n<!--hexo-->\n\n# compilerOptions - JavaScript Support\n\n对javascript文件的支持\n\n## allowJs\n\n允许`.ts`文件引用`.js`文件，这常用在javascript项目升级为typescript的过程中。\n\n## checkJs\n\n是否开启对`.js`文件的错误检查。\n\n## maxNodeModuleJsDepth\n\n为`.js`文件寻找类型定义文件时，允许的最大依赖深度。\n\n正常情况下，我们会在`.js`文件的同级补写`.d.ts`文件，tsc会很快找到类型定义。但有时候确实要扩大搜索范围去找部分`.js`文件的类型定义文件。\n\n<!--hexo-->\n\n# compilerOptions - Interop Constraints\n\n(模块)互相操作的约束\n\n## allowSyntheticDefaultImports\n\n允许合成`default`。\n\n如果一个模块A没有`export default`，那么另一个模块B在`import defaultA from './a'`的时候，会抛出错误说A中没有default。\n\n有一个做法是`import * as defaultA from './a'`曲线救国，但开启这个配置项后，可以直接使用`import defaultA from './a'`这样的语法了。\n\n## esModuleInterop\n\nesm在使用`import default from 'xxx'`方式导入cjs的时候会抛出一个错误，因为cjs模块中没有default。开启此选项后，typescript会使用一些helpers去兼容cjs的default问题。\n\n## forceConsistentCasingInFileNames\n\n强制引用的模块文件名，和磁盘中的文件名保持一致的大小写。\n\n<!--hexo-->\n\n# compilerOptions - Language and Environment\n\n和语言、环境有关的配置项。\n\n## jsx\n\n如何解析`.tsx`文件中jsx语法？在2023年，react17+后，用`react-jsx`就行了。\n\n## lib\n\n在项目中使用的api类型定义集合。\n\nts是需要知道你用的每一个javascript方法、属性的定义的，所以它内置了一批定义（比如Math.abs方法）。但是呢，后面新增方法的定义，需要你手工指定包含，ts才能理解了，比如Array.include方法，你就要包含ES2016。但好在你不需要记住这些，因为当你指定`target`字段时，lib会被默认设置成对应的值的。\n\n另外，大部分情况下，我们要访问一些和特定环境有关的特性，比如浏览器里的Dom特性，那么这儿额外引入`DOM`定义就行了。\n\n## target\n\n项目编译的目标javascript版本。\n\n也就是你的目标客户端支持的最低javascript版本。注意它会影响默认的`lib`配置项。\n\n\n<!--hexo-->\n\n# compilerOptions - Compiler Diagnostics\n\n编译诊断配置项。\n\n## diagnostics / extendedDiagnostics\n\n打印出编译的信息，比如多少文件、编译时间等。\n\nextendedDiagnostics包含了diagnostics给出的所有信息，所以用extendedDiagnostics就行了。这是一个开启extendedDiagnostics的编译信息：\n\n```bash\nFiles:                         143\nLines of Library:            38663\nLines of Definitions:        82578\nSymbols:                     73362\nTypes:                        1495\nParse time:                  0.50s\nResolveModule time:          0.03s\nTotal time:                  1.01s\n```\n\n## explainFiles\n\n打印出文件被编译的原因，也就是它们的引用链。\n\n## listEmittedFiles / listFiles\n\n列出参与编译的文件。\n\n## traceResolution\n\n打印每一个文件的编译流程。\n\n\n<!--hexo-->\n\n# compilerOptions - Completeness\n\n完整性检测的配置项\n\n## skipLibCheck\n\n跳过lib库的类型检测。\n\n\n\n","source":"_posts/tsconfig-json.md","raw":"---\ntitle: \"关于tsconfig.json，最后更新2023/11月...\"\ndate: \"2023-09-05T02:51:45Z\"\ncategories:\n  - [TypeScript]\n\nurl: tsconfig-json\ntags:\n  - typescript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/23](https://github.com/taoliujun/blog/issues/23)\n\n<!--hexo\n---\nurl: tsconfig-json\ntags:\n  - typescript\n---\n-->\n\n**截至TypeScript 5.2**，`tsconfig.json`的配置项已经有百十个之多，它的某些选项甚至影响了项目的执行结果，所以尽量多的了解它们能让程序员更深的了解ts，写出优美语句让CTO赞赏，甚至避免写出bug。\n\n本issue的内容，只是个人在工作经验的影响下，对官方文档的内容理解。且内容有所欠缺，基本只记录了我工作涉及到的配置项，比如不怎么使用class，对class的配置项就略过了。\n\n官方文档：https://www.typescriptlang.org/tsconfig\n\n****\n\n<!--hexo-->\n\n# Top Level\n\n一些根配置项。\n\n## extends\n\n继承另一个配置文件，推荐的一些官方的配置文件来继承使用：https://github.com/tsconfig/bases/tree/main/bases\n\n## files, include, exclude\n\n这几项指定了在项目里，被ts作用的文件集合。配置本身没什么好说的，记录下它们之间的关系。\n\n- 如果files指定了，那么include的默认值是`[]`，否则include的默认值是`**/*`；\n- exclude用于排除include已指定的文件集合，但这些文件仍然是可以在项目里被引用的；\n- exclude默认排除了`node_modules`、`outDir`；\n\n## references\n\n用于项目文件夹分别打包，并且其中有缓存机制的参与，所以编译速度会快很多。\n\n如下项目结构：\n\n```shell\n./interface\n./components\n./user\n./admin\n./tsconfig.json\n```\n\n在上面，user和admin文件夹分别是业务用户端、业务管理端，interface是接口定义，components是通用组件。在以往，改动了任何文件，都需要整个项目重新编译。而在使用references之后，将4个文件夹中放入对应的tsconfig.json并各有配置，在根tsconfig中指定好references的path后，tsc利用缓存机制，会只打包改动过的文件夹。\n<!--hexo-->\n\n# compilerOptions\n\n编译器配置项太多了，按作用拆分成几个评论来说。\n<!--hexo-->\n\n# compilerOptions - Type Checking\n\n和类型检查有关的配置项。\n\n## strict\n\nstrict是一个严格模式的快捷开关，开启后会默认打开strictNullChecks、noImplicitAny等选项。并且随着typescript的升级，它可能会默认开启新增特性，列出截至5.2默认开启的选项：\n\n[alwaysStrict](https://www.typescriptlang.org/tsconfig#alwaysStrict)\n[strictNullChecks](https://www.typescriptlang.org/tsconfig#strictNullChecks)\n[strictBindCallApply](https://www.typescriptlang.org/tsconfig#strictBindCallApply)\n[strictFunctionTypes](https://www.typescriptlang.org/tsconfig#strictFunctionTypes)\n[strictPropertyInitialization](https://www.typescriptlang.org/tsconfig#strictPropertyInitialization)\n[noImplicitAny](https://www.typescriptlang.org/tsconfig#noImplicitAny)\n[noImplicitThis](https://www.typescriptlang.org/tsconfig#noImplicitThis)\n[useUnknownInCatchVariables](https://www.typescriptlang.org/tsconfig#useUnknownInCatchVariables)\n\n## alwaysStrict\n\n对所有文件启用javascript strict模式。注意，这和typescript strict不是同一个东西。参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode\n\n## allowUnreachableCode\n\n对未使用的代码的处理策略，可设置警告(默认)、错误、忽略。\n\n## allowUnusedLabels\n\n对未使用的Label的处理策略，可设置警告(默认)、错误、忽略。\n\n## exactOptionalPropertyTypes\n\n对可选项设置为undefined的策略。\n\n举例：\n```typescript\ninterface User {\n    sex?: 1 | 0;\n}\n\nconst man: User = {};\nman.sex = 1;\nman.sex = 0;\nman.sex = undefined;\n```\n\n`User.sex`是一个可选项，它的预期值是`0|1|undefined`。但是呢，`sex`可选想表达的意思是未被定义，而不是值真的是undefined。那么开启本选项后，`man.sex = undefined`这个赋值语句会给一个报错。\n\n## noImplicitAny\n\n对推导类型为any的策略。\n\n```typescript\nfunction fn(s) {\n  console.log(s.subtr(3));\n}\n```\n\n入参`s`推导为`any`，在选项开启情况下会报错。\n\n## noImplicitReturns\n\n对函数每个分支必须有return语句的策略。\n\n```typescript\nfunction fn(s: string) {\n    if (s) {\n        return s.substring(3);\n    } else {\n        'nothing';\n    }\n}\n```\n\n开启后，ts报错认为`fn`函数的最后没有return语句。\n\n## noPropertyAccessFromIndexSignature\n\n对访问未定义的对象属性的策略。\n\n```typescript\ninterface User {\n    name?: string;\n    [key: string]: string;\n}\nconst a: User = {};\nconsole.log(a.name, a['name'], a.sex, a['sex']);\n```\n\n访问对象属性有`.`和`[index]`两个方式，访问未定义的属性，开启本选项后，在`a.sex`处会抛出一个错误。\n\n## noUncheckedIndexedAccess\n\n未定义的对象属性值类型，给追加上`undefined`类型。\n\n```typescript\ninterface User {\n    name: string;\n    [propName: string]: string;\n}\n\ndeclare const admin: User;\n\n// (property) User.name: string\nconsole.log(admin.name);\n// (index) User[string]: string\nconsole.log(admin.birthday);\n```\n\n上例中，birthday的值类型是`string`，开启本项后，类型追加上`undefined`。\n\n```typescript\n// (index) User[string]: string | undefined\nconsole.log(admin.birthday);\n```\n\n## noUnusedLocals\n\n局部变量未使用，抛出错误。\n\n```typescript\nfunction test() {\n  const defaultModelID = 23;\n// 'defaultModelID' is declared but its value is never read.\n}\n```\n\n## noUnusedParameters\n\n入参未使用，抛出错误。\n\n```typescript\nconst createDefaultKeyboard = (modelID: number) => {\n// 'modelID' is declared but its value is never read.\n  const defaultModelID = 23;\n  return { type: \"keyboard\", modelID: defaultModelID };\n};\n```\n\n## strictBindCallApply\n\n在使用函数的call、bind、apply时，是否要检查传入参数的类型。\n\n```typescript\nfunction fn(x: string) {\n    return x;\n}\nconst n1 = fn.call(undefined, '10');\nconst n2 = fn.call(undefined, false);\n```\n\n如上代码中，第二个call中的入参false和string类型不匹配而报错。\n\n## strictFunctionTypes\n\n更精确的检查函数入参类型。\n\n```typescript\ntype GetUser = (id: string | number) => any;\nfunction test(x: string) {\n    return x;\n}\nconst getUser: GetUser = test;\n```\n\n如上代码中，GetUser的入参类型`string | number`不能精确的分配给test的入参类型`string`。\n\n## strictNullChecks\n\n是否校验`null`, `undefined`的属性访问？\n\n在以往的纯js项目中，容易忽略变量为undefined后仍然访问其属性的场景，比如在如下代码中，忽略了`a`为`undefined`的情况，导致运行时引发异常。\n\n```javascript\nconst a = arr1.find();\nconsole.log(a.name)\n```\n\n本选项开启后，在静态检查时就提示开发者，变量可能是`null`, `undefined`，不能访问到`name`属性。\n\n## useUnknownInCatchVariables\n\n有时候我们并不知道catch的err类型是什么，它的类型由try里的实际运行分支决定，而如果当成any处理，那么访问它的属性是危险的。当开启本项后，err的类型是unknown，必须先限定其类型再安全的访问其属性，如：\n\n```typescript\ntry {\n  // ...\n} catch (err) {\n  if (err instanceof Error) {\n    console.log(err.message);\n  }\n}\n```\n\n<!--hexo-->\n\n# compilerOptions - Modules\n\n模块的处理策略。\n\n## allowArbitraryExtensions\n\nts默认支持了ts、js、cjs、jsx等模块的解析描述，通过`global.d.ts`的定义扩展，还可以支持css、jpg等模块的解析描述（你要自己保证webpack loader之类的解析器去真实支持加载这些模块）。而有时候，需要对特定模块文件（不管是否已全局定义过该模块的描述）做特别的描述，就可以开启该选项，并且创建一个`{file basename}.d.{extension}.ts`文件。\n\n如：\n\n```typescript\n// test.ts\n\n// 报错：Cannot find module './a.jpk' or its corresponding type declarations.ts(2307)\nimport a from './a.jpk';\n// doTest类型是any\nconsole.log(a.doTest());\n```\n\n开启该项，并增加`a.d.jpk.ts`文件：\n\n```typescript\n// a.d.jpk.ts\ndeclare const jpk: {\n    doTest: () => void;\n};\nexport default jpk;\n\n// test.ts\nimport a from './a.jpk';\n// doTest的类型：(property) doTest: () => void\nconsole.log(a.doTest());\n```\n\n## allowImportingTsExtensions\n\n是否允许在import path带入ts、tsx等后缀名。\n\nts项目需要编译成js代码后执行，如果我们使用ts-node来执行项目，可以启用`noEmit`来禁止这个编译行为，并且在项目源码中直接引入`.ts`来引入正确的、完整的路径。\n\n举例：\n\n```typescript\nimport { wait } from '@/utils/utils.ts';\n```\n\n## allowUmdGlobalAccess\n\n// TODO\n和umd的声明有关系，不过我还不明确它的意义。见：https://github.com/microsoft/TypeScript/pull/30776。\n\n## baseUrl\n\n为解析无路径修饰的模块，设置一个基础路径。 什么叫做无路径修饰？就是该模块不是一个绝对或相对路径，如`import a from '@/hello/world'`。\n\n如果配置了该项，那么ts从该项指定的目录中开始查找模块，优先级也高于`node_modules`。\n\n## module\n\n模块打包的策略，也就是指编译后的模块加载代码是require、import之类的语法。推荐大家阅读：[模块理论](https://www.typescriptlang.org/docs/handbook/modules/theory.html)。\n\n这个话题有点繁琐，也涉及到javascript的模块化amd、umd之类的历史，对于2023年这个时间点来说，关注下CommonJS、ESM即可，ESM还细分为ES2015、ES20XX等版本，他们的模块打包策略是一样的，区别是更高版本的ESM还支持了`dynamic imports`、`import.meta`和`top level await`之类的东西。\n\n补充的是，nodejs的模块打包策略也早就支持esm了，具体参照package.json的设置：https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext\n\n## moduleResolution\n\n加载模块的策略，也就是指用什么策略去解析`import xxx from 'pathA'`这里的`pathA`。**注意区分和module的关系，module指的是项目的模块化是如何打包的，而moduleResolution指的是项目如何加载模块的**。截至2023支持如下策略：\n\n* node16/nodenext，对于Node12+版本，本策略可自由根据import/require选择合适的算法去加载模块。\n* node10，对于Node12之前的版本，本策略只支持require算法加载模块。**基本不用关心了**\n* bundler，和node16一样，但不要求模块有后缀名。\n* classic，早期的策略，不用管了。\n\n**这东西还要和module搭配使用，并且！并且！和package.json还有扯不清的关系。强烈建议阅读上文提到的[模块理论](https://www.typescriptlang.org/docs/handbook/modules/theory.html)**\n\n另外，由于自己对这块的理解也不足深，还参考了这篇文章：https://zhuanlan.zhihu.com/p/621795173。\n\n## moduleSuffixes\n\n模块搜索时的文件扩展名补充，比如以下配置项：\n\n```json\n{\n  \"compilerOptions\": {\n    \"moduleSuffixes\": [\".ios\", \".native\", \"\"]\n  }\n}\n```\n\n```typescript\nimport * as foo from \"./foo\";\n```\nTypeScript 会按顺序寻找`./foo.ios.ts`、`./foo.native.ts`、`./foo.ts`。\n\n## paths\n\n在加载模块路径时，加入一个别名匹配。可以理解为webpack的alias。\n\n## resolveJsonModule\n\n允许加载json模块（文件）。\n\n## resolvePackageJsonExports\n\n引用`node_modules`包时，强制遵循包package.json的exports字段的定义。还是那句话，阅读下模块理论那篇文章，不然很难理解前面这句话的信息量。\n\n## resolvePackageJsonImports\n\n强制typescript使用package.json中imports字段的定义去加载`#`符号开头的模块路径。例：\n\n```typescript\n// package.json\n\"imports\": {\n   \"#test/*\": \"./src/test/*\"\n}\n```\n\n```typescript\n// src/test/1.ts\nexport const a = 123;\n```\n\n```typescript\n// src/b.ts\nimport { a } from '#test/1';\nconsole.log('==a', a);\n```\n\n## rootDir\n\n指定项目的根目录，默认值可以理解为所有ts文件目录的最大集。例如：\n\n```shell\nMyProj\n├── tsconfig.json\n├── core\n│   ├── a.ts\n│   ├── b.ts\n│   ├── sub\n│   │   ├── c.ts\n├── types.d.ts\n```\n\n如上的项目，rootDir的推断值是\"core\"。但是你可以手工指定为`tsconfig.json`的相对目录\"，比如.\"。\n\n另外，如果设置了`composite`，`rootDir`的默认值就是`tsconfig.json`文件的目录。\n\n## rootDirs\n\n这个属性有点拽，它可以将多个目录虚拟成一个目录。这样在`import`的时候，就当成同一个目录就行啦。\n\n## typeRoots\n\n类型定义文件的目录，默认所有@types目录都会被包含，包括node_modules下的@types目录。\n如果指定了typeRoots，那么@types目录的相关规则会被忽略。\n\n ## types\n\n类型定义文件的具体目录，规则和`typeRoots`一样，不同点是`types`只指定具体目录，而非`*`这种匹配型目录。\n\n<!--hexo-->\n\n# compilerOptions - Emit\n\n编译策略。\n\n## outDir\n\n编译文件放置的目录，默认和源码放同一个目录。\n\n## noEmit\n\n不要编译ts。\n\n项目中一般使用babel去编译，typescript仅用来做静态检查，所以设置noEmit就可以不生成js、sourcemap、declaration文件了。\n\n## noEmitOnError\n\n顾名思义，在检查到错误的时候，不要继续编译了。\n\n## declaration / emitDeclarationOnly / declarationDir\n\n生成类型描述文件。\n\n这个是typescript最重要的几个特性之一了，为`.ts`文件生成类型定义文件`.d.ts`。如果不想同时生成`.js`文件，则使用`emitDeclarationOnly`。\n\n同时，可以使用`declarationDir`指定类型定义文件的生成目录。\n\n## declarationMap\n\n给`.d.ts`文件增加一个map标识到`.ts`源文件，类似sourceMap。\n\n## sourceMap / inlineSourceMap / inlineSources / mapRoot / sourceRoot\n\ntypescript也是支持souce map的，这里就不解释sourcemap是什么了。它的相关配置项有：\n\nsourceMap，生成sourcemap文件。\ninlineSourceMap，不生成sourcemap文件，而是直接把source内容写在.js文件中。\ninlineSources，同inlineSourceMap。\nmapRoot，指定sourceMap文件的路径，比如部署到网络中，可以指定为\"[http://xxxx.com\"。](http://xxxx.com\"./)\nsourceRoot，指定source文件的路径，同mapRoot。\n\n## downlevelIteration\n\n对迭代器的降级解析。\n\n在es6中增加了for/of，spread等迭代特性，typescript在编译成es5的时候，要使用何种语法。文档中有个字符遍历的例子说明开启与否的迭代影响，这对业务计算结果是有影响的。\n\n不过项目中使用了babel之类的编译器，就不用担心这些影响了。\n\n## importHelpers\n\n引入降级解析的包。\n\n将es6的某些特新编译成es5，如迭代器、异步语法等，会将模块中每个相应的代码都编译成降级代码，使得类似代码重复。如：\n\n```typescript\nvar __read = (this && this.__read) || function (o, n) {\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n    if (!m) return o;\n    var i = m.call(o), r, ar = [], e;\n    try {\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n    }\n    catch (error) { e = { error: error }; }\n    finally {\n        try {\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\n        }\n        finally { if (e) throw e.error; }\n    }\n    return ar;\n};\nvar __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n            ar[i] = from[i];\n        }\n    }\n    return to.concat(ar || Array.prototype.slice.call(from));\n};\nexport function fn(arr) {\n    var arr2 = __spreadArray([1], __read(arr), false);\n}\n```\n\n如果同时开启了`downlevelIteration`和`importHelpers`，并且安装了`tslib`包，那么代码会编译成类似这样：\n\n```typescript\nimport { __read, __spreadArray } from \"tslib\";\nexport function fn(arr) {\n    var arr2 = __spreadArray([1], __read(arr), false);\n}\n ```\n\n## noEmitHelpers\n\ntypescript处理迭代器、异步等的降级策略是生成一堆降级代码，也可以使用\"importHelpers\"和\"tslib\"来提取公共代码。但通过这个配置，可以自定义降级代码了。具体参照文档。\n\n## preserveConstEnums\n\n是否在编辑结果中移除`const enum`的定义。因为javascript没有enum概念，typescript会将enum的引用编译成具体的值。如：\n\n```typescript\nconst enum Album {\n  JimmyEatWorldFutures = 1,\n  TubRingZooHypothesis = 2,\n  DogFashionDiscoAdultery = 3,\n}\n \nconst selectedAlbum = Album.JimmyEatWorldFutures;\nif (selectedAlbum === Album.JimmyEatWorldFutures) {\n  console.log(\"That is a great choice.\");\n}\n```\n\n编译结果如下：\n\n```javascript\n\"use strict\";\nconst selectedAlbum = 1 /* Album.JimmyEatWorldFutures */;\nif (selectedAlbum === 1 /* Album.JimmyEatWorldFutures */) {\n    console.log(\"That is a great choice.\");\n}\n```\n\n如果开启此项，则编译结果中会描述出该enum的结构。如下：\n\n```javascript\n\"use strict\";\nvar Album;\n(function (Album) {\n    Album[Album[\"JimmyEatWorldFutures\"] = 1] = \"JimmyEatWorldFutures\";\n    Album[Album[\"TubRingZooHypothesis\"] = 2] = \"TubRingZooHypothesis\";\n    Album[Album[\"DogFashionDiscoAdultery\"] = 3] = \"DogFashionDiscoAdultery\";\n})(Album || (Album = {}));\nconst selectedAlbum = 1 /* Album.JimmyEatWorldFutures */;\nif (selectedAlbum === 1 /* Album.JimmyEatWorldFutures */) {\n    console.log(\"That is a great choice.\");\n}\n\n```\n\n## preserveValueImports\n\n通常，打包器会将未使用的\"import\"移除掉，但开启了该特性后，会在编译中保留未使用的\"import\"。例如：\n\n```typescript\nimport { Animal } from \"./animal.js\";\neval(\"console.log(new Animal().isDangerous())\");\n```\n\n## removeComments\n\n移除代码中的注释。\n\n\n<!--hexo-->\n\n# compilerOptions - JavaScript Support\n\n对javascript文件的支持\n\n## allowJs\n\n允许`.ts`文件引用`.js`文件，这常用在javascript项目升级为typescript的过程中。\n\n## checkJs\n\n是否开启对`.js`文件的错误检查。\n\n## maxNodeModuleJsDepth\n\n为`.js`文件寻找类型定义文件时，允许的最大依赖深度。\n\n正常情况下，我们会在`.js`文件的同级补写`.d.ts`文件，tsc会很快找到类型定义。但有时候确实要扩大搜索范围去找部分`.js`文件的类型定义文件。\n\n<!--hexo-->\n\n# compilerOptions - Interop Constraints\n\n(模块)互相操作的约束\n\n## allowSyntheticDefaultImports\n\n允许合成`default`。\n\n如果一个模块A没有`export default`，那么另一个模块B在`import defaultA from './a'`的时候，会抛出错误说A中没有default。\n\n有一个做法是`import * as defaultA from './a'`曲线救国，但开启这个配置项后，可以直接使用`import defaultA from './a'`这样的语法了。\n\n## esModuleInterop\n\nesm在使用`import default from 'xxx'`方式导入cjs的时候会抛出一个错误，因为cjs模块中没有default。开启此选项后，typescript会使用一些helpers去兼容cjs的default问题。\n\n## forceConsistentCasingInFileNames\n\n强制引用的模块文件名，和磁盘中的文件名保持一致的大小写。\n\n<!--hexo-->\n\n# compilerOptions - Language and Environment\n\n和语言、环境有关的配置项。\n\n## jsx\n\n如何解析`.tsx`文件中jsx语法？在2023年，react17+后，用`react-jsx`就行了。\n\n## lib\n\n在项目中使用的api类型定义集合。\n\nts是需要知道你用的每一个javascript方法、属性的定义的，所以它内置了一批定义（比如Math.abs方法）。但是呢，后面新增方法的定义，需要你手工指定包含，ts才能理解了，比如Array.include方法，你就要包含ES2016。但好在你不需要记住这些，因为当你指定`target`字段时，lib会被默认设置成对应的值的。\n\n另外，大部分情况下，我们要访问一些和特定环境有关的特性，比如浏览器里的Dom特性，那么这儿额外引入`DOM`定义就行了。\n\n## target\n\n项目编译的目标javascript版本。\n\n也就是你的目标客户端支持的最低javascript版本。注意它会影响默认的`lib`配置项。\n\n\n<!--hexo-->\n\n# compilerOptions - Compiler Diagnostics\n\n编译诊断配置项。\n\n## diagnostics / extendedDiagnostics\n\n打印出编译的信息，比如多少文件、编译时间等。\n\nextendedDiagnostics包含了diagnostics给出的所有信息，所以用extendedDiagnostics就行了。这是一个开启extendedDiagnostics的编译信息：\n\n```bash\nFiles:                         143\nLines of Library:            38663\nLines of Definitions:        82578\nSymbols:                     73362\nTypes:                        1495\nParse time:                  0.50s\nResolveModule time:          0.03s\nTotal time:                  1.01s\n```\n\n## explainFiles\n\n打印出文件被编译的原因，也就是它们的引用链。\n\n## listEmittedFiles / listFiles\n\n列出参与编译的文件。\n\n## traceResolution\n\n打印每一个文件的编译流程。\n\n\n<!--hexo-->\n\n# compilerOptions - Completeness\n\n完整性检测的配置项\n\n## skipLibCheck\n\n跳过lib库的类型检测。\n\n\n\n","slug":"tsconfig-json","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvyc001rjaot9mbxbgnc","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/23\">https://github.com/taoliujun/blog/issues/23</a></p>\n<!--hexo\n---\nurl: tsconfig-json\ntags:\n  - typescript\n---\n-->\n\n<p><strong>截至TypeScript 5.2</strong>，<code>tsconfig.json</code>的配置项已经有百十个之多，它的某些选项甚至影响了项目的执行结果，所以尽量多的了解它们能让程序员更深的了解ts，写出优美语句让CTO赞赏，甚至避免写出bug。</p>\n<p>本issue的内容，只是个人在工作经验的影响下，对官方文档的内容理解。且内容有所欠缺，基本只记录了我工作涉及到的配置项，比如不怎么使用class，对class的配置项就略过了。</p>\n<p>官方文档：<a href=\"https://www.typescriptlang.org/tsconfig\">https://www.typescriptlang.org/tsconfig</a></p>\n<hr>\n<!--hexo-->\n\n<h1 id=\"Top-Level\"><a href=\"#Top-Level\" class=\"headerlink\" title=\"Top Level\"></a>Top Level</h1><p>一些根配置项。</p>\n<h2 id=\"extends\"><a href=\"#extends\" class=\"headerlink\" title=\"extends\"></a>extends</h2><p>继承另一个配置文件，推荐的一些官方的配置文件来继承使用：<a href=\"https://github.com/tsconfig/bases/tree/main/bases\">https://github.com/tsconfig/bases/tree/main/bases</a></p>\n<h2 id=\"files-include-exclude\"><a href=\"#files-include-exclude\" class=\"headerlink\" title=\"files, include, exclude\"></a>files, include, exclude</h2><p>这几项指定了在项目里，被ts作用的文件集合。配置本身没什么好说的，记录下它们之间的关系。</p>\n<ul>\n<li>如果files指定了，那么include的默认值是<code>[]</code>，否则include的默认值是<code>**/*</code>；</li>\n<li>exclude用于排除include已指定的文件集合，但这些文件仍然是可以在项目里被引用的；</li>\n<li>exclude默认排除了<code>node_modules</code>、<code>outDir</code>；</li>\n</ul>\n<h2 id=\"references\"><a href=\"#references\" class=\"headerlink\" title=\"references\"></a>references</h2><p>用于项目文件夹分别打包，并且其中有缓存机制的参与，所以编译速度会快很多。</p>\n<p>如下项目结构：</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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\">./interface</span><br><span class=\"line\">./components</span><br><span class=\"line\">./user</span><br><span class=\"line\">./admin</span><br><span class=\"line\">./tsconfig.json</span><br></pre></td></tr></table></figure>\n\n<p>在上面，user和admin文件夹分别是业务用户端、业务管理端，interface是接口定义，components是通用组件。在以往，改动了任何文件，都需要整个项目重新编译。而在使用references之后，将4个文件夹中放入对应的tsconfig.json并各有配置，在根tsconfig中指定好references的path后，tsc利用缓存机制，会只打包改动过的文件夹。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions\"><a href=\"#compilerOptions\" class=\"headerlink\" title=\"compilerOptions\"></a>compilerOptions</h1><p>编译器配置项太多了，按作用拆分成几个评论来说。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Type-Checking\"><a href=\"#compilerOptions-Type-Checking\" class=\"headerlink\" title=\"compilerOptions - Type Checking\"></a>compilerOptions - Type Checking</h1><p>和类型检查有关的配置项。</p>\n<h2 id=\"strict\"><a href=\"#strict\" class=\"headerlink\" title=\"strict\"></a>strict</h2><p>strict是一个严格模式的快捷开关，开启后会默认打开strictNullChecks、noImplicitAny等选项。并且随着typescript的升级，它可能会默认开启新增特性，列出截至5.2默认开启的选项：</p>\n<p><a href=\"https://www.typescriptlang.org/tsconfig#alwaysStrict\">alwaysStrict</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictNullChecks\">strictNullChecks</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictBindCallApply\">strictBindCallApply</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictFunctionTypes\">strictFunctionTypes</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictPropertyInitialization\">strictPropertyInitialization</a><br><a href=\"https://www.typescriptlang.org/tsconfig#noImplicitAny\">noImplicitAny</a><br><a href=\"https://www.typescriptlang.org/tsconfig#noImplicitThis\">noImplicitThis</a><br><a href=\"https://www.typescriptlang.org/tsconfig#useUnknownInCatchVariables\">useUnknownInCatchVariables</a></p>\n<h2 id=\"alwaysStrict\"><a href=\"#alwaysStrict\" class=\"headerlink\" title=\"alwaysStrict\"></a>alwaysStrict</h2><p>对所有文件启用javascript strict模式。注意，这和typescript strict不是同一个东西。参考：<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode\">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode</a></p>\n<h2 id=\"allowUnreachableCode\"><a href=\"#allowUnreachableCode\" class=\"headerlink\" title=\"allowUnreachableCode\"></a>allowUnreachableCode</h2><p>对未使用的代码的处理策略，可设置警告(默认)、错误、忽略。</p>\n<h2 id=\"allowUnusedLabels\"><a href=\"#allowUnusedLabels\" class=\"headerlink\" title=\"allowUnusedLabels\"></a>allowUnusedLabels</h2><p>对未使用的Label的处理策略，可设置警告(默认)、错误、忽略。</p>\n<h2 id=\"exactOptionalPropertyTypes\"><a href=\"#exactOptionalPropertyTypes\" class=\"headerlink\" title=\"exactOptionalPropertyTypes\"></a>exactOptionalPropertyTypes</h2><p>对可选项设置为undefined的策略。</p>\n<p>举例：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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\">interface</span> <span class=\"title class_\">User</span> &#123;</span><br><span class=\"line\">    sex?: <span class=\"number\">1</span> | <span class=\"number\">0</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\">man</span>: <span class=\"title class_\">User</span> = &#123;&#125;;</span><br><span class=\"line\">man.<span class=\"property\">sex</span> = <span class=\"number\">1</span>;</span><br><span class=\"line\">man.<span class=\"property\">sex</span> = <span class=\"number\">0</span>;</span><br><span class=\"line\">man.<span class=\"property\">sex</span> = <span class=\"literal\">undefined</span>;</span><br></pre></td></tr></table></figure>\n\n<p><code>User.sex</code>是一个可选项，它的预期值是<code>0|1|undefined</code>。但是呢，<code>sex</code>可选想表达的意思是未被定义，而不是值真的是undefined。那么开启本选项后，<code>man.sex = undefined</code>这个赋值语句会给一个报错。</p>\n<h2 id=\"noImplicitAny\"><a href=\"#noImplicitAny\" class=\"headerlink\" title=\"noImplicitAny\"></a>noImplicitAny</h2><p>对推导类型为any的策略。</p>\n<figure class=\"highlight typescript\"><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\">function</span> <span class=\"title function_\">fn</span>(<span class=\"params\">s</span>) &#123;</span><br><span class=\"line\">  <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(s.<span class=\"title function_\">subtr</span>(<span class=\"number\">3</span>));</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>入参<code>s</code>推导为<code>any</code>，在选项开启情况下会报错。</p>\n<h2 id=\"noImplicitReturns\"><a href=\"#noImplicitReturns\" class=\"headerlink\" title=\"noImplicitReturns\"></a>noImplicitReturns</h2><p>对函数每个分支必须有return语句的策略。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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_\">fn</span>(<span class=\"params\">s: <span class=\"built_in\">string</span></span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (s) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> s.<span class=\"title function_\">substring</span>(<span class=\"number\">3</span>);</span><br><span class=\"line\">    &#125; <span class=\"keyword\">else</span> &#123;</span><br><span class=\"line\">        <span class=\"string\">&#x27;nothing&#x27;</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>开启后，ts报错认为<code>fn</code>函数的最后没有return语句。</p>\n<h2 id=\"noPropertyAccessFromIndexSignature\"><a href=\"#noPropertyAccessFromIndexSignature\" class=\"headerlink\" title=\"noPropertyAccessFromIndexSignature\"></a>noPropertyAccessFromIndexSignature</h2><p>对访问未定义的对象属性的策略。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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_\">User</span> &#123;</span><br><span class=\"line\">    name?: <span class=\"built_in\">string</span>;</span><br><span class=\"line\">    [<span class=\"attr\">key</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 class=\"keyword\">const</span> <span class=\"attr\">a</span>: <span class=\"title class_\">User</span> = &#123;&#125;;</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"property\">name</span>, a[<span class=\"string\">&#x27;name&#x27;</span>], a.<span class=\"property\">sex</span>, a[<span class=\"string\">&#x27;sex&#x27;</span>]);</span><br></pre></td></tr></table></figure>\n\n<p>访问对象属性有<code>.</code>和<code>[index]</code>两个方式，访问未定义的属性，开启本选项后，在<code>a.sex</code>处会抛出一个错误。</p>\n<h2 id=\"noUncheckedIndexedAccess\"><a href=\"#noUncheckedIndexedAccess\" class=\"headerlink\" title=\"noUncheckedIndexedAccess\"></a>noUncheckedIndexedAccess</h2><p>未定义的对象属性值类型，给追加上<code>undefined</code>类型。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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_\">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\">propName</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\">declare</span> <span class=\"keyword\">const</span> <span class=\"attr\">admin</span>: <span class=\"title class_\">User</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// (property) User.name: string</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(admin.<span class=\"property\">name</span>);</span><br><span class=\"line\"><span class=\"comment\">// (index) User[string]: string</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(admin.<span class=\"property\">birthday</span>);</span><br></pre></td></tr></table></figure>\n\n<p>上例中，birthday的值类型是<code>string</code>，开启本项后，类型追加上<code>undefined</code>。</p>\n<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=\"comment\">// (index) User[string]: string | undefined</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(admin.<span class=\"property\">birthday</span>);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"noUnusedLocals\"><a href=\"#noUnusedLocals\" class=\"headerlink\" title=\"noUnusedLocals\"></a>noUnusedLocals</h2><p>局部变量未使用，抛出错误。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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_\">test</span>(<span class=\"params\"></span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">const</span> defaultModelID = <span class=\"number\">23</span>;</span><br><span class=\"line\"><span class=\"comment\">// &#x27;defaultModelID&#x27; is declared but its value is never read.</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"noUnusedParameters\"><a href=\"#noUnusedParameters\" class=\"headerlink\" title=\"noUnusedParameters\"></a>noUnusedParameters</h2><p>入参未使用，抛出错误。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"title function_\">createDefaultKeyboard</span> = (<span class=\"params\">modelID: <span class=\"built_in\">number</span></span>) =&gt; &#123;</span><br><span class=\"line\"><span class=\"comment\">// &#x27;modelID&#x27; is declared but its value is never read.</span></span><br><span class=\"line\">  <span class=\"keyword\">const</span> defaultModelID = <span class=\"number\">23</span>;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> &#123; <span class=\"attr\">type</span>: <span class=\"string\">&quot;keyboard&quot;</span>, <span class=\"attr\">modelID</span>: defaultModelID &#125;;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"strictBindCallApply\"><a href=\"#strictBindCallApply\" class=\"headerlink\" title=\"strictBindCallApply\"></a>strictBindCallApply</h2><p>在使用函数的call、bind、apply时，是否要检查传入参数的类型。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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_\">fn</span>(<span class=\"params\">x: <span class=\"built_in\">string</span></span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> x;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> n1 = fn.<span class=\"title function_\">call</span>(<span class=\"literal\">undefined</span>, <span class=\"string\">&#x27;10&#x27;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> n2 = fn.<span class=\"title function_\">call</span>(<span class=\"literal\">undefined</span>, <span class=\"literal\">false</span>);</span><br></pre></td></tr></table></figure>\n\n<p>如上代码中，第二个call中的入参false和string类型不匹配而报错。</p>\n<h2 id=\"strictFunctionTypes\"><a href=\"#strictFunctionTypes\" class=\"headerlink\" title=\"strictFunctionTypes\"></a>strictFunctionTypes</h2><p>更精确的检查函数入参类型。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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> <span class=\"title class_\">GetUser</span> = <span class=\"function\">(<span class=\"params\">id: <span class=\"built_in\">string</span> | <span class=\"built_in\">number</span></span>) =&gt;</span> <span class=\"built_in\">any</span>;</span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">test</span>(<span class=\"params\">x: <span class=\"built_in\">string</span></span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> x;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"attr\">getUser</span>: <span class=\"title class_\">GetUser</span> = test;</span><br></pre></td></tr></table></figure>\n\n<p>如上代码中，GetUser的入参类型<code>string | number</code>不能精确的分配给test的入参类型<code>string</code>。</p>\n<h2 id=\"strictNullChecks\"><a href=\"#strictNullChecks\" class=\"headerlink\" title=\"strictNullChecks\"></a>strictNullChecks</h2><p>是否校验<code>null</code>, <code>undefined</code>的属性访问？</p>\n<p>在以往的纯js项目中，容易忽略变量为undefined后仍然访问其属性的场景，比如在如下代码中，忽略了<code>a</code>为<code>undefined</code>的情况，导致运行时引发异常。</p>\n<figure class=\"highlight javascript\"><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> a = arr1.<span class=\"title function_\">find</span>();</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"property\">name</span>)</span><br></pre></td></tr></table></figure>\n\n<p>本选项开启后，在静态检查时就提示开发者，变量可能是<code>null</code>, <code>undefined</code>，不能访问到<code>name</code>属性。</p>\n<h2 id=\"useUnknownInCatchVariables\"><a href=\"#useUnknownInCatchVariables\" class=\"headerlink\" title=\"useUnknownInCatchVariables\"></a>useUnknownInCatchVariables</h2><p>有时候我们并不知道catch的err类型是什么，它的类型由try里的实际运行分支决定，而如果当成any处理，那么访问它的属性是危险的。当开启本项后，err的类型是unknown，必须先限定其类型再安全的访问其属性，如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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\">try</span> &#123;</span><br><span class=\"line\">  <span class=\"comment\">// ...</span></span><br><span class=\"line\">&#125; <span class=\"keyword\">catch</span> (err) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (err <span class=\"keyword\">instanceof</span> <span class=\"title class_\">Error</span>) &#123;</span><br><span class=\"line\">    <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(err.<span class=\"property\">message</span>);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Modules\"><a href=\"#compilerOptions-Modules\" class=\"headerlink\" title=\"compilerOptions - Modules\"></a>compilerOptions - Modules</h1><p>模块的处理策略。</p>\n<h2 id=\"allowArbitraryExtensions\"><a href=\"#allowArbitraryExtensions\" class=\"headerlink\" title=\"allowArbitraryExtensions\"></a>allowArbitraryExtensions</h2><p>ts默认支持了ts、js、cjs、jsx等模块的解析描述，通过<code>global.d.ts</code>的定义扩展，还可以支持css、jpg等模块的解析描述（你要自己保证webpack loader之类的解析器去真实支持加载这些模块）。而有时候，需要对特定模块文件（不管是否已全局定义过该模块的描述）做特别的描述，就可以开启该选项，并且创建一个<code>&#123;file basename&#125;.d.&#123;extension&#125;.ts</code>文件。</p>\n<p>如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\">// test.ts</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 报错：Cannot find module &#x27;./a.jpk&#x27; or its corresponding type declarations.ts(2307)</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> a <span class=\"keyword\">from</span> <span class=\"string\">&#x27;./a.jpk&#x27;</span>;</span><br><span class=\"line\"><span class=\"comment\">// doTest类型是any</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"title function_\">doTest</span>());</span><br></pre></td></tr></table></figure>\n\n<p>开启该项，并增加<code>a.d.jpk.ts</code>文件：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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\">// a.d.jpk.ts</span></span><br><span class=\"line\"><span class=\"keyword\">declare</span> <span class=\"keyword\">const</span> <span class=\"attr\">jpk</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">doTest</span>: <span class=\"function\">() =&gt;</span> <span class=\"built_in\">void</span>;</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> jpk;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// test.ts</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> a <span class=\"keyword\">from</span> <span class=\"string\">&#x27;./a.jpk&#x27;</span>;</span><br><span class=\"line\"><span class=\"comment\">// doTest的类型：(property) doTest: () =&gt; void</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"title function_\">doTest</span>());</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"allowImportingTsExtensions\"><a href=\"#allowImportingTsExtensions\" class=\"headerlink\" title=\"allowImportingTsExtensions\"></a>allowImportingTsExtensions</h2><p>是否允许在import path带入ts、tsx等后缀名。</p>\n<p>ts项目需要编译成js代码后执行，如果我们使用ts-node来执行项目，可以启用<code>noEmit</code>来禁止这个编译行为，并且在项目源码中直接引入<code>.ts</code>来引入正确的、完整的路径。</p>\n<p>举例：</p>\n<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\">import</span> &#123; wait &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;@/utils/utils.ts&#x27;</span>;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"allowUmdGlobalAccess\"><a href=\"#allowUmdGlobalAccess\" class=\"headerlink\" title=\"allowUmdGlobalAccess\"></a>allowUmdGlobalAccess</h2><p>&#x2F;&#x2F; TODO<br>和umd的声明有关系，不过我还不明确它的意义。见：<a href=\"https://github.com/microsoft/TypeScript/pull/30776%E3%80%82\">https://github.com/microsoft/TypeScript/pull/30776。</a></p>\n<h2 id=\"baseUrl\"><a href=\"#baseUrl\" class=\"headerlink\" title=\"baseUrl\"></a>baseUrl</h2><p>为解析无路径修饰的模块，设置一个基础路径。 什么叫做无路径修饰？就是该模块不是一个绝对或相对路径，如<code>import a from &#39;@/hello/world&#39;</code>。</p>\n<p>如果配置了该项，那么ts从该项指定的目录中开始查找模块，优先级也高于<code>node_modules</code>。</p>\n<h2 id=\"module\"><a href=\"#module\" class=\"headerlink\" title=\"module\"></a>module</h2><p>模块打包的策略，也就是指编译后的模块加载代码是require、import之类的语法。推荐大家阅读：<a href=\"https://www.typescriptlang.org/docs/handbook/modules/theory.html\">模块理论</a>。</p>\n<p>这个话题有点繁琐，也涉及到javascript的模块化amd、umd之类的历史，对于2023年这个时间点来说，关注下CommonJS、ESM即可，ESM还细分为ES2015、ES20XX等版本，他们的模块打包策略是一样的，区别是更高版本的ESM还支持了<code>dynamic imports</code>、<code>import.meta</code>和<code>top level await</code>之类的东西。</p>\n<p>补充的是，nodejs的模块打包策略也早就支持esm了，具体参照package.json的设置：<a href=\"https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext\">https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext</a></p>\n<h2 id=\"moduleResolution\"><a href=\"#moduleResolution\" class=\"headerlink\" title=\"moduleResolution\"></a>moduleResolution</h2><p>加载模块的策略，也就是指用什么策略去解析<code>import xxx from &#39;pathA&#39;</code>这里的<code>pathA</code>。<strong>注意区分和module的关系，module指的是项目的模块化是如何打包的，而moduleResolution指的是项目如何加载模块的</strong>。截至2023支持如下策略：</p>\n<ul>\n<li>node16&#x2F;nodenext，对于Node12+版本，本策略可自由根据import&#x2F;require选择合适的算法去加载模块。</li>\n<li>node10，对于Node12之前的版本，本策略只支持require算法加载模块。<strong>基本不用关心了</strong></li>\n<li>bundler，和node16一样，但不要求模块有后缀名。</li>\n<li>classic，早期的策略，不用管了。</li>\n</ul>\n<p><strong>这东西还要和module搭配使用，并且！并且！和package.json还有扯不清的关系。强烈建议阅读上文提到的<a href=\"https://www.typescriptlang.org/docs/handbook/modules/theory.html\">模块理论</a></strong></p>\n<p>另外，由于自己对这块的理解也不足深，还参考了这篇文章：<a href=\"https://zhuanlan.zhihu.com/p/621795173%E3%80%82\">https://zhuanlan.zhihu.com/p/621795173。</a></p>\n<h2 id=\"moduleSuffixes\"><a href=\"#moduleSuffixes\" class=\"headerlink\" title=\"moduleSuffixes\"></a>moduleSuffixes</h2><p>模块搜索时的文件扩展名补充，比如以下配置项：</p>\n<figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;compilerOptions&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;moduleSuffixes&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"string\">&quot;.ios&quot;</span><span class=\"punctuation\">,</span> <span class=\"string\">&quot;.native&quot;</span><span class=\"punctuation\">,</span> <span class=\"string\">&quot;&quot;</span><span class=\"punctuation\">]</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span></span><br></pre></td></tr></table></figure>\n\n<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\">import</span> * <span class=\"keyword\">as</span> foo <span class=\"keyword\">from</span> <span class=\"string\">&quot;./foo&quot;</span>;</span><br></pre></td></tr></table></figure>\n<p>TypeScript 会按顺序寻找<code>./foo.ios.ts</code>、<code>./foo.native.ts</code>、<code>./foo.ts</code>。</p>\n<h2 id=\"paths\"><a href=\"#paths\" class=\"headerlink\" title=\"paths\"></a>paths</h2><p>在加载模块路径时，加入一个别名匹配。可以理解为webpack的alias。</p>\n<h2 id=\"resolveJsonModule\"><a href=\"#resolveJsonModule\" class=\"headerlink\" title=\"resolveJsonModule\"></a>resolveJsonModule</h2><p>允许加载json模块（文件）。</p>\n<h2 id=\"resolvePackageJsonExports\"><a href=\"#resolvePackageJsonExports\" class=\"headerlink\" title=\"resolvePackageJsonExports\"></a>resolvePackageJsonExports</h2><p>引用<code>node_modules</code>包时，强制遵循包package.json的exports字段的定义。还是那句话，阅读下模块理论那篇文章，不然很难理解前面这句话的信息量。</p>\n<h2 id=\"resolvePackageJsonImports\"><a href=\"#resolvePackageJsonImports\" class=\"headerlink\" title=\"resolvePackageJsonImports\"></a>resolvePackageJsonImports</h2><p>强制typescript使用package.json中imports字段的定义去加载<code>#</code>符号开头的模块路径。例：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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;imports&quot;</span>: &#123;</span><br><span class=\"line\">   <span class=\"string\">&quot;#test/*&quot;</span>: <span class=\"string\">&quot;./src/test/*&quot;</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<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=\"comment\">// src/test/1.ts</span></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">const</span> a = <span class=\"number\">123</span>;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight typescript\"><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\">// src/b.ts</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; a &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;#test/1&#x27;</span>;</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&#x27;==a&#x27;</span>, a);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"rootDir\"><a href=\"#rootDir\" class=\"headerlink\" title=\"rootDir\"></a>rootDir</h2><p>指定项目的根目录，默认值可以理解为所有ts文件目录的最大集。例如：</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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\">MyProj</span><br><span class=\"line\">├── tsconfig.json</span><br><span class=\"line\">├── core</span><br><span class=\"line\">│   ├── a.ts</span><br><span class=\"line\">│   ├── b.ts</span><br><span class=\"line\">│   ├── sub</span><br><span class=\"line\">│   │   ├── c.ts</span><br><span class=\"line\">├── types.d.ts</span><br></pre></td></tr></table></figure>\n\n<p>如上的项目，rootDir的推断值是”core”。但是你可以手工指定为<code>tsconfig.json</code>的相对目录”，比如.”。</p>\n<p>另外，如果设置了<code>composite</code>，<code>rootDir</code>的默认值就是<code>tsconfig.json</code>文件的目录。</p>\n<h2 id=\"rootDirs\"><a href=\"#rootDirs\" class=\"headerlink\" title=\"rootDirs\"></a>rootDirs</h2><p>这个属性有点拽，它可以将多个目录虚拟成一个目录。这样在<code>import</code>的时候，就当成同一个目录就行啦。</p>\n<h2 id=\"typeRoots\"><a href=\"#typeRoots\" class=\"headerlink\" title=\"typeRoots\"></a>typeRoots</h2><p>类型定义文件的目录，默认所有@types目录都会被包含，包括node_modules下的@types目录。<br>如果指定了typeRoots，那么@types目录的相关规则会被忽略。</p>\n<h2 id=\"types\"><a href=\"#types\" class=\"headerlink\" title=\"types\"></a>types</h2><p>类型定义文件的具体目录，规则和<code>typeRoots</code>一样，不同点是<code>types</code>只指定具体目录，而非<code>*</code>这种匹配型目录。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Emit\"><a href=\"#compilerOptions-Emit\" class=\"headerlink\" title=\"compilerOptions - Emit\"></a>compilerOptions - Emit</h1><p>编译策略。</p>\n<h2 id=\"outDir\"><a href=\"#outDir\" class=\"headerlink\" title=\"outDir\"></a>outDir</h2><p>编译文件放置的目录，默认和源码放同一个目录。</p>\n<h2 id=\"noEmit\"><a href=\"#noEmit\" class=\"headerlink\" title=\"noEmit\"></a>noEmit</h2><p>不要编译ts。</p>\n<p>项目中一般使用babel去编译，typescript仅用来做静态检查，所以设置noEmit就可以不生成js、sourcemap、declaration文件了。</p>\n<h2 id=\"noEmitOnError\"><a href=\"#noEmitOnError\" class=\"headerlink\" title=\"noEmitOnError\"></a>noEmitOnError</h2><p>顾名思义，在检查到错误的时候，不要继续编译了。</p>\n<h2 id=\"declaration-x2F-emitDeclarationOnly-x2F-declarationDir\"><a href=\"#declaration-x2F-emitDeclarationOnly-x2F-declarationDir\" class=\"headerlink\" title=\"declaration &#x2F; emitDeclarationOnly &#x2F; declarationDir\"></a>declaration &#x2F; emitDeclarationOnly &#x2F; declarationDir</h2><p>生成类型描述文件。</p>\n<p>这个是typescript最重要的几个特性之一了，为<code>.ts</code>文件生成类型定义文件<code>.d.ts</code>。如果不想同时生成<code>.js</code>文件，则使用<code>emitDeclarationOnly</code>。</p>\n<p>同时，可以使用<code>declarationDir</code>指定类型定义文件的生成目录。</p>\n<h2 id=\"declarationMap\"><a href=\"#declarationMap\" class=\"headerlink\" title=\"declarationMap\"></a>declarationMap</h2><p>给<code>.d.ts</code>文件增加一个map标识到<code>.ts</code>源文件，类似sourceMap。</p>\n<h2 id=\"sourceMap-x2F-inlineSourceMap-x2F-inlineSources-x2F-mapRoot-x2F-sourceRoot\"><a href=\"#sourceMap-x2F-inlineSourceMap-x2F-inlineSources-x2F-mapRoot-x2F-sourceRoot\" class=\"headerlink\" title=\"sourceMap &#x2F; inlineSourceMap &#x2F; inlineSources &#x2F; mapRoot &#x2F; sourceRoot\"></a>sourceMap &#x2F; inlineSourceMap &#x2F; inlineSources &#x2F; mapRoot &#x2F; sourceRoot</h2><p>typescript也是支持souce map的，这里就不解释sourcemap是什么了。它的相关配置项有：</p>\n<p>sourceMap，生成sourcemap文件。<br>inlineSourceMap，不生成sourcemap文件，而是直接把source内容写在.js文件中。<br>inlineSources，同inlineSourceMap。<br>mapRoot，指定sourceMap文件的路径，比如部署到网络中，可以指定为”<a href=\"http://xxxx.com\"./\">http://xxxx.com\"。</a><br>sourceRoot，指定source文件的路径，同mapRoot。</p>\n<h2 id=\"downlevelIteration\"><a href=\"#downlevelIteration\" class=\"headerlink\" title=\"downlevelIteration\"></a>downlevelIteration</h2><p>对迭代器的降级解析。</p>\n<p>在es6中增加了for&#x2F;of，spread等迭代特性，typescript在编译成es5的时候，要使用何种语法。文档中有个字符遍历的例子说明开启与否的迭代影响，这对业务计算结果是有影响的。</p>\n<p>不过项目中使用了babel之类的编译器，就不用担心这些影响了。</p>\n<h2 id=\"importHelpers\"><a href=\"#importHelpers\" class=\"headerlink\" title=\"importHelpers\"></a>importHelpers</h2><p>引入降级解析的包。</p>\n<p>将es6的某些特新编译成es5，如迭代器、异步语法等，会将模块中每个相应的代码都编译成降级代码，使得类似代码重复。如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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\">var</span> __read = (<span class=\"variable language_\">this</span> &amp;&amp; <span class=\"variable language_\">this</span>.<span class=\"property\">__read</span>) || <span class=\"keyword\">function</span> (<span class=\"params\">o, n</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> m = <span class=\"keyword\">typeof</span> <span class=\"title class_\">Symbol</span> === <span class=\"string\">&quot;function&quot;</span> &amp;&amp; o[<span class=\"title class_\">Symbol</span>.<span class=\"property\">iterator</span>];</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (!m) <span class=\"keyword\">return</span> o;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> i = m.<span class=\"title function_\">call</span>(o), r, ar = [], e;</span><br><span class=\"line\">    <span class=\"keyword\">try</span> &#123;</span><br><span class=\"line\">        <span class=\"keyword\">while</span> ((n === <span class=\"built_in\">void</span> <span class=\"number\">0</span> || n-- &gt; <span class=\"number\">0</span>) &amp;&amp; !(r = i.<span class=\"title function_\">next</span>()).<span class=\"property\">done</span>) ar.<span class=\"title function_\">push</span>(r.<span class=\"property\">value</span>);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">catch</span> (error) &#123; e = &#123; <span class=\"attr\">error</span>: error &#125;; &#125;</span><br><span class=\"line\">    <span class=\"keyword\">finally</span> &#123;</span><br><span class=\"line\">        <span class=\"keyword\">try</span> &#123;</span><br><span class=\"line\">            <span class=\"keyword\">if</span> (r &amp;&amp; !r.<span class=\"property\">done</span> &amp;&amp; (m = i[<span class=\"string\">&quot;return&quot;</span>])) m.<span class=\"title function_\">call</span>(i);</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">        <span class=\"keyword\">finally</span> &#123; <span class=\"keyword\">if</span> (e) <span class=\"keyword\">throw</span> e.<span class=\"property\">error</span>; &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> ar;</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"><span class=\"keyword\">var</span> __spreadArray = (<span class=\"variable language_\">this</span> &amp;&amp; <span class=\"variable language_\">this</span>.<span class=\"property\">__spreadArray</span>) || <span class=\"keyword\">function</span> (<span class=\"params\">to, <span class=\"keyword\">from</span>, pack</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (pack || <span class=\"variable language_\">arguments</span>.<span class=\"property\">length</span> === <span class=\"number\">2</span>) <span class=\"keyword\">for</span> (<span class=\"keyword\">var</span> i = <span class=\"number\">0</span>, l = <span class=\"keyword\">from</span>.<span class=\"property\">length</span>, ar; i &lt; l; i++) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">if</span> (ar || !(i <span class=\"keyword\">in</span> <span class=\"keyword\">from</span>)) &#123;</span><br><span class=\"line\">            <span class=\"keyword\">if</span> (!ar) ar = <span class=\"title class_\">Array</span>.<span class=\"property\"><span class=\"keyword\">prototype</span></span>.<span class=\"property\">slice</span>.<span class=\"title function_\">call</span>(<span class=\"keyword\">from</span>, <span class=\"number\">0</span>, i);</span><br><span class=\"line\">            ar[i] = <span class=\"keyword\">from</span>[i];</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> to.<span class=\"title function_\">concat</span>(ar || <span class=\"title class_\">Array</span>.<span class=\"property\"><span class=\"keyword\">prototype</span></span>.<span class=\"property\">slice</span>.<span class=\"title function_\">call</span>(<span class=\"keyword\">from</span>));</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">function</span> <span class=\"title function_\">fn</span>(<span class=\"params\">arr</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> arr2 = <span class=\"title function_\">__spreadArray</span>([<span class=\"number\">1</span>], <span class=\"title function_\">__read</span>(arr), <span class=\"literal\">false</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>如果同时开启了<code>downlevelIteration</code>和<code>importHelpers</code>，并且安装了<code>tslib</code>包，那么代码会编译成类似这样：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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\">import</span> &#123; __read, __spreadArray &#125; <span class=\"keyword\">from</span> <span class=\"string\">&quot;tslib&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">function</span> <span class=\"title function_\">fn</span>(<span class=\"params\">arr</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> arr2 = <span class=\"title function_\">__spreadArray</span>([<span class=\"number\">1</span>], <span class=\"title function_\">__read</span>(arr), <span class=\"literal\">false</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"noEmitHelpers\"><a href=\"#noEmitHelpers\" class=\"headerlink\" title=\"noEmitHelpers\"></a>noEmitHelpers</h2><p>typescript处理迭代器、异步等的降级策略是生成一堆降级代码，也可以使用”importHelpers”和”tslib”来提取公共代码。但通过这个配置，可以自定义降级代码了。具体参照文档。</p>\n<h2 id=\"preserveConstEnums\"><a href=\"#preserveConstEnums\" class=\"headerlink\" title=\"preserveConstEnums\"></a>preserveConstEnums</h2><p>是否在编辑结果中移除<code>const enum</code>的定义。因为javascript没有enum概念，typescript会将enum的引用编译成具体的值。如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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=\"keyword\">enum</span> <span class=\"title class_\">Album</span> &#123;</span><br><span class=\"line\">  <span class=\"title class_\">JimmyEatWorldFutures</span> = <span class=\"number\">1</span>,</span><br><span class=\"line\">  <span class=\"title class_\">TubRingZooHypothesis</span> = <span class=\"number\">2</span>,</span><br><span class=\"line\">  <span class=\"title class_\">DogFashionDiscoAdultery</span> = <span class=\"number\">3</span>,</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"> </span><br><span class=\"line\"><span class=\"keyword\">const</span> selectedAlbum = <span class=\"title class_\">Album</span>.<span class=\"property\">JimmyEatWorldFutures</span>;</span><br><span class=\"line\"><span class=\"keyword\">if</span> (selectedAlbum === <span class=\"title class_\">Album</span>.<span class=\"property\">JimmyEatWorldFutures</span>) &#123;</span><br><span class=\"line\">  <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;That is a great choice.&quot;</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>编译结果如下：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&quot;use strict&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">const</span> selectedAlbum = <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>;</span><br><span class=\"line\"><span class=\"keyword\">if</span> (selectedAlbum === <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>) &#123;</span><br><span class=\"line\">    <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;That is a great choice.&quot;</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>如果开启此项，则编译结果中会描述出该enum的结构。如下：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&quot;use strict&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">var</span> <span class=\"title class_\">Album</span>;</span><br><span class=\"line\">(<span class=\"keyword\">function</span> (<span class=\"params\">Album</span>) &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Album</span>[<span class=\"title class_\">Album</span>[<span class=\"string\">&quot;JimmyEatWorldFutures&quot;</span>] = <span class=\"number\">1</span>] = <span class=\"string\">&quot;JimmyEatWorldFutures&quot;</span>;</span><br><span class=\"line\">    <span class=\"title class_\">Album</span>[<span class=\"title class_\">Album</span>[<span class=\"string\">&quot;TubRingZooHypothesis&quot;</span>] = <span class=\"number\">2</span>] = <span class=\"string\">&quot;TubRingZooHypothesis&quot;</span>;</span><br><span class=\"line\">    <span class=\"title class_\">Album</span>[<span class=\"title class_\">Album</span>[<span class=\"string\">&quot;DogFashionDiscoAdultery&quot;</span>] = <span class=\"number\">3</span>] = <span class=\"string\">&quot;DogFashionDiscoAdultery&quot;</span>;</span><br><span class=\"line\">&#125;)(<span class=\"title class_\">Album</span> || (<span class=\"title class_\">Album</span> = &#123;&#125;));</span><br><span class=\"line\"><span class=\"keyword\">const</span> selectedAlbum = <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>;</span><br><span class=\"line\"><span class=\"keyword\">if</span> (selectedAlbum === <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>) &#123;</span><br><span class=\"line\">    <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;That is a great choice.&quot;</span>);</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"preserveValueImports\"><a href=\"#preserveValueImports\" class=\"headerlink\" title=\"preserveValueImports\"></a>preserveValueImports</h2><p>通常，打包器会将未使用的”import”移除掉，但开启了该特性后，会在编译中保留未使用的”import”。例如：</p>\n<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\">import</span> &#123; <span class=\"title class_\">Animal</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&quot;./animal.js&quot;</span>;</span><br><span class=\"line\"><span class=\"built_in\">eval</span>(<span class=\"string\">&quot;console.log(new Animal().isDangerous())&quot;</span>);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"removeComments\"><a href=\"#removeComments\" class=\"headerlink\" title=\"removeComments\"></a>removeComments</h2><p>移除代码中的注释。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-JavaScript-Support\"><a href=\"#compilerOptions-JavaScript-Support\" class=\"headerlink\" title=\"compilerOptions - JavaScript Support\"></a>compilerOptions - JavaScript Support</h1><p>对javascript文件的支持</p>\n<h2 id=\"allowJs\"><a href=\"#allowJs\" class=\"headerlink\" title=\"allowJs\"></a>allowJs</h2><p>允许<code>.ts</code>文件引用<code>.js</code>文件，这常用在javascript项目升级为typescript的过程中。</p>\n<h2 id=\"checkJs\"><a href=\"#checkJs\" class=\"headerlink\" title=\"checkJs\"></a>checkJs</h2><p>是否开启对<code>.js</code>文件的错误检查。</p>\n<h2 id=\"maxNodeModuleJsDepth\"><a href=\"#maxNodeModuleJsDepth\" class=\"headerlink\" title=\"maxNodeModuleJsDepth\"></a>maxNodeModuleJsDepth</h2><p>为<code>.js</code>文件寻找类型定义文件时，允许的最大依赖深度。</p>\n<p>正常情况下，我们会在<code>.js</code>文件的同级补写<code>.d.ts</code>文件，tsc会很快找到类型定义。但有时候确实要扩大搜索范围去找部分<code>.js</code>文件的类型定义文件。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Interop-Constraints\"><a href=\"#compilerOptions-Interop-Constraints\" class=\"headerlink\" title=\"compilerOptions - Interop Constraints\"></a>compilerOptions - Interop Constraints</h1><p>(模块)互相操作的约束</p>\n<h2 id=\"allowSyntheticDefaultImports\"><a href=\"#allowSyntheticDefaultImports\" class=\"headerlink\" title=\"allowSyntheticDefaultImports\"></a>allowSyntheticDefaultImports</h2><p>允许合成<code>default</code>。</p>\n<p>如果一个模块A没有<code>export default</code>，那么另一个模块B在<code>import defaultA from &#39;./a&#39;</code>的时候，会抛出错误说A中没有default。</p>\n<p>有一个做法是<code>import * as defaultA from &#39;./a&#39;</code>曲线救国，但开启这个配置项后，可以直接使用<code>import defaultA from &#39;./a&#39;</code>这样的语法了。</p>\n<h2 id=\"esModuleInterop\"><a href=\"#esModuleInterop\" class=\"headerlink\" title=\"esModuleInterop\"></a>esModuleInterop</h2><p>esm在使用<code>import default from &#39;xxx&#39;</code>方式导入cjs的时候会抛出一个错误，因为cjs模块中没有default。开启此选项后，typescript会使用一些helpers去兼容cjs的default问题。</p>\n<h2 id=\"forceConsistentCasingInFileNames\"><a href=\"#forceConsistentCasingInFileNames\" class=\"headerlink\" title=\"forceConsistentCasingInFileNames\"></a>forceConsistentCasingInFileNames</h2><p>强制引用的模块文件名，和磁盘中的文件名保持一致的大小写。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Language-and-Environment\"><a href=\"#compilerOptions-Language-and-Environment\" class=\"headerlink\" title=\"compilerOptions - Language and Environment\"></a>compilerOptions - Language and Environment</h1><p>和语言、环境有关的配置项。</p>\n<h2 id=\"jsx\"><a href=\"#jsx\" class=\"headerlink\" title=\"jsx\"></a>jsx</h2><p>如何解析<code>.tsx</code>文件中jsx语法？在2023年，react17+后，用<code>react-jsx</code>就行了。</p>\n<h2 id=\"lib\"><a href=\"#lib\" class=\"headerlink\" title=\"lib\"></a>lib</h2><p>在项目中使用的api类型定义集合。</p>\n<p>ts是需要知道你用的每一个javascript方法、属性的定义的，所以它内置了一批定义（比如Math.abs方法）。但是呢，后面新增方法的定义，需要你手工指定包含，ts才能理解了，比如Array.include方法，你就要包含ES2016。但好在你不需要记住这些，因为当你指定<code>target</code>字段时，lib会被默认设置成对应的值的。</p>\n<p>另外，大部分情况下，我们要访问一些和特定环境有关的特性，比如浏览器里的Dom特性，那么这儿额外引入<code>DOM</code>定义就行了。</p>\n<h2 id=\"target\"><a href=\"#target\" class=\"headerlink\" title=\"target\"></a>target</h2><p>项目编译的目标javascript版本。</p>\n<p>也就是你的目标客户端支持的最低javascript版本。注意它会影响默认的<code>lib</code>配置项。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Compiler-Diagnostics\"><a href=\"#compilerOptions-Compiler-Diagnostics\" class=\"headerlink\" title=\"compilerOptions - Compiler Diagnostics\"></a>compilerOptions - Compiler Diagnostics</h1><p>编译诊断配置项。</p>\n<h2 id=\"diagnostics-x2F-extendedDiagnostics\"><a href=\"#diagnostics-x2F-extendedDiagnostics\" class=\"headerlink\" title=\"diagnostics &#x2F; extendedDiagnostics\"></a>diagnostics &#x2F; extendedDiagnostics</h2><p>打印出编译的信息，比如多少文件、编译时间等。</p>\n<p>extendedDiagnostics包含了diagnostics给出的所有信息，所以用extendedDiagnostics就行了。这是一个开启extendedDiagnostics的编译信息：</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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\">Files:                         143</span><br><span class=\"line\">Lines of Library:            38663</span><br><span class=\"line\">Lines of Definitions:        82578</span><br><span class=\"line\">Symbols:                     73362</span><br><span class=\"line\">Types:                        1495</span><br><span class=\"line\">Parse time:                  0.50s</span><br><span class=\"line\">ResolveModule time:          0.03s</span><br><span class=\"line\">Total time:                  1.01s</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"explainFiles\"><a href=\"#explainFiles\" class=\"headerlink\" title=\"explainFiles\"></a>explainFiles</h2><p>打印出文件被编译的原因，也就是它们的引用链。</p>\n<h2 id=\"listEmittedFiles-x2F-listFiles\"><a href=\"#listEmittedFiles-x2F-listFiles\" class=\"headerlink\" title=\"listEmittedFiles &#x2F; listFiles\"></a>listEmittedFiles &#x2F; listFiles</h2><p>列出参与编译的文件。</p>\n<h2 id=\"traceResolution\"><a href=\"#traceResolution\" class=\"headerlink\" title=\"traceResolution\"></a>traceResolution</h2><p>打印每一个文件的编译流程。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Completeness\"><a href=\"#compilerOptions-Completeness\" class=\"headerlink\" title=\"compilerOptions - Completeness\"></a>compilerOptions - Completeness</h1><p>完整性检测的配置项</p>\n<h2 id=\"skipLibCheck\"><a href=\"#skipLibCheck\" class=\"headerlink\" title=\"skipLibCheck\"></a>skipLibCheck</h2><p>跳过lib库的类型检测。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/23\">https://github.com/taoliujun/blog/issues/23</a></p>\n<!--hexo\n---\nurl: tsconfig-json\ntags:\n  - typescript\n---\n-->\n\n<p><strong>截至TypeScript 5.2</strong>，<code>tsconfig.json</code>的配置项已经有百十个之多，它的某些选项甚至影响了项目的执行结果，所以尽量多的了解它们能让程序员更深的了解ts，写出优美语句让CTO赞赏，甚至避免写出bug。</p>\n<p>本issue的内容，只是个人在工作经验的影响下，对官方文档的内容理解。且内容有所欠缺，基本只记录了我工作涉及到的配置项，比如不怎么使用class，对class的配置项就略过了。</p>\n<p>官方文档：<a href=\"https://www.typescriptlang.org/tsconfig\">https://www.typescriptlang.org/tsconfig</a></p>\n<hr>\n<!--hexo-->\n\n<h1 id=\"Top-Level\"><a href=\"#Top-Level\" class=\"headerlink\" title=\"Top Level\"></a>Top Level</h1><p>一些根配置项。</p>\n<h2 id=\"extends\"><a href=\"#extends\" class=\"headerlink\" title=\"extends\"></a>extends</h2><p>继承另一个配置文件，推荐的一些官方的配置文件来继承使用：<a href=\"https://github.com/tsconfig/bases/tree/main/bases\">https://github.com/tsconfig/bases/tree/main/bases</a></p>\n<h2 id=\"files-include-exclude\"><a href=\"#files-include-exclude\" class=\"headerlink\" title=\"files, include, exclude\"></a>files, include, exclude</h2><p>这几项指定了在项目里，被ts作用的文件集合。配置本身没什么好说的，记录下它们之间的关系。</p>\n<ul>\n<li>如果files指定了，那么include的默认值是<code>[]</code>，否则include的默认值是<code>**/*</code>；</li>\n<li>exclude用于排除include已指定的文件集合，但这些文件仍然是可以在项目里被引用的；</li>\n<li>exclude默认排除了<code>node_modules</code>、<code>outDir</code>；</li>\n</ul>\n<h2 id=\"references\"><a href=\"#references\" class=\"headerlink\" title=\"references\"></a>references</h2><p>用于项目文件夹分别打包，并且其中有缓存机制的参与，所以编译速度会快很多。</p>\n<p>如下项目结构：</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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\">./interface</span><br><span class=\"line\">./components</span><br><span class=\"line\">./user</span><br><span class=\"line\">./admin</span><br><span class=\"line\">./tsconfig.json</span><br></pre></td></tr></table></figure>\n\n<p>在上面，user和admin文件夹分别是业务用户端、业务管理端，interface是接口定义，components是通用组件。在以往，改动了任何文件，都需要整个项目重新编译。而在使用references之后，将4个文件夹中放入对应的tsconfig.json并各有配置，在根tsconfig中指定好references的path后，tsc利用缓存机制，会只打包改动过的文件夹。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions\"><a href=\"#compilerOptions\" class=\"headerlink\" title=\"compilerOptions\"></a>compilerOptions</h1><p>编译器配置项太多了，按作用拆分成几个评论来说。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Type-Checking\"><a href=\"#compilerOptions-Type-Checking\" class=\"headerlink\" title=\"compilerOptions - Type Checking\"></a>compilerOptions - Type Checking</h1><p>和类型检查有关的配置项。</p>\n<h2 id=\"strict\"><a href=\"#strict\" class=\"headerlink\" title=\"strict\"></a>strict</h2><p>strict是一个严格模式的快捷开关，开启后会默认打开strictNullChecks、noImplicitAny等选项。并且随着typescript的升级，它可能会默认开启新增特性，列出截至5.2默认开启的选项：</p>\n<p><a href=\"https://www.typescriptlang.org/tsconfig#alwaysStrict\">alwaysStrict</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictNullChecks\">strictNullChecks</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictBindCallApply\">strictBindCallApply</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictFunctionTypes\">strictFunctionTypes</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictPropertyInitialization\">strictPropertyInitialization</a><br><a href=\"https://www.typescriptlang.org/tsconfig#noImplicitAny\">noImplicitAny</a><br><a href=\"https://www.typescriptlang.org/tsconfig#noImplicitThis\">noImplicitThis</a><br><a href=\"https://www.typescriptlang.org/tsconfig#useUnknownInCatchVariables\">useUnknownInCatchVariables</a></p>\n<h2 id=\"alwaysStrict\"><a href=\"#alwaysStrict\" class=\"headerlink\" title=\"alwaysStrict\"></a>alwaysStrict</h2><p>对所有文件启用javascript strict模式。注意，这和typescript strict不是同一个东西。参考：<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode\">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode</a></p>\n<h2 id=\"allowUnreachableCode\"><a href=\"#allowUnreachableCode\" class=\"headerlink\" title=\"allowUnreachableCode\"></a>allowUnreachableCode</h2><p>对未使用的代码的处理策略，可设置警告(默认)、错误、忽略。</p>\n<h2 id=\"allowUnusedLabels\"><a href=\"#allowUnusedLabels\" class=\"headerlink\" title=\"allowUnusedLabels\"></a>allowUnusedLabels</h2><p>对未使用的Label的处理策略，可设置警告(默认)、错误、忽略。</p>\n<h2 id=\"exactOptionalPropertyTypes\"><a href=\"#exactOptionalPropertyTypes\" class=\"headerlink\" title=\"exactOptionalPropertyTypes\"></a>exactOptionalPropertyTypes</h2><p>对可选项设置为undefined的策略。</p>\n<p>举例：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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\">interface</span> <span class=\"title class_\">User</span> &#123;</span><br><span class=\"line\">    sex?: <span class=\"number\">1</span> | <span class=\"number\">0</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\">man</span>: <span class=\"title class_\">User</span> = &#123;&#125;;</span><br><span class=\"line\">man.<span class=\"property\">sex</span> = <span class=\"number\">1</span>;</span><br><span class=\"line\">man.<span class=\"property\">sex</span> = <span class=\"number\">0</span>;</span><br><span class=\"line\">man.<span class=\"property\">sex</span> = <span class=\"literal\">undefined</span>;</span><br></pre></td></tr></table></figure>\n\n<p><code>User.sex</code>是一个可选项，它的预期值是<code>0|1|undefined</code>。但是呢，<code>sex</code>可选想表达的意思是未被定义，而不是值真的是undefined。那么开启本选项后，<code>man.sex = undefined</code>这个赋值语句会给一个报错。</p>\n<h2 id=\"noImplicitAny\"><a href=\"#noImplicitAny\" class=\"headerlink\" title=\"noImplicitAny\"></a>noImplicitAny</h2><p>对推导类型为any的策略。</p>\n<figure class=\"highlight typescript\"><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\">function</span> <span class=\"title function_\">fn</span>(<span class=\"params\">s</span>) &#123;</span><br><span class=\"line\">  <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(s.<span class=\"title function_\">subtr</span>(<span class=\"number\">3</span>));</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>入参<code>s</code>推导为<code>any</code>，在选项开启情况下会报错。</p>\n<h2 id=\"noImplicitReturns\"><a href=\"#noImplicitReturns\" class=\"headerlink\" title=\"noImplicitReturns\"></a>noImplicitReturns</h2><p>对函数每个分支必须有return语句的策略。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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_\">fn</span>(<span class=\"params\">s: <span class=\"built_in\">string</span></span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (s) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> s.<span class=\"title function_\">substring</span>(<span class=\"number\">3</span>);</span><br><span class=\"line\">    &#125; <span class=\"keyword\">else</span> &#123;</span><br><span class=\"line\">        <span class=\"string\">&#x27;nothing&#x27;</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>开启后，ts报错认为<code>fn</code>函数的最后没有return语句。</p>\n<h2 id=\"noPropertyAccessFromIndexSignature\"><a href=\"#noPropertyAccessFromIndexSignature\" class=\"headerlink\" title=\"noPropertyAccessFromIndexSignature\"></a>noPropertyAccessFromIndexSignature</h2><p>对访问未定义的对象属性的策略。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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_\">User</span> &#123;</span><br><span class=\"line\">    name?: <span class=\"built_in\">string</span>;</span><br><span class=\"line\">    [<span class=\"attr\">key</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 class=\"keyword\">const</span> <span class=\"attr\">a</span>: <span class=\"title class_\">User</span> = &#123;&#125;;</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"property\">name</span>, a[<span class=\"string\">&#x27;name&#x27;</span>], a.<span class=\"property\">sex</span>, a[<span class=\"string\">&#x27;sex&#x27;</span>]);</span><br></pre></td></tr></table></figure>\n\n<p>访问对象属性有<code>.</code>和<code>[index]</code>两个方式，访问未定义的属性，开启本选项后，在<code>a.sex</code>处会抛出一个错误。</p>\n<h2 id=\"noUncheckedIndexedAccess\"><a href=\"#noUncheckedIndexedAccess\" class=\"headerlink\" title=\"noUncheckedIndexedAccess\"></a>noUncheckedIndexedAccess</h2><p>未定义的对象属性值类型，给追加上<code>undefined</code>类型。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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_\">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\">propName</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\">declare</span> <span class=\"keyword\">const</span> <span class=\"attr\">admin</span>: <span class=\"title class_\">User</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// (property) User.name: string</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(admin.<span class=\"property\">name</span>);</span><br><span class=\"line\"><span class=\"comment\">// (index) User[string]: string</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(admin.<span class=\"property\">birthday</span>);</span><br></pre></td></tr></table></figure>\n\n<p>上例中，birthday的值类型是<code>string</code>，开启本项后，类型追加上<code>undefined</code>。</p>\n<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=\"comment\">// (index) User[string]: string | undefined</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(admin.<span class=\"property\">birthday</span>);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"noUnusedLocals\"><a href=\"#noUnusedLocals\" class=\"headerlink\" title=\"noUnusedLocals\"></a>noUnusedLocals</h2><p>局部变量未使用，抛出错误。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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_\">test</span>(<span class=\"params\"></span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">const</span> defaultModelID = <span class=\"number\">23</span>;</span><br><span class=\"line\"><span class=\"comment\">// &#x27;defaultModelID&#x27; is declared but its value is never read.</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"noUnusedParameters\"><a href=\"#noUnusedParameters\" class=\"headerlink\" title=\"noUnusedParameters\"></a>noUnusedParameters</h2><p>入参未使用，抛出错误。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"title function_\">createDefaultKeyboard</span> = (<span class=\"params\">modelID: <span class=\"built_in\">number</span></span>) =&gt; &#123;</span><br><span class=\"line\"><span class=\"comment\">// &#x27;modelID&#x27; is declared but its value is never read.</span></span><br><span class=\"line\">  <span class=\"keyword\">const</span> defaultModelID = <span class=\"number\">23</span>;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> &#123; <span class=\"attr\">type</span>: <span class=\"string\">&quot;keyboard&quot;</span>, <span class=\"attr\">modelID</span>: defaultModelID &#125;;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"strictBindCallApply\"><a href=\"#strictBindCallApply\" class=\"headerlink\" title=\"strictBindCallApply\"></a>strictBindCallApply</h2><p>在使用函数的call、bind、apply时，是否要检查传入参数的类型。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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_\">fn</span>(<span class=\"params\">x: <span class=\"built_in\">string</span></span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> x;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> n1 = fn.<span class=\"title function_\">call</span>(<span class=\"literal\">undefined</span>, <span class=\"string\">&#x27;10&#x27;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> n2 = fn.<span class=\"title function_\">call</span>(<span class=\"literal\">undefined</span>, <span class=\"literal\">false</span>);</span><br></pre></td></tr></table></figure>\n\n<p>如上代码中，第二个call中的入参false和string类型不匹配而报错。</p>\n<h2 id=\"strictFunctionTypes\"><a href=\"#strictFunctionTypes\" class=\"headerlink\" title=\"strictFunctionTypes\"></a>strictFunctionTypes</h2><p>更精确的检查函数入参类型。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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> <span class=\"title class_\">GetUser</span> = <span class=\"function\">(<span class=\"params\">id: <span class=\"built_in\">string</span> | <span class=\"built_in\">number</span></span>) =&gt;</span> <span class=\"built_in\">any</span>;</span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">test</span>(<span class=\"params\">x: <span class=\"built_in\">string</span></span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> x;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"attr\">getUser</span>: <span class=\"title class_\">GetUser</span> = test;</span><br></pre></td></tr></table></figure>\n\n<p>如上代码中，GetUser的入参类型<code>string | number</code>不能精确的分配给test的入参类型<code>string</code>。</p>\n<h2 id=\"strictNullChecks\"><a href=\"#strictNullChecks\" class=\"headerlink\" title=\"strictNullChecks\"></a>strictNullChecks</h2><p>是否校验<code>null</code>, <code>undefined</code>的属性访问？</p>\n<p>在以往的纯js项目中，容易忽略变量为undefined后仍然访问其属性的场景，比如在如下代码中，忽略了<code>a</code>为<code>undefined</code>的情况，导致运行时引发异常。</p>\n<figure class=\"highlight javascript\"><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> a = arr1.<span class=\"title function_\">find</span>();</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"property\">name</span>)</span><br></pre></td></tr></table></figure>\n\n<p>本选项开启后，在静态检查时就提示开发者，变量可能是<code>null</code>, <code>undefined</code>，不能访问到<code>name</code>属性。</p>\n<h2 id=\"useUnknownInCatchVariables\"><a href=\"#useUnknownInCatchVariables\" class=\"headerlink\" title=\"useUnknownInCatchVariables\"></a>useUnknownInCatchVariables</h2><p>有时候我们并不知道catch的err类型是什么，它的类型由try里的实际运行分支决定，而如果当成any处理，那么访问它的属性是危险的。当开启本项后，err的类型是unknown，必须先限定其类型再安全的访问其属性，如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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\">try</span> &#123;</span><br><span class=\"line\">  <span class=\"comment\">// ...</span></span><br><span class=\"line\">&#125; <span class=\"keyword\">catch</span> (err) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (err <span class=\"keyword\">instanceof</span> <span class=\"title class_\">Error</span>) &#123;</span><br><span class=\"line\">    <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(err.<span class=\"property\">message</span>);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Modules\"><a href=\"#compilerOptions-Modules\" class=\"headerlink\" title=\"compilerOptions - Modules\"></a>compilerOptions - Modules</h1><p>模块的处理策略。</p>\n<h2 id=\"allowArbitraryExtensions\"><a href=\"#allowArbitraryExtensions\" class=\"headerlink\" title=\"allowArbitraryExtensions\"></a>allowArbitraryExtensions</h2><p>ts默认支持了ts、js、cjs、jsx等模块的解析描述，通过<code>global.d.ts</code>的定义扩展，还可以支持css、jpg等模块的解析描述（你要自己保证webpack loader之类的解析器去真实支持加载这些模块）。而有时候，需要对特定模块文件（不管是否已全局定义过该模块的描述）做特别的描述，就可以开启该选项，并且创建一个<code>&#123;file basename&#125;.d.&#123;extension&#125;.ts</code>文件。</p>\n<p>如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\">// test.ts</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 报错：Cannot find module &#x27;./a.jpk&#x27; or its corresponding type declarations.ts(2307)</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> a <span class=\"keyword\">from</span> <span class=\"string\">&#x27;./a.jpk&#x27;</span>;</span><br><span class=\"line\"><span class=\"comment\">// doTest类型是any</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"title function_\">doTest</span>());</span><br></pre></td></tr></table></figure>\n\n<p>开启该项，并增加<code>a.d.jpk.ts</code>文件：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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\">// a.d.jpk.ts</span></span><br><span class=\"line\"><span class=\"keyword\">declare</span> <span class=\"keyword\">const</span> <span class=\"attr\">jpk</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">doTest</span>: <span class=\"function\">() =&gt;</span> <span class=\"built_in\">void</span>;</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> jpk;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// test.ts</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> a <span class=\"keyword\">from</span> <span class=\"string\">&#x27;./a.jpk&#x27;</span>;</span><br><span class=\"line\"><span class=\"comment\">// doTest的类型：(property) doTest: () =&gt; void</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"title function_\">doTest</span>());</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"allowImportingTsExtensions\"><a href=\"#allowImportingTsExtensions\" class=\"headerlink\" title=\"allowImportingTsExtensions\"></a>allowImportingTsExtensions</h2><p>是否允许在import path带入ts、tsx等后缀名。</p>\n<p>ts项目需要编译成js代码后执行，如果我们使用ts-node来执行项目，可以启用<code>noEmit</code>来禁止这个编译行为，并且在项目源码中直接引入<code>.ts</code>来引入正确的、完整的路径。</p>\n<p>举例：</p>\n<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\">import</span> &#123; wait &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;@/utils/utils.ts&#x27;</span>;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"allowUmdGlobalAccess\"><a href=\"#allowUmdGlobalAccess\" class=\"headerlink\" title=\"allowUmdGlobalAccess\"></a>allowUmdGlobalAccess</h2><p>&#x2F;&#x2F; TODO<br>和umd的声明有关系，不过我还不明确它的意义。见：<a href=\"https://github.com/microsoft/TypeScript/pull/30776%E3%80%82\">https://github.com/microsoft/TypeScript/pull/30776。</a></p>\n<h2 id=\"baseUrl\"><a href=\"#baseUrl\" class=\"headerlink\" title=\"baseUrl\"></a>baseUrl</h2><p>为解析无路径修饰的模块，设置一个基础路径。 什么叫做无路径修饰？就是该模块不是一个绝对或相对路径，如<code>import a from &#39;@/hello/world&#39;</code>。</p>\n<p>如果配置了该项，那么ts从该项指定的目录中开始查找模块，优先级也高于<code>node_modules</code>。</p>\n<h2 id=\"module\"><a href=\"#module\" class=\"headerlink\" title=\"module\"></a>module</h2><p>模块打包的策略，也就是指编译后的模块加载代码是require、import之类的语法。推荐大家阅读：<a href=\"https://www.typescriptlang.org/docs/handbook/modules/theory.html\">模块理论</a>。</p>\n<p>这个话题有点繁琐，也涉及到javascript的模块化amd、umd之类的历史，对于2023年这个时间点来说，关注下CommonJS、ESM即可，ESM还细分为ES2015、ES20XX等版本，他们的模块打包策略是一样的，区别是更高版本的ESM还支持了<code>dynamic imports</code>、<code>import.meta</code>和<code>top level await</code>之类的东西。</p>\n<p>补充的是，nodejs的模块打包策略也早就支持esm了，具体参照package.json的设置：<a href=\"https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext\">https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext</a></p>\n<h2 id=\"moduleResolution\"><a href=\"#moduleResolution\" class=\"headerlink\" title=\"moduleResolution\"></a>moduleResolution</h2><p>加载模块的策略，也就是指用什么策略去解析<code>import xxx from &#39;pathA&#39;</code>这里的<code>pathA</code>。<strong>注意区分和module的关系，module指的是项目的模块化是如何打包的，而moduleResolution指的是项目如何加载模块的</strong>。截至2023支持如下策略：</p>\n<ul>\n<li>node16&#x2F;nodenext，对于Node12+版本，本策略可自由根据import&#x2F;require选择合适的算法去加载模块。</li>\n<li>node10，对于Node12之前的版本，本策略只支持require算法加载模块。<strong>基本不用关心了</strong></li>\n<li>bundler，和node16一样，但不要求模块有后缀名。</li>\n<li>classic，早期的策略，不用管了。</li>\n</ul>\n<p><strong>这东西还要和module搭配使用，并且！并且！和package.json还有扯不清的关系。强烈建议阅读上文提到的<a href=\"https://www.typescriptlang.org/docs/handbook/modules/theory.html\">模块理论</a></strong></p>\n<p>另外，由于自己对这块的理解也不足深，还参考了这篇文章：<a href=\"https://zhuanlan.zhihu.com/p/621795173%E3%80%82\">https://zhuanlan.zhihu.com/p/621795173。</a></p>\n<h2 id=\"moduleSuffixes\"><a href=\"#moduleSuffixes\" class=\"headerlink\" title=\"moduleSuffixes\"></a>moduleSuffixes</h2><p>模块搜索时的文件扩展名补充，比如以下配置项：</p>\n<figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;compilerOptions&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;moduleSuffixes&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"string\">&quot;.ios&quot;</span><span class=\"punctuation\">,</span> <span class=\"string\">&quot;.native&quot;</span><span class=\"punctuation\">,</span> <span class=\"string\">&quot;&quot;</span><span class=\"punctuation\">]</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span></span><br></pre></td></tr></table></figure>\n\n<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\">import</span> * <span class=\"keyword\">as</span> foo <span class=\"keyword\">from</span> <span class=\"string\">&quot;./foo&quot;</span>;</span><br></pre></td></tr></table></figure>\n<p>TypeScript 会按顺序寻找<code>./foo.ios.ts</code>、<code>./foo.native.ts</code>、<code>./foo.ts</code>。</p>\n<h2 id=\"paths\"><a href=\"#paths\" class=\"headerlink\" title=\"paths\"></a>paths</h2><p>在加载模块路径时，加入一个别名匹配。可以理解为webpack的alias。</p>\n<h2 id=\"resolveJsonModule\"><a href=\"#resolveJsonModule\" class=\"headerlink\" title=\"resolveJsonModule\"></a>resolveJsonModule</h2><p>允许加载json模块（文件）。</p>\n<h2 id=\"resolvePackageJsonExports\"><a href=\"#resolvePackageJsonExports\" class=\"headerlink\" title=\"resolvePackageJsonExports\"></a>resolvePackageJsonExports</h2><p>引用<code>node_modules</code>包时，强制遵循包package.json的exports字段的定义。还是那句话，阅读下模块理论那篇文章，不然很难理解前面这句话的信息量。</p>\n<h2 id=\"resolvePackageJsonImports\"><a href=\"#resolvePackageJsonImports\" class=\"headerlink\" title=\"resolvePackageJsonImports\"></a>resolvePackageJsonImports</h2><p>强制typescript使用package.json中imports字段的定义去加载<code>#</code>符号开头的模块路径。例：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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;imports&quot;</span>: &#123;</span><br><span class=\"line\">   <span class=\"string\">&quot;#test/*&quot;</span>: <span class=\"string\">&quot;./src/test/*&quot;</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<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=\"comment\">// src/test/1.ts</span></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">const</span> a = <span class=\"number\">123</span>;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight typescript\"><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\">// src/b.ts</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; a &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;#test/1&#x27;</span>;</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&#x27;==a&#x27;</span>, a);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"rootDir\"><a href=\"#rootDir\" class=\"headerlink\" title=\"rootDir\"></a>rootDir</h2><p>指定项目的根目录，默认值可以理解为所有ts文件目录的最大集。例如：</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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\">MyProj</span><br><span class=\"line\">├── tsconfig.json</span><br><span class=\"line\">├── core</span><br><span class=\"line\">│   ├── a.ts</span><br><span class=\"line\">│   ├── b.ts</span><br><span class=\"line\">│   ├── sub</span><br><span class=\"line\">│   │   ├── c.ts</span><br><span class=\"line\">├── types.d.ts</span><br></pre></td></tr></table></figure>\n\n<p>如上的项目，rootDir的推断值是”core”。但是你可以手工指定为<code>tsconfig.json</code>的相对目录”，比如.”。</p>\n<p>另外，如果设置了<code>composite</code>，<code>rootDir</code>的默认值就是<code>tsconfig.json</code>文件的目录。</p>\n<h2 id=\"rootDirs\"><a href=\"#rootDirs\" class=\"headerlink\" title=\"rootDirs\"></a>rootDirs</h2><p>这个属性有点拽，它可以将多个目录虚拟成一个目录。这样在<code>import</code>的时候，就当成同一个目录就行啦。</p>\n<h2 id=\"typeRoots\"><a href=\"#typeRoots\" class=\"headerlink\" title=\"typeRoots\"></a>typeRoots</h2><p>类型定义文件的目录，默认所有@types目录都会被包含，包括node_modules下的@types目录。<br>如果指定了typeRoots，那么@types目录的相关规则会被忽略。</p>\n<h2 id=\"types\"><a href=\"#types\" class=\"headerlink\" title=\"types\"></a>types</h2><p>类型定义文件的具体目录，规则和<code>typeRoots</code>一样，不同点是<code>types</code>只指定具体目录，而非<code>*</code>这种匹配型目录。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Emit\"><a href=\"#compilerOptions-Emit\" class=\"headerlink\" title=\"compilerOptions - Emit\"></a>compilerOptions - Emit</h1><p>编译策略。</p>\n<h2 id=\"outDir\"><a href=\"#outDir\" class=\"headerlink\" title=\"outDir\"></a>outDir</h2><p>编译文件放置的目录，默认和源码放同一个目录。</p>\n<h2 id=\"noEmit\"><a href=\"#noEmit\" class=\"headerlink\" title=\"noEmit\"></a>noEmit</h2><p>不要编译ts。</p>\n<p>项目中一般使用babel去编译，typescript仅用来做静态检查，所以设置noEmit就可以不生成js、sourcemap、declaration文件了。</p>\n<h2 id=\"noEmitOnError\"><a href=\"#noEmitOnError\" class=\"headerlink\" title=\"noEmitOnError\"></a>noEmitOnError</h2><p>顾名思义，在检查到错误的时候，不要继续编译了。</p>\n<h2 id=\"declaration-x2F-emitDeclarationOnly-x2F-declarationDir\"><a href=\"#declaration-x2F-emitDeclarationOnly-x2F-declarationDir\" class=\"headerlink\" title=\"declaration &#x2F; emitDeclarationOnly &#x2F; declarationDir\"></a>declaration &#x2F; emitDeclarationOnly &#x2F; declarationDir</h2><p>生成类型描述文件。</p>\n<p>这个是typescript最重要的几个特性之一了，为<code>.ts</code>文件生成类型定义文件<code>.d.ts</code>。如果不想同时生成<code>.js</code>文件，则使用<code>emitDeclarationOnly</code>。</p>\n<p>同时，可以使用<code>declarationDir</code>指定类型定义文件的生成目录。</p>\n<h2 id=\"declarationMap\"><a href=\"#declarationMap\" class=\"headerlink\" title=\"declarationMap\"></a>declarationMap</h2><p>给<code>.d.ts</code>文件增加一个map标识到<code>.ts</code>源文件，类似sourceMap。</p>\n<h2 id=\"sourceMap-x2F-inlineSourceMap-x2F-inlineSources-x2F-mapRoot-x2F-sourceRoot\"><a href=\"#sourceMap-x2F-inlineSourceMap-x2F-inlineSources-x2F-mapRoot-x2F-sourceRoot\" class=\"headerlink\" title=\"sourceMap &#x2F; inlineSourceMap &#x2F; inlineSources &#x2F; mapRoot &#x2F; sourceRoot\"></a>sourceMap &#x2F; inlineSourceMap &#x2F; inlineSources &#x2F; mapRoot &#x2F; sourceRoot</h2><p>typescript也是支持souce map的，这里就不解释sourcemap是什么了。它的相关配置项有：</p>\n<p>sourceMap，生成sourcemap文件。<br>inlineSourceMap，不生成sourcemap文件，而是直接把source内容写在.js文件中。<br>inlineSources，同inlineSourceMap。<br>mapRoot，指定sourceMap文件的路径，比如部署到网络中，可以指定为”<a href=\"http://xxxx.com\"./\">http://xxxx.com\"。</a><br>sourceRoot，指定source文件的路径，同mapRoot。</p>\n<h2 id=\"downlevelIteration\"><a href=\"#downlevelIteration\" class=\"headerlink\" title=\"downlevelIteration\"></a>downlevelIteration</h2><p>对迭代器的降级解析。</p>\n<p>在es6中增加了for&#x2F;of，spread等迭代特性，typescript在编译成es5的时候，要使用何种语法。文档中有个字符遍历的例子说明开启与否的迭代影响，这对业务计算结果是有影响的。</p>\n<p>不过项目中使用了babel之类的编译器，就不用担心这些影响了。</p>\n<h2 id=\"importHelpers\"><a href=\"#importHelpers\" class=\"headerlink\" title=\"importHelpers\"></a>importHelpers</h2><p>引入降级解析的包。</p>\n<p>将es6的某些特新编译成es5，如迭代器、异步语法等，会将模块中每个相应的代码都编译成降级代码，使得类似代码重复。如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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\">var</span> __read = (<span class=\"variable language_\">this</span> &amp;&amp; <span class=\"variable language_\">this</span>.<span class=\"property\">__read</span>) || <span class=\"keyword\">function</span> (<span class=\"params\">o, n</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> m = <span class=\"keyword\">typeof</span> <span class=\"title class_\">Symbol</span> === <span class=\"string\">&quot;function&quot;</span> &amp;&amp; o[<span class=\"title class_\">Symbol</span>.<span class=\"property\">iterator</span>];</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (!m) <span class=\"keyword\">return</span> o;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> i = m.<span class=\"title function_\">call</span>(o), r, ar = [], e;</span><br><span class=\"line\">    <span class=\"keyword\">try</span> &#123;</span><br><span class=\"line\">        <span class=\"keyword\">while</span> ((n === <span class=\"built_in\">void</span> <span class=\"number\">0</span> || n-- &gt; <span class=\"number\">0</span>) &amp;&amp; !(r = i.<span class=\"title function_\">next</span>()).<span class=\"property\">done</span>) ar.<span class=\"title function_\">push</span>(r.<span class=\"property\">value</span>);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">catch</span> (error) &#123; e = &#123; <span class=\"attr\">error</span>: error &#125;; &#125;</span><br><span class=\"line\">    <span class=\"keyword\">finally</span> &#123;</span><br><span class=\"line\">        <span class=\"keyword\">try</span> &#123;</span><br><span class=\"line\">            <span class=\"keyword\">if</span> (r &amp;&amp; !r.<span class=\"property\">done</span> &amp;&amp; (m = i[<span class=\"string\">&quot;return&quot;</span>])) m.<span class=\"title function_\">call</span>(i);</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">        <span class=\"keyword\">finally</span> &#123; <span class=\"keyword\">if</span> (e) <span class=\"keyword\">throw</span> e.<span class=\"property\">error</span>; &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> ar;</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"><span class=\"keyword\">var</span> __spreadArray = (<span class=\"variable language_\">this</span> &amp;&amp; <span class=\"variable language_\">this</span>.<span class=\"property\">__spreadArray</span>) || <span class=\"keyword\">function</span> (<span class=\"params\">to, <span class=\"keyword\">from</span>, pack</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (pack || <span class=\"variable language_\">arguments</span>.<span class=\"property\">length</span> === <span class=\"number\">2</span>) <span class=\"keyword\">for</span> (<span class=\"keyword\">var</span> i = <span class=\"number\">0</span>, l = <span class=\"keyword\">from</span>.<span class=\"property\">length</span>, ar; i &lt; l; i++) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">if</span> (ar || !(i <span class=\"keyword\">in</span> <span class=\"keyword\">from</span>)) &#123;</span><br><span class=\"line\">            <span class=\"keyword\">if</span> (!ar) ar = <span class=\"title class_\">Array</span>.<span class=\"property\"><span class=\"keyword\">prototype</span></span>.<span class=\"property\">slice</span>.<span class=\"title function_\">call</span>(<span class=\"keyword\">from</span>, <span class=\"number\">0</span>, i);</span><br><span class=\"line\">            ar[i] = <span class=\"keyword\">from</span>[i];</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> to.<span class=\"title function_\">concat</span>(ar || <span class=\"title class_\">Array</span>.<span class=\"property\"><span class=\"keyword\">prototype</span></span>.<span class=\"property\">slice</span>.<span class=\"title function_\">call</span>(<span class=\"keyword\">from</span>));</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">function</span> <span class=\"title function_\">fn</span>(<span class=\"params\">arr</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> arr2 = <span class=\"title function_\">__spreadArray</span>([<span class=\"number\">1</span>], <span class=\"title function_\">__read</span>(arr), <span class=\"literal\">false</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>如果同时开启了<code>downlevelIteration</code>和<code>importHelpers</code>，并且安装了<code>tslib</code>包，那么代码会编译成类似这样：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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\">import</span> &#123; __read, __spreadArray &#125; <span class=\"keyword\">from</span> <span class=\"string\">&quot;tslib&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">function</span> <span class=\"title function_\">fn</span>(<span class=\"params\">arr</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> arr2 = <span class=\"title function_\">__spreadArray</span>([<span class=\"number\">1</span>], <span class=\"title function_\">__read</span>(arr), <span class=\"literal\">false</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"noEmitHelpers\"><a href=\"#noEmitHelpers\" class=\"headerlink\" title=\"noEmitHelpers\"></a>noEmitHelpers</h2><p>typescript处理迭代器、异步等的降级策略是生成一堆降级代码，也可以使用”importHelpers”和”tslib”来提取公共代码。但通过这个配置，可以自定义降级代码了。具体参照文档。</p>\n<h2 id=\"preserveConstEnums\"><a href=\"#preserveConstEnums\" class=\"headerlink\" title=\"preserveConstEnums\"></a>preserveConstEnums</h2><p>是否在编辑结果中移除<code>const enum</code>的定义。因为javascript没有enum概念，typescript会将enum的引用编译成具体的值。如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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=\"keyword\">enum</span> <span class=\"title class_\">Album</span> &#123;</span><br><span class=\"line\">  <span class=\"title class_\">JimmyEatWorldFutures</span> = <span class=\"number\">1</span>,</span><br><span class=\"line\">  <span class=\"title class_\">TubRingZooHypothesis</span> = <span class=\"number\">2</span>,</span><br><span class=\"line\">  <span class=\"title class_\">DogFashionDiscoAdultery</span> = <span class=\"number\">3</span>,</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"> </span><br><span class=\"line\"><span class=\"keyword\">const</span> selectedAlbum = <span class=\"title class_\">Album</span>.<span class=\"property\">JimmyEatWorldFutures</span>;</span><br><span class=\"line\"><span class=\"keyword\">if</span> (selectedAlbum === <span class=\"title class_\">Album</span>.<span class=\"property\">JimmyEatWorldFutures</span>) &#123;</span><br><span class=\"line\">  <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;That is a great choice.&quot;</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>编译结果如下：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&quot;use strict&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">const</span> selectedAlbum = <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>;</span><br><span class=\"line\"><span class=\"keyword\">if</span> (selectedAlbum === <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>) &#123;</span><br><span class=\"line\">    <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;That is a great choice.&quot;</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>如果开启此项，则编译结果中会描述出该enum的结构。如下：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&quot;use strict&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">var</span> <span class=\"title class_\">Album</span>;</span><br><span class=\"line\">(<span class=\"keyword\">function</span> (<span class=\"params\">Album</span>) &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Album</span>[<span class=\"title class_\">Album</span>[<span class=\"string\">&quot;JimmyEatWorldFutures&quot;</span>] = <span class=\"number\">1</span>] = <span class=\"string\">&quot;JimmyEatWorldFutures&quot;</span>;</span><br><span class=\"line\">    <span class=\"title class_\">Album</span>[<span class=\"title class_\">Album</span>[<span class=\"string\">&quot;TubRingZooHypothesis&quot;</span>] = <span class=\"number\">2</span>] = <span class=\"string\">&quot;TubRingZooHypothesis&quot;</span>;</span><br><span class=\"line\">    <span class=\"title class_\">Album</span>[<span class=\"title class_\">Album</span>[<span class=\"string\">&quot;DogFashionDiscoAdultery&quot;</span>] = <span class=\"number\">3</span>] = <span class=\"string\">&quot;DogFashionDiscoAdultery&quot;</span>;</span><br><span class=\"line\">&#125;)(<span class=\"title class_\">Album</span> || (<span class=\"title class_\">Album</span> = &#123;&#125;));</span><br><span class=\"line\"><span class=\"keyword\">const</span> selectedAlbum = <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>;</span><br><span class=\"line\"><span class=\"keyword\">if</span> (selectedAlbum === <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>) &#123;</span><br><span class=\"line\">    <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;That is a great choice.&quot;</span>);</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"preserveValueImports\"><a href=\"#preserveValueImports\" class=\"headerlink\" title=\"preserveValueImports\"></a>preserveValueImports</h2><p>通常，打包器会将未使用的”import”移除掉，但开启了该特性后，会在编译中保留未使用的”import”。例如：</p>\n<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\">import</span> &#123; <span class=\"title class_\">Animal</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&quot;./animal.js&quot;</span>;</span><br><span class=\"line\"><span class=\"built_in\">eval</span>(<span class=\"string\">&quot;console.log(new Animal().isDangerous())&quot;</span>);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"removeComments\"><a href=\"#removeComments\" class=\"headerlink\" title=\"removeComments\"></a>removeComments</h2><p>移除代码中的注释。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-JavaScript-Support\"><a href=\"#compilerOptions-JavaScript-Support\" class=\"headerlink\" title=\"compilerOptions - JavaScript Support\"></a>compilerOptions - JavaScript Support</h1><p>对javascript文件的支持</p>\n<h2 id=\"allowJs\"><a href=\"#allowJs\" class=\"headerlink\" title=\"allowJs\"></a>allowJs</h2><p>允许<code>.ts</code>文件引用<code>.js</code>文件，这常用在javascript项目升级为typescript的过程中。</p>\n<h2 id=\"checkJs\"><a href=\"#checkJs\" class=\"headerlink\" title=\"checkJs\"></a>checkJs</h2><p>是否开启对<code>.js</code>文件的错误检查。</p>\n<h2 id=\"maxNodeModuleJsDepth\"><a href=\"#maxNodeModuleJsDepth\" class=\"headerlink\" title=\"maxNodeModuleJsDepth\"></a>maxNodeModuleJsDepth</h2><p>为<code>.js</code>文件寻找类型定义文件时，允许的最大依赖深度。</p>\n<p>正常情况下，我们会在<code>.js</code>文件的同级补写<code>.d.ts</code>文件，tsc会很快找到类型定义。但有时候确实要扩大搜索范围去找部分<code>.js</code>文件的类型定义文件。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Interop-Constraints\"><a href=\"#compilerOptions-Interop-Constraints\" class=\"headerlink\" title=\"compilerOptions - Interop Constraints\"></a>compilerOptions - Interop Constraints</h1><p>(模块)互相操作的约束</p>\n<h2 id=\"allowSyntheticDefaultImports\"><a href=\"#allowSyntheticDefaultImports\" class=\"headerlink\" title=\"allowSyntheticDefaultImports\"></a>allowSyntheticDefaultImports</h2><p>允许合成<code>default</code>。</p>\n<p>如果一个模块A没有<code>export default</code>，那么另一个模块B在<code>import defaultA from &#39;./a&#39;</code>的时候，会抛出错误说A中没有default。</p>\n<p>有一个做法是<code>import * as defaultA from &#39;./a&#39;</code>曲线救国，但开启这个配置项后，可以直接使用<code>import defaultA from &#39;./a&#39;</code>这样的语法了。</p>\n<h2 id=\"esModuleInterop\"><a href=\"#esModuleInterop\" class=\"headerlink\" title=\"esModuleInterop\"></a>esModuleInterop</h2><p>esm在使用<code>import default from &#39;xxx&#39;</code>方式导入cjs的时候会抛出一个错误，因为cjs模块中没有default。开启此选项后，typescript会使用一些helpers去兼容cjs的default问题。</p>\n<h2 id=\"forceConsistentCasingInFileNames\"><a href=\"#forceConsistentCasingInFileNames\" class=\"headerlink\" title=\"forceConsistentCasingInFileNames\"></a>forceConsistentCasingInFileNames</h2><p>强制引用的模块文件名，和磁盘中的文件名保持一致的大小写。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Language-and-Environment\"><a href=\"#compilerOptions-Language-and-Environment\" class=\"headerlink\" title=\"compilerOptions - Language and Environment\"></a>compilerOptions - Language and Environment</h1><p>和语言、环境有关的配置项。</p>\n<h2 id=\"jsx\"><a href=\"#jsx\" class=\"headerlink\" title=\"jsx\"></a>jsx</h2><p>如何解析<code>.tsx</code>文件中jsx语法？在2023年，react17+后，用<code>react-jsx</code>就行了。</p>\n<h2 id=\"lib\"><a href=\"#lib\" class=\"headerlink\" title=\"lib\"></a>lib</h2><p>在项目中使用的api类型定义集合。</p>\n<p>ts是需要知道你用的每一个javascript方法、属性的定义的，所以它内置了一批定义（比如Math.abs方法）。但是呢，后面新增方法的定义，需要你手工指定包含，ts才能理解了，比如Array.include方法，你就要包含ES2016。但好在你不需要记住这些，因为当你指定<code>target</code>字段时，lib会被默认设置成对应的值的。</p>\n<p>另外，大部分情况下，我们要访问一些和特定环境有关的特性，比如浏览器里的Dom特性，那么这儿额外引入<code>DOM</code>定义就行了。</p>\n<h2 id=\"target\"><a href=\"#target\" class=\"headerlink\" title=\"target\"></a>target</h2><p>项目编译的目标javascript版本。</p>\n<p>也就是你的目标客户端支持的最低javascript版本。注意它会影响默认的<code>lib</code>配置项。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Compiler-Diagnostics\"><a href=\"#compilerOptions-Compiler-Diagnostics\" class=\"headerlink\" title=\"compilerOptions - Compiler Diagnostics\"></a>compilerOptions - Compiler Diagnostics</h1><p>编译诊断配置项。</p>\n<h2 id=\"diagnostics-x2F-extendedDiagnostics\"><a href=\"#diagnostics-x2F-extendedDiagnostics\" class=\"headerlink\" title=\"diagnostics &#x2F; extendedDiagnostics\"></a>diagnostics &#x2F; extendedDiagnostics</h2><p>打印出编译的信息，比如多少文件、编译时间等。</p>\n<p>extendedDiagnostics包含了diagnostics给出的所有信息，所以用extendedDiagnostics就行了。这是一个开启extendedDiagnostics的编译信息：</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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\">Files:                         143</span><br><span class=\"line\">Lines of Library:            38663</span><br><span class=\"line\">Lines of Definitions:        82578</span><br><span class=\"line\">Symbols:                     73362</span><br><span class=\"line\">Types:                        1495</span><br><span class=\"line\">Parse time:                  0.50s</span><br><span class=\"line\">ResolveModule time:          0.03s</span><br><span class=\"line\">Total time:                  1.01s</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"explainFiles\"><a href=\"#explainFiles\" class=\"headerlink\" title=\"explainFiles\"></a>explainFiles</h2><p>打印出文件被编译的原因，也就是它们的引用链。</p>\n<h2 id=\"listEmittedFiles-x2F-listFiles\"><a href=\"#listEmittedFiles-x2F-listFiles\" class=\"headerlink\" title=\"listEmittedFiles &#x2F; listFiles\"></a>listEmittedFiles &#x2F; listFiles</h2><p>列出参与编译的文件。</p>\n<h2 id=\"traceResolution\"><a href=\"#traceResolution\" class=\"headerlink\" title=\"traceResolution\"></a>traceResolution</h2><p>打印每一个文件的编译流程。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Completeness\"><a href=\"#compilerOptions-Completeness\" class=\"headerlink\" title=\"compilerOptions - Completeness\"></a>compilerOptions - Completeness</h1><p>完整性检测的配置项</p>\n<h2 id=\"skipLibCheck\"><a href=\"#skipLibCheck\" class=\"headerlink\" title=\"skipLibCheck\"></a>skipLibCheck</h2><p>跳过lib库的类型检测。</p>\n"},{"title":"TypeScript的小手段，最后更新2023/12月...","date":"2023-08-02T17:52:04.000Z","url":"typescript-means","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/22](https://github.com/taoliujun/blog/issues/22)\n\n<!--hexo\n---\nurl: typescript-means\ntags:\n  - typescript\n---\n-->\n\nTypeScript有一些小手段，评论区见。\n\n\n- [as断言的另外写法](#issuecomment-1663199481)\n- [as const](#issuecomment-1663206615)\n- [非null | undefined声明](#issuecomment-1663206898)\n- [const enum](#issuecomment-1838108783)\n- [@ts-expect-error](#issuecomment-1841954904)\n- [解构变量可标记为“不使用”](#issuecomment-1842016788)\n\n<!--hexo-->\n\n# as断言的另外写法\n\n```typescript\nconst myCanvas = <HTMLCanvasElement>document.getElementById(\"main_canvas\");\n```\n\n将断言类型写在前面的括号里，等同于：\n\n```typescript\nconst myCanvas = document.getElementById(\"main_canvas\") as HTMLCanvasElement;\n```\n\n但是不能再`.tsx`中使用。\n<!--hexo-->\n\n# as const\n\n```typescript\nfunction test1(name: 'html' | 'css') {\n    console.log(name);\n}\n\nconst obj1 = { name: 'html' };\ntest1(obj1.name);\n```\n\n上面的例子有一个类型错误：`Argument of type 'string' is not assignable to parameter of type '\"html\" | \"css\"'.`，这是因为，ts对可读写的变量，推断出的类型是非字面类型。\n\n改下代码：\n\n```typescript\nconst obj1 = { name: 'html' } as const;\n```\n\n`as const`是断言成该变量的字面类型，关于`const`的字面类型断言解释如下。\n\n```typescript\nlet a = '1';\nconst b = '2';\n```\n\nts对`a`的推断是`string`，对`b`的推断是`'2'`。在ts的类型推断的设计中，它总是尽可能的推断出更广的类型，但是对于`readOnly variable`，因为不可变，它的更广的类型就是字面类型。\n\n得益于 https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481 ，还可以写成`let a = <const>'1';` \n<!--hexo-->\n\n# 非null | undefined声明\n\n有时候虽然声明一个变量类型是`null`，但在某个逻辑中它不可能是`null`，可以使用`!`来表示它不是`null`。\n\n```typescript\nconst d1 = document.getElementById('test1');\n// 'd1' is possibly 'null'\nconsole.log(d1.getBoundingClientRect());\n// it is fine\nconsole.log(d1!.getBoundingClientRect());\n```\n<!--hexo-->\n\n# const enum\n\nts会将`enum`完整的编译出来，如下分别是ts源码和编译后的代码：\n\n```ts\n// 源码\nenum Sex {\n    Man,\n    Woman,\n}\nconst sex = Sex.Man;\n```\n\n```javascript\n// 编译结果\nvar Sex;\n(function (Sex) {\n    Sex[Sex[\"Man\"] = 0] = \"Man\";\n    Sex[Sex[\"Woman\"] = 1] = \"Woman\";\n})(Sex || (Sex = {}));\nconst sex = Sex.Man;\n```\n\n而很多时候，我们只是将`enum`当安全值来用，编译后只保留安全值就行了。加上`const`就可以：\n\n```typescript\n// 源码\nconst enum Sex {\n    Man,\n    Woman,\n}\nconst sex = Sex.Man;\n```\n\n```javascript\n// 编译结果\nconst sex = 0;\n```\n<!--hexo-->\n\n# @ts-expect-error\n\n在一些场景下，我们需要故意传一个错误类型的变量，比如在写单元测试的时候。如下：\n\n```ts\n// util.ts\nfunction test1(p1: number) {\n  // do\n}\n\n// __test__\ntest1('hello');\n```\n\n在如上的单元测试代码中，ts会反馈`'hello'`不是一个number，但这个类型错误正是我们期望的。那么就增加一个标记来处理它：\n\n```ts\n// __test__\n\n// @ts-expect-error\ntest1('hello');\n```\n\n并且，如果这行语句没有类型错误的话，该注释本身会被认为是一个错误，以及时提醒开发者。\n\n```ts\n// Unused '@ts-expect-error' directive.ts(2578)\n// @ts-expect-error\ntest1(123);\n```\n\n它和`ts-ignore`的区别在这：https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error\n<!--hexo-->\n\n# 解构变量可标记为“不使用”\n\n如下语句，ts会告诉你`first`未使用。\n\n```ts\n// 'first' is declared but its value is never read.ts(6133)\nconst [first, second] = [1, 2];\nconsole.log('==', second);\n```\n\n但在场景里，就不需要使用第一个变量，ts提供了一个写法标记来忽略检查未使用的解构变量，就是在变量前加`_`。\n\n```ts\nconst [_first, second] = [1, 2];\nconsole.log('==', second);\n```\n\n**补充：** 以上是ts4.2的特性，在更新的版本里，只要这样写就行了：`const [, second] = [1, 2]`。\n\n\n","source":"_posts/typescript-means.md","raw":"---\ntitle: \"TypeScript的小手段，最后更新2023/12月...\"\ndate: \"2023-08-03T01:52:04Z\"\ncategories:\n  - [TypeScript]\n\nurl: typescript-means\ntags:\n  - typescript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/22](https://github.com/taoliujun/blog/issues/22)\n\n<!--hexo\n---\nurl: typescript-means\ntags:\n  - typescript\n---\n-->\n\nTypeScript有一些小手段，评论区见。\n\n\n- [as断言的另外写法](#issuecomment-1663199481)\n- [as const](#issuecomment-1663206615)\n- [非null | undefined声明](#issuecomment-1663206898)\n- [const enum](#issuecomment-1838108783)\n- [@ts-expect-error](#issuecomment-1841954904)\n- [解构变量可标记为“不使用”](#issuecomment-1842016788)\n\n<!--hexo-->\n\n# as断言的另外写法\n\n```typescript\nconst myCanvas = <HTMLCanvasElement>document.getElementById(\"main_canvas\");\n```\n\n将断言类型写在前面的括号里，等同于：\n\n```typescript\nconst myCanvas = document.getElementById(\"main_canvas\") as HTMLCanvasElement;\n```\n\n但是不能再`.tsx`中使用。\n<!--hexo-->\n\n# as const\n\n```typescript\nfunction test1(name: 'html' | 'css') {\n    console.log(name);\n}\n\nconst obj1 = { name: 'html' };\ntest1(obj1.name);\n```\n\n上面的例子有一个类型错误：`Argument of type 'string' is not assignable to parameter of type '\"html\" | \"css\"'.`，这是因为，ts对可读写的变量，推断出的类型是非字面类型。\n\n改下代码：\n\n```typescript\nconst obj1 = { name: 'html' } as const;\n```\n\n`as const`是断言成该变量的字面类型，关于`const`的字面类型断言解释如下。\n\n```typescript\nlet a = '1';\nconst b = '2';\n```\n\nts对`a`的推断是`string`，对`b`的推断是`'2'`。在ts的类型推断的设计中，它总是尽可能的推断出更广的类型，但是对于`readOnly variable`，因为不可变，它的更广的类型就是字面类型。\n\n得益于 https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481 ，还可以写成`let a = <const>'1';` \n<!--hexo-->\n\n# 非null | undefined声明\n\n有时候虽然声明一个变量类型是`null`，但在某个逻辑中它不可能是`null`，可以使用`!`来表示它不是`null`。\n\n```typescript\nconst d1 = document.getElementById('test1');\n// 'd1' is possibly 'null'\nconsole.log(d1.getBoundingClientRect());\n// it is fine\nconsole.log(d1!.getBoundingClientRect());\n```\n<!--hexo-->\n\n# const enum\n\nts会将`enum`完整的编译出来，如下分别是ts源码和编译后的代码：\n\n```ts\n// 源码\nenum Sex {\n    Man,\n    Woman,\n}\nconst sex = Sex.Man;\n```\n\n```javascript\n// 编译结果\nvar Sex;\n(function (Sex) {\n    Sex[Sex[\"Man\"] = 0] = \"Man\";\n    Sex[Sex[\"Woman\"] = 1] = \"Woman\";\n})(Sex || (Sex = {}));\nconst sex = Sex.Man;\n```\n\n而很多时候，我们只是将`enum`当安全值来用，编译后只保留安全值就行了。加上`const`就可以：\n\n```typescript\n// 源码\nconst enum Sex {\n    Man,\n    Woman,\n}\nconst sex = Sex.Man;\n```\n\n```javascript\n// 编译结果\nconst sex = 0;\n```\n<!--hexo-->\n\n# @ts-expect-error\n\n在一些场景下，我们需要故意传一个错误类型的变量，比如在写单元测试的时候。如下：\n\n```ts\n// util.ts\nfunction test1(p1: number) {\n  // do\n}\n\n// __test__\ntest1('hello');\n```\n\n在如上的单元测试代码中，ts会反馈`'hello'`不是一个number，但这个类型错误正是我们期望的。那么就增加一个标记来处理它：\n\n```ts\n// __test__\n\n// @ts-expect-error\ntest1('hello');\n```\n\n并且，如果这行语句没有类型错误的话，该注释本身会被认为是一个错误，以及时提醒开发者。\n\n```ts\n// Unused '@ts-expect-error' directive.ts(2578)\n// @ts-expect-error\ntest1(123);\n```\n\n它和`ts-ignore`的区别在这：https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error\n<!--hexo-->\n\n# 解构变量可标记为“不使用”\n\n如下语句，ts会告诉你`first`未使用。\n\n```ts\n// 'first' is declared but its value is never read.ts(6133)\nconst [first, second] = [1, 2];\nconsole.log('==', second);\n```\n\n但在场景里，就不需要使用第一个变量，ts提供了一个写法标记来忽略检查未使用的解构变量，就是在变量前加`_`。\n\n```ts\nconst [_first, second] = [1, 2];\nconsole.log('==', second);\n```\n\n**补充：** 以上是ts4.2的特性，在更新的版本里，只要这样写就行了：`const [, second] = [1, 2]`。\n\n\n","slug":"typescript-means","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvyd001ujaot1vergh6f","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/22\">https://github.com/taoliujun/blog/issues/22</a></p>\n<!--hexo\n---\nurl: typescript-means\ntags:\n  - typescript\n---\n-->\n\n<p>TypeScript有一些小手段，评论区见。</p>\n<ul>\n<li><a href=\"#issuecomment-1663199481\">as断言的另外写法</a></li>\n<li><a href=\"#issuecomment-1663206615\">as const</a></li>\n<li><a href=\"#issuecomment-1663206898\">非null | undefined声明</a></li>\n<li><a href=\"#issuecomment-1838108783\">const enum</a></li>\n<li><a href=\"#issuecomment-1841954904\">@ts-expect-error</a></li>\n<li><a href=\"#issuecomment-1842016788\">解构变量可标记为“不使用”</a></li>\n</ul>\n<!--hexo-->\n\n<h1 id=\"as断言的另外写法\"><a href=\"#as断言的另外写法\" class=\"headerlink\" title=\"as断言的另外写法\"></a>as断言的另外写法</h1><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\">const</span> myCanvas = &lt;<span class=\"title class_\">HTMLCanvasElement</span>&gt;<span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementById</span>(<span class=\"string\">&quot;main_canvas&quot;</span>);</span><br></pre></td></tr></table></figure>\n\n<p>将断言类型写在前面的括号里，等同于：</p>\n<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\">const</span> myCanvas = <span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementById</span>(<span class=\"string\">&quot;main_canvas&quot;</span>) <span class=\"keyword\">as</span> <span class=\"title class_\">HTMLCanvasElement</span>;</span><br></pre></td></tr></table></figure>\n\n<p>但是不能再<code>.tsx</code>中使用。</p>\n<!--hexo-->\n\n<h1 id=\"as-const\"><a href=\"#as-const\" class=\"headerlink\" title=\"as const\"></a>as const</h1><figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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_\">test1</span>(<span class=\"params\">name: <span class=\"string\">&#x27;html&#x27;</span> | <span class=\"string\">&#x27;css&#x27;</span></span>) &#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><br><span class=\"line\"><span class=\"keyword\">const</span> obj1 = &#123; <span class=\"attr\">name</span>: <span class=\"string\">&#x27;html&#x27;</span> &#125;;</span><br><span class=\"line\"><span class=\"title function_\">test1</span>(obj1.<span class=\"property\">name</span>);</span><br></pre></td></tr></table></figure>\n\n<p>上面的例子有一个类型错误：<code>Argument of type &#39;string&#39; is not assignable to parameter of type &#39;&quot;html&quot; | &quot;css&quot;&#39;.</code>，这是因为，ts对可读写的变量，推断出的类型是非字面类型。</p>\n<p>改下代码：</p>\n<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\">const</span> obj1 = &#123; <span class=\"attr\">name</span>: <span class=\"string\">&#x27;html&#x27;</span> &#125; <span class=\"keyword\">as</span> <span class=\"keyword\">const</span>;</span><br></pre></td></tr></table></figure>\n\n<p><code>as const</code>是断言成该变量的字面类型，关于<code>const</code>的字面类型断言解释如下。</p>\n<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> a = <span class=\"string\">&#x27;1&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">const</span> b = <span class=\"string\">&#x27;2&#x27;</span>;</span><br></pre></td></tr></table></figure>\n\n<p>ts对<code>a</code>的推断是<code>string</code>，对<code>b</code>的推断是<code>&#39;2&#39;</code>。在ts的类型推断的设计中，它总是尽可能的推断出更广的类型，但是对于<code>readOnly variable</code>，因为不可变，它的更广的类型就是字面类型。</p>\n<p>得益于 <a href=\"https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481\">https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481</a> ，还可以写成<code>let a = &lt;const&gt;&#39;1&#39;;</code> </p>\n<!--hexo-->\n\n<h1 id=\"非null-undefined声明\"><a href=\"#非null-undefined声明\" class=\"headerlink\" title=\"非null | undefined声明\"></a>非null | undefined声明</h1><p>有时候虽然声明一个变量类型是<code>null</code>，但在某个逻辑中它不可能是<code>null</code>，可以使用<code>!</code>来表示它不是<code>null</code>。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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> d1 = <span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementById</span>(<span class=\"string\">&#x27;test1&#x27;</span>);</span><br><span class=\"line\"><span class=\"comment\">// &#x27;d1&#x27; is possibly &#x27;null&#x27;</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(d1.<span class=\"title function_\">getBoundingClientRect</span>());</span><br><span class=\"line\"><span class=\"comment\">// it is fine</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(d1!.<span class=\"title function_\">getBoundingClientRect</span>());</span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"const-enum\"><a href=\"#const-enum\" class=\"headerlink\" title=\"const enum\"></a>const enum</h1><p>ts会将<code>enum</code>完整的编译出来，如下分别是ts源码和编译后的代码：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\">enum</span> <span class=\"title class_\">Sex</span> &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Man</span>,</span><br><span class=\"line\">    <span class=\"title class_\">Woman</span>,</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> sex = <span class=\"title class_\">Sex</span>.<span class=\"property\">Man</span>;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 编译结果</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> <span class=\"title class_\">Sex</span>;</span><br><span class=\"line\">(<span class=\"keyword\">function</span> (<span class=\"params\">Sex</span>) &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Sex</span>[<span class=\"title class_\">Sex</span>[<span class=\"string\">&quot;Man&quot;</span>] = <span class=\"number\">0</span>] = <span class=\"string\">&quot;Man&quot;</span>;</span><br><span class=\"line\">    <span class=\"title class_\">Sex</span>[<span class=\"title class_\">Sex</span>[<span class=\"string\">&quot;Woman&quot;</span>] = <span class=\"number\">1</span>] = <span class=\"string\">&quot;Woman&quot;</span>;</span><br><span class=\"line\">&#125;)(<span class=\"title class_\">Sex</span> || (<span class=\"title class_\">Sex</span> = &#123;&#125;));</span><br><span class=\"line\"><span class=\"keyword\">const</span> sex = <span class=\"title class_\">Sex</span>.<span class=\"property\">Man</span>;</span><br></pre></td></tr></table></figure>\n\n<p>而很多时候，我们只是将<code>enum</code>当安全值来用，编译后只保留安全值就行了。加上<code>const</code>就可以：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\">const</span> <span class=\"keyword\">enum</span> <span class=\"title class_\">Sex</span> &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Man</span>,</span><br><span class=\"line\">    <span class=\"title class_\">Woman</span>,</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> sex = <span class=\"title class_\">Sex</span>.<span class=\"property\">Man</span>;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight javascript\"><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\"><span class=\"keyword\">const</span> sex = <span class=\"number\">0</span>;</span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"ts-expect-error\"><a href=\"#ts-expect-error\" class=\"headerlink\" title=\"@ts-expect-error\"></a>@ts-expect-error</h1><p>在一些场景下，我们需要故意传一个错误类型的变量，比如在写单元测试的时候。如下：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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\">// util.ts</span></span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">test1</span>(<span class=\"params\">p1: <span class=\"built_in\">number</span></span>) &#123;</span><br><span class=\"line\">  <span class=\"comment\">// do</span></span><br><span class=\"line\">&#125;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// __test__</span></span><br><span class=\"line\"><span class=\"title function_\">test1</span>(<span class=\"string\">&#x27;hello&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<p>在如上的单元测试代码中，ts会反馈<code>&#39;hello&#39;</code>不是一个number，但这个类型错误正是我们期望的。那么就增加一个标记来处理它：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><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\">// __test__</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// @ts-expect-error</span></span><br><span class=\"line\"><span class=\"title function_\">test1</span>(<span class=\"string\">&#x27;hello&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<p>并且，如果这行语句没有类型错误的话，该注释本身会被认为是一个错误，以及时提醒开发者。</p>\n<figure class=\"highlight ts\"><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\">// Unused &#x27;@ts-expect-error&#x27; directive.ts(2578)</span></span><br><span class=\"line\"><span class=\"comment\">// @ts-expect-error</span></span><br><span class=\"line\"><span class=\"title function_\">test1</span>(<span class=\"number\">123</span>);</span><br></pre></td></tr></table></figure>\n\n<p>它和<code>ts-ignore</code>的区别在这：<a href=\"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error\">https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error</a></p>\n<!--hexo-->\n\n<h1 id=\"解构变量可标记为“不使用”\"><a href=\"#解构变量可标记为“不使用”\" class=\"headerlink\" title=\"解构变量可标记为“不使用”\"></a>解构变量可标记为“不使用”</h1><p>如下语句，ts会告诉你<code>first</code>未使用。</p>\n<figure class=\"highlight ts\"><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\">// &#x27;first&#x27; is declared but its value is never read.ts(6133)</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> [first, second] = [<span class=\"number\">1</span>, <span class=\"number\">2</span>];</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&#x27;==&#x27;</span>, second);</span><br></pre></td></tr></table></figure>\n\n<p>但在场景里，就不需要使用第一个变量，ts提供了一个写法标记来忽略检查未使用的解构变量，就是在变量前加<code>_</code>。</p>\n<figure class=\"highlight ts\"><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> [_first, second] = [<span class=\"number\">1</span>, <span class=\"number\">2</span>];</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&#x27;==&#x27;</span>, second);</span><br></pre></td></tr></table></figure>\n\n<p><strong>补充：</strong> 以上是ts4.2的特性，在更新的版本里，只要这样写就行了：<code>const [, second] = [1, 2]</code>。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/22\">https://github.com/taoliujun/blog/issues/22</a></p>\n<!--hexo\n---\nurl: typescript-means\ntags:\n  - typescript\n---\n-->\n\n<p>TypeScript有一些小手段，评论区见。</p>\n<ul>\n<li><a href=\"#issuecomment-1663199481\">as断言的另外写法</a></li>\n<li><a href=\"#issuecomment-1663206615\">as const</a></li>\n<li><a href=\"#issuecomment-1663206898\">非null | undefined声明</a></li>\n<li><a href=\"#issuecomment-1838108783\">const enum</a></li>\n<li><a href=\"#issuecomment-1841954904\">@ts-expect-error</a></li>\n<li><a href=\"#issuecomment-1842016788\">解构变量可标记为“不使用”</a></li>\n</ul>\n<!--hexo-->\n\n<h1 id=\"as断言的另外写法\"><a href=\"#as断言的另外写法\" class=\"headerlink\" title=\"as断言的另外写法\"></a>as断言的另外写法</h1><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\">const</span> myCanvas = &lt;<span class=\"title class_\">HTMLCanvasElement</span>&gt;<span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementById</span>(<span class=\"string\">&quot;main_canvas&quot;</span>);</span><br></pre></td></tr></table></figure>\n\n<p>将断言类型写在前面的括号里，等同于：</p>\n<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\">const</span> myCanvas = <span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementById</span>(<span class=\"string\">&quot;main_canvas&quot;</span>) <span class=\"keyword\">as</span> <span class=\"title class_\">HTMLCanvasElement</span>;</span><br></pre></td></tr></table></figure>\n\n<p>但是不能再<code>.tsx</code>中使用。</p>\n<!--hexo-->\n\n<h1 id=\"as-const\"><a href=\"#as-const\" class=\"headerlink\" title=\"as const\"></a>as const</h1><figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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_\">test1</span>(<span class=\"params\">name: <span class=\"string\">&#x27;html&#x27;</span> | <span class=\"string\">&#x27;css&#x27;</span></span>) &#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><br><span class=\"line\"><span class=\"keyword\">const</span> obj1 = &#123; <span class=\"attr\">name</span>: <span class=\"string\">&#x27;html&#x27;</span> &#125;;</span><br><span class=\"line\"><span class=\"title function_\">test1</span>(obj1.<span class=\"property\">name</span>);</span><br></pre></td></tr></table></figure>\n\n<p>上面的例子有一个类型错误：<code>Argument of type &#39;string&#39; is not assignable to parameter of type &#39;&quot;html&quot; | &quot;css&quot;&#39;.</code>，这是因为，ts对可读写的变量，推断出的类型是非字面类型。</p>\n<p>改下代码：</p>\n<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\">const</span> obj1 = &#123; <span class=\"attr\">name</span>: <span class=\"string\">&#x27;html&#x27;</span> &#125; <span class=\"keyword\">as</span> <span class=\"keyword\">const</span>;</span><br></pre></td></tr></table></figure>\n\n<p><code>as const</code>是断言成该变量的字面类型，关于<code>const</code>的字面类型断言解释如下。</p>\n<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> a = <span class=\"string\">&#x27;1&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">const</span> b = <span class=\"string\">&#x27;2&#x27;</span>;</span><br></pre></td></tr></table></figure>\n\n<p>ts对<code>a</code>的推断是<code>string</code>，对<code>b</code>的推断是<code>&#39;2&#39;</code>。在ts的类型推断的设计中，它总是尽可能的推断出更广的类型，但是对于<code>readOnly variable</code>，因为不可变，它的更广的类型就是字面类型。</p>\n<p>得益于 <a href=\"https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481\">https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481</a> ，还可以写成<code>let a = &lt;const&gt;&#39;1&#39;;</code> </p>\n<!--hexo-->\n\n<h1 id=\"非null-undefined声明\"><a href=\"#非null-undefined声明\" class=\"headerlink\" title=\"非null | undefined声明\"></a>非null | undefined声明</h1><p>有时候虽然声明一个变量类型是<code>null</code>，但在某个逻辑中它不可能是<code>null</code>，可以使用<code>!</code>来表示它不是<code>null</code>。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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> d1 = <span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementById</span>(<span class=\"string\">&#x27;test1&#x27;</span>);</span><br><span class=\"line\"><span class=\"comment\">// &#x27;d1&#x27; is possibly &#x27;null&#x27;</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(d1.<span class=\"title function_\">getBoundingClientRect</span>());</span><br><span class=\"line\"><span class=\"comment\">// it is fine</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(d1!.<span class=\"title function_\">getBoundingClientRect</span>());</span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"const-enum\"><a href=\"#const-enum\" class=\"headerlink\" title=\"const enum\"></a>const enum</h1><p>ts会将<code>enum</code>完整的编译出来，如下分别是ts源码和编译后的代码：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\">enum</span> <span class=\"title class_\">Sex</span> &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Man</span>,</span><br><span class=\"line\">    <span class=\"title class_\">Woman</span>,</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> sex = <span class=\"title class_\">Sex</span>.<span class=\"property\">Man</span>;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 编译结果</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> <span class=\"title class_\">Sex</span>;</span><br><span class=\"line\">(<span class=\"keyword\">function</span> (<span class=\"params\">Sex</span>) &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Sex</span>[<span class=\"title class_\">Sex</span>[<span class=\"string\">&quot;Man&quot;</span>] = <span class=\"number\">0</span>] = <span class=\"string\">&quot;Man&quot;</span>;</span><br><span class=\"line\">    <span class=\"title class_\">Sex</span>[<span class=\"title class_\">Sex</span>[<span class=\"string\">&quot;Woman&quot;</span>] = <span class=\"number\">1</span>] = <span class=\"string\">&quot;Woman&quot;</span>;</span><br><span class=\"line\">&#125;)(<span class=\"title class_\">Sex</span> || (<span class=\"title class_\">Sex</span> = &#123;&#125;));</span><br><span class=\"line\"><span class=\"keyword\">const</span> sex = <span class=\"title class_\">Sex</span>.<span class=\"property\">Man</span>;</span><br></pre></td></tr></table></figure>\n\n<p>而很多时候，我们只是将<code>enum</code>当安全值来用，编译后只保留安全值就行了。加上<code>const</code>就可以：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\">const</span> <span class=\"keyword\">enum</span> <span class=\"title class_\">Sex</span> &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Man</span>,</span><br><span class=\"line\">    <span class=\"title class_\">Woman</span>,</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> sex = <span class=\"title class_\">Sex</span>.<span class=\"property\">Man</span>;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight javascript\"><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\"><span class=\"keyword\">const</span> sex = <span class=\"number\">0</span>;</span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"ts-expect-error\"><a href=\"#ts-expect-error\" class=\"headerlink\" title=\"@ts-expect-error\"></a>@ts-expect-error</h1><p>在一些场景下，我们需要故意传一个错误类型的变量，比如在写单元测试的时候。如下：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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\">// util.ts</span></span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">test1</span>(<span class=\"params\">p1: <span class=\"built_in\">number</span></span>) &#123;</span><br><span class=\"line\">  <span class=\"comment\">// do</span></span><br><span class=\"line\">&#125;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// __test__</span></span><br><span class=\"line\"><span class=\"title function_\">test1</span>(<span class=\"string\">&#x27;hello&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<p>在如上的单元测试代码中，ts会反馈<code>&#39;hello&#39;</code>不是一个number，但这个类型错误正是我们期望的。那么就增加一个标记来处理它：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><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\">// __test__</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// @ts-expect-error</span></span><br><span class=\"line\"><span class=\"title function_\">test1</span>(<span class=\"string\">&#x27;hello&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<p>并且，如果这行语句没有类型错误的话，该注释本身会被认为是一个错误，以及时提醒开发者。</p>\n<figure class=\"highlight ts\"><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\">// Unused &#x27;@ts-expect-error&#x27; directive.ts(2578)</span></span><br><span class=\"line\"><span class=\"comment\">// @ts-expect-error</span></span><br><span class=\"line\"><span class=\"title function_\">test1</span>(<span class=\"number\">123</span>);</span><br></pre></td></tr></table></figure>\n\n<p>它和<code>ts-ignore</code>的区别在这：<a href=\"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error\">https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error</a></p>\n<!--hexo-->\n\n<h1 id=\"解构变量可标记为“不使用”\"><a href=\"#解构变量可标记为“不使用”\" class=\"headerlink\" title=\"解构变量可标记为“不使用”\"></a>解构变量可标记为“不使用”</h1><p>如下语句，ts会告诉你<code>first</code>未使用。</p>\n<figure class=\"highlight ts\"><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\">// &#x27;first&#x27; is declared but its value is never read.ts(6133)</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> [first, second] = [<span class=\"number\">1</span>, <span class=\"number\">2</span>];</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&#x27;==&#x27;</span>, second);</span><br></pre></td></tr></table></figure>\n\n<p>但在场景里，就不需要使用第一个变量，ts提供了一个写法标记来忽略检查未使用的解构变量，就是在变量前加<code>_</code>。</p>\n<figure class=\"highlight ts\"><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> [_first, second] = [<span class=\"number\">1</span>, <span class=\"number\">2</span>];</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&#x27;==&#x27;</span>, second);</span><br></pre></td></tr></table></figure>\n\n<p><strong>补充：</strong> 以上是ts4.2的特性，在更新的版本里，只要这样写就行了：<code>const [, second] = [1, 2]</code>。</p>\n"},{"title":"Web API - Background Tasks","date":"2024-02-29T19:56:11.000Z","url":"web-api-Background_Tasks_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/55](https://github.com/taoliujun/blog/issues/55)\n\n<!--hexo\n---\nurl: web-api-Background_Tasks_API\ntags:\n  - webapi\n  - Background Tasks\n---\n-->\n\n# Background Task\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API\n\n**Background Tasks**用于在空闲时间执行队列任务，从而**不阻塞事件处理和屏幕更新**。\n\n我们遇到的大部分浏览器卡顿场景是因为代码执行时间太长，阻塞了用户交互、DOM绘制。\n\n在以前，可以将耗时任务分为若干份，每一份执行N次任务，每M毫秒执行一份代码，直至所有任务被执行完成。虽然减轻了卡顿率，但存在以下问题：\n\n-   要主观判断N次任务的耗时不超过10ms，在一帧中留下充足的时间去处理交互、DOM绘制等。\n-   不超过10ms的N次任务，在每一帧的瞬时性能中，实际耗时是不一样的。所以如何定义N的值，也是主观而不科学的。\n-   在每一帧中，任务仍然会耗时过长而阻塞交互、绘制。\n\n现在，Background Task提供了方法，获取到当前留下了多少空闲时间，在这段时间里可以尽量的执行若干次任务。但仍需注意，只运行那些**单次耗时时间很短的任务**。\n\n> “单次耗时时间很短”是什么意思？在不同的场景中，这个时间是可以浮动的。\n>\n> -   在用户点击按钮以查看最新文本信息的场景中，这个时间可以定义为100ms，因为用户在此时间后得到反馈，是不觉得卡顿的。\n> -   在用户快速输入文本以反馈到屏幕上、或滚动订单列表的场景中，这个时间要定义为10ms，因为用户在快速的操作中得不到瞬间反馈就容易感受到卡顿。\n\n## 方法\n\n### requestIdleCallback\n\n在空闲时间执行回调。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-apis/Background_Tasks_API/index.html\n\n1. 点击几次\"add task\"按钮，此时没有任务在运行，发现每一秒都流畅打印出任务量。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/342d899c-45cf-4f61-a529-8846282f2028)\n\n2. 点击\"run all tasks\"按钮，发现一次跑完所有任务，耗时几千毫秒，此过程中因为DOM绘制被阻塞，打印也卡住了。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/485c6005-7543-42ab-9096-c5b4fcc9681b)\n\n3. 点击\"run tasks\"按钮，让其循环在空闲时间中跑完所有任务，发现每次执行很少个任务，耗时在几十毫秒，不会阻塞DOM绘制，打印毫无卡顿。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/3b67b0ff-df48-45e9-8c34-6d7327bea1c9)\n\n\n\n\n","source":"_posts/web-api-Background_Tasks_API.md","raw":"---\ntitle: \"Web API - Background Tasks\"\ndate: \"2024-03-01T03:56:11Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-Background_Tasks_API\ntags:\n  - webapi\n  - Background Tasks\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/55](https://github.com/taoliujun/blog/issues/55)\n\n<!--hexo\n---\nurl: web-api-Background_Tasks_API\ntags:\n  - webapi\n  - Background Tasks\n---\n-->\n\n# Background Task\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API\n\n**Background Tasks**用于在空闲时间执行队列任务，从而**不阻塞事件处理和屏幕更新**。\n\n我们遇到的大部分浏览器卡顿场景是因为代码执行时间太长，阻塞了用户交互、DOM绘制。\n\n在以前，可以将耗时任务分为若干份，每一份执行N次任务，每M毫秒执行一份代码，直至所有任务被执行完成。虽然减轻了卡顿率，但存在以下问题：\n\n-   要主观判断N次任务的耗时不超过10ms，在一帧中留下充足的时间去处理交互、DOM绘制等。\n-   不超过10ms的N次任务，在每一帧的瞬时性能中，实际耗时是不一样的。所以如何定义N的值，也是主观而不科学的。\n-   在每一帧中，任务仍然会耗时过长而阻塞交互、绘制。\n\n现在，Background Task提供了方法，获取到当前留下了多少空闲时间，在这段时间里可以尽量的执行若干次任务。但仍需注意，只运行那些**单次耗时时间很短的任务**。\n\n> “单次耗时时间很短”是什么意思？在不同的场景中，这个时间是可以浮动的。\n>\n> -   在用户点击按钮以查看最新文本信息的场景中，这个时间可以定义为100ms，因为用户在此时间后得到反馈，是不觉得卡顿的。\n> -   在用户快速输入文本以反馈到屏幕上、或滚动订单列表的场景中，这个时间要定义为10ms，因为用户在快速的操作中得不到瞬间反馈就容易感受到卡顿。\n\n## 方法\n\n### requestIdleCallback\n\n在空闲时间执行回调。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-apis/Background_Tasks_API/index.html\n\n1. 点击几次\"add task\"按钮，此时没有任务在运行，发现每一秒都流畅打印出任务量。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/342d899c-45cf-4f61-a529-8846282f2028)\n\n2. 点击\"run all tasks\"按钮，发现一次跑完所有任务，耗时几千毫秒，此过程中因为DOM绘制被阻塞，打印也卡住了。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/485c6005-7543-42ab-9096-c5b4fcc9681b)\n\n3. 点击\"run tasks\"按钮，让其循环在空闲时间中跑完所有任务，发现每次执行很少个任务，耗时在几十毫秒，不会阻塞DOM绘制，打印毫无卡顿。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/3b67b0ff-df48-45e9-8c34-6d7327bea1c9)\n\n\n\n\n","slug":"web-api-Background_Tasks_API","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvyd001xjaotciex7a91","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/55\">https://github.com/taoliujun/blog/issues/55</a></p>\n<!--hexo\n---\nurl: web-api-Background_Tasks_API\ntags:\n  - webapi\n  - Background Tasks\n---\n-->\n\n<h1 id=\"Background-Task\"><a href=\"#Background-Task\" class=\"headerlink\" title=\"Background Task\"></a>Background Task</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API\">https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API</a></p>\n</blockquote>\n<p><strong>Background Tasks</strong>用于在空闲时间执行队列任务，从而<strong>不阻塞事件处理和屏幕更新</strong>。</p>\n<p>我们遇到的大部分浏览器卡顿场景是因为代码执行时间太长，阻塞了用户交互、DOM绘制。</p>\n<p>在以前，可以将耗时任务分为若干份，每一份执行N次任务，每M毫秒执行一份代码，直至所有任务被执行完成。虽然减轻了卡顿率，但存在以下问题：</p>\n<ul>\n<li>要主观判断N次任务的耗时不超过10ms，在一帧中留下充足的时间去处理交互、DOM绘制等。</li>\n<li>不超过10ms的N次任务，在每一帧的瞬时性能中，实际耗时是不一样的。所以如何定义N的值，也是主观而不科学的。</li>\n<li>在每一帧中，任务仍然会耗时过长而阻塞交互、绘制。</li>\n</ul>\n<p>现在，Background Task提供了方法，获取到当前留下了多少空闲时间，在这段时间里可以尽量的执行若干次任务。但仍需注意，只运行那些<strong>单次耗时时间很短的任务</strong>。</p>\n<blockquote>\n<p>“单次耗时时间很短”是什么意思？在不同的场景中，这个时间是可以浮动的。</p>\n<ul>\n<li>在用户点击按钮以查看最新文本信息的场景中，这个时间可以定义为100ms，因为用户在此时间后得到反馈，是不觉得卡顿的。</li>\n<li>在用户快速输入文本以反馈到屏幕上、或滚动订单列表的场景中，这个时间要定义为10ms，因为用户在快速的操作中得不到瞬间反馈就容易感受到卡顿。</li>\n</ul>\n</blockquote>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"requestIdleCallback\"><a href=\"#requestIdleCallback\" class=\"headerlink\" title=\"requestIdleCallback\"></a>requestIdleCallback</h3><p>在空闲时间执行回调。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-apis/Background_Tasks_API/index.html\">https://taoliujun.github.io/example/web-apis/Background_Tasks_API/index.html</a></p>\n<ol>\n<li>点击几次”add task”按钮，此时没有任务在运行，发现每一秒都流畅打印出任务量。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/342d899c-45cf-4f61-a529-8846282f2028\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>点击”run all tasks”按钮，发现一次跑完所有任务，耗时几千毫秒，此过程中因为DOM绘制被阻塞，打印也卡住了。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/485c6005-7543-42ab-9096-c5b4fcc9681b\" alt=\"image\"></p>\n<ol start=\"3\">\n<li>点击”run tasks”按钮，让其循环在空闲时间中跑完所有任务，发现每次执行很少个任务，耗时在几十毫秒，不会阻塞DOM绘制，打印毫无卡顿。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/3b67b0ff-df48-45e9-8c34-6d7327bea1c9\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/55\">https://github.com/taoliujun/blog/issues/55</a></p>\n<!--hexo\n---\nurl: web-api-Background_Tasks_API\ntags:\n  - webapi\n  - Background Tasks\n---\n-->\n\n<h1 id=\"Background-Task\"><a href=\"#Background-Task\" class=\"headerlink\" title=\"Background Task\"></a>Background Task</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API\">https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API</a></p>\n</blockquote>\n<p><strong>Background Tasks</strong>用于在空闲时间执行队列任务，从而<strong>不阻塞事件处理和屏幕更新</strong>。</p>\n<p>我们遇到的大部分浏览器卡顿场景是因为代码执行时间太长，阻塞了用户交互、DOM绘制。</p>\n<p>在以前，可以将耗时任务分为若干份，每一份执行N次任务，每M毫秒执行一份代码，直至所有任务被执行完成。虽然减轻了卡顿率，但存在以下问题：</p>\n<ul>\n<li>要主观判断N次任务的耗时不超过10ms，在一帧中留下充足的时间去处理交互、DOM绘制等。</li>\n<li>不超过10ms的N次任务，在每一帧的瞬时性能中，实际耗时是不一样的。所以如何定义N的值，也是主观而不科学的。</li>\n<li>在每一帧中，任务仍然会耗时过长而阻塞交互、绘制。</li>\n</ul>\n<p>现在，Background Task提供了方法，获取到当前留下了多少空闲时间，在这段时间里可以尽量的执行若干次任务。但仍需注意，只运行那些<strong>单次耗时时间很短的任务</strong>。</p>\n<blockquote>\n<p>“单次耗时时间很短”是什么意思？在不同的场景中，这个时间是可以浮动的。</p>\n<ul>\n<li>在用户点击按钮以查看最新文本信息的场景中，这个时间可以定义为100ms，因为用户在此时间后得到反馈，是不觉得卡顿的。</li>\n<li>在用户快速输入文本以反馈到屏幕上、或滚动订单列表的场景中，这个时间要定义为10ms，因为用户在快速的操作中得不到瞬间反馈就容易感受到卡顿。</li>\n</ul>\n</blockquote>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"requestIdleCallback\"><a href=\"#requestIdleCallback\" class=\"headerlink\" title=\"requestIdleCallback\"></a>requestIdleCallback</h3><p>在空闲时间执行回调。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-apis/Background_Tasks_API/index.html\">https://taoliujun.github.io/example/web-apis/Background_Tasks_API/index.html</a></p>\n<ol>\n<li>点击几次”add task”按钮，此时没有任务在运行，发现每一秒都流畅打印出任务量。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/342d899c-45cf-4f61-a529-8846282f2028\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>点击”run all tasks”按钮，发现一次跑完所有任务，耗时几千毫秒，此过程中因为DOM绘制被阻塞，打印也卡住了。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/485c6005-7543-42ab-9096-c5b4fcc9681b\" alt=\"image\"></p>\n<ol start=\"3\">\n<li>点击”run tasks”按钮，让其循环在空闲时间中跑完所有任务，发现每次执行很少个任务，耗时在几十毫秒，不会阻塞DOM绘制，打印毫无卡顿。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/3b67b0ff-df48-45e9-8c34-6d7327bea1c9\" alt=\"image\"></p>\n"},{"title":"Web API - Badging","date":"2024-02-28T00:22:00.000Z","url":"web-api-Badging_api","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/50](https://github.com/taoliujun/blog/issues/50)\n\n<!--hexo\n---\nurl: web-api-Badging_api\ntags:\n  - webapi\n  - Badging\n---\n-->\n\n# Badging\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Badging_API\n\n**Badging**用于在Web APP的图标上**标记徽章**，常用于通知用户有新消息啦，它有3种状态：\n\n\n| 状态 | 描述 | 效果 |\n| --- | --- | --- |\n| nothing | 什么都没有 | ![image](https://github.com/taoliujun/blog/assets/5689134/0410ffdf-fbf3-41aa-b3b5-de0aa2ceb671) |\n| flag | 一个圆点 | ![image](https://github.com/taoliujun/blog/assets/5689134/965f2c77-8b85-443f-8f97-da491df88354) |\n| integer | 一个数字，最大显示99+ | ![image](https://github.com/taoliujun/blog/assets/5689134/f0333758-125b-40b9-a88b-285346730816) |\n\n## 方法\n\n### setAppBadge\n\n设置徽章。\n\n```javascript\n// 设置圆点\nnavigator.setAppBadge();\n// 设置数字\nnavigator.setAppBadge(12);\n// 设置大数字\nnavigator.setAppBadge(1234);\n```\n\n### clearAppBadge\n\n清空徽章。\n\n```javascript\nnavigator.clearAppBadge();\n```\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-apis/Badging_API/index.html\n\n本示例代码较为简单，直接打开查看源码即可。\n\n\n\n","source":"_posts/web-api-Badging_api.md","raw":"---\ntitle: \"Web API - Badging\"\ndate: \"2024-02-28T08:22:00Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-Badging_api\ntags:\n  - webapi\n  - Badging\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/50](https://github.com/taoliujun/blog/issues/50)\n\n<!--hexo\n---\nurl: web-api-Badging_api\ntags:\n  - webapi\n  - Badging\n---\n-->\n\n# Badging\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Badging_API\n\n**Badging**用于在Web APP的图标上**标记徽章**，常用于通知用户有新消息啦，它有3种状态：\n\n\n| 状态 | 描述 | 效果 |\n| --- | --- | --- |\n| nothing | 什么都没有 | ![image](https://github.com/taoliujun/blog/assets/5689134/0410ffdf-fbf3-41aa-b3b5-de0aa2ceb671) |\n| flag | 一个圆点 | ![image](https://github.com/taoliujun/blog/assets/5689134/965f2c77-8b85-443f-8f97-da491df88354) |\n| integer | 一个数字，最大显示99+ | ![image](https://github.com/taoliujun/blog/assets/5689134/f0333758-125b-40b9-a88b-285346730816) |\n\n## 方法\n\n### setAppBadge\n\n设置徽章。\n\n```javascript\n// 设置圆点\nnavigator.setAppBadge();\n// 设置数字\nnavigator.setAppBadge(12);\n// 设置大数字\nnavigator.setAppBadge(1234);\n```\n\n### clearAppBadge\n\n清空徽章。\n\n```javascript\nnavigator.clearAppBadge();\n```\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-apis/Badging_API/index.html\n\n本示例代码较为简单，直接打开查看源码即可。\n\n\n\n","slug":"web-api-Badging_api","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvye0021jaot1re21auq","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/50\">https://github.com/taoliujun/blog/issues/50</a></p>\n<!--hexo\n---\nurl: web-api-Badging_api\ntags:\n  - webapi\n  - Badging\n---\n-->\n\n<h1 id=\"Badging\"><a href=\"#Badging\" class=\"headerlink\" title=\"Badging\"></a>Badging</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Badging_API\">https://developer.mozilla.org/en-US/docs/Web/API/Badging_API</a></p>\n</blockquote>\n<p><strong>Badging</strong>用于在Web APP的图标上<strong>标记徽章</strong>，常用于通知用户有新消息啦，它有3种状态：</p>\n<table>\n<thead>\n<tr>\n<th>状态</th>\n<th>描述</th>\n<th>效果</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>nothing</td>\n<td>什么都没有</td>\n<td><img src=\"https://github.com/taoliujun/blog/assets/5689134/0410ffdf-fbf3-41aa-b3b5-de0aa2ceb671\" alt=\"image\"></td>\n</tr>\n<tr>\n<td>flag</td>\n<td>一个圆点</td>\n<td><img src=\"https://github.com/taoliujun/blog/assets/5689134/965f2c77-8b85-443f-8f97-da491df88354\" alt=\"image\"></td>\n</tr>\n<tr>\n<td>integer</td>\n<td>一个数字，最大显示99+</td>\n<td><img src=\"https://github.com/taoliujun/blog/assets/5689134/f0333758-125b-40b9-a88b-285346730816\" alt=\"image\"></td>\n</tr>\n</tbody></table>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"setAppBadge\"><a href=\"#setAppBadge\" class=\"headerlink\" title=\"setAppBadge\"></a>setAppBadge</h3><p>设置徽章。</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 设置圆点</span></span><br><span class=\"line\">navigator.<span class=\"title function_\">setAppBadge</span>();</span><br><span class=\"line\"><span class=\"comment\">// 设置数字</span></span><br><span class=\"line\">navigator.<span class=\"title function_\">setAppBadge</span>(<span class=\"number\">12</span>);</span><br><span class=\"line\"><span class=\"comment\">// 设置大数字</span></span><br><span class=\"line\">navigator.<span class=\"title function_\">setAppBadge</span>(<span class=\"number\">1234</span>);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"clearAppBadge\"><a href=\"#clearAppBadge\" class=\"headerlink\" title=\"clearAppBadge\"></a>clearAppBadge</h3><p>清空徽章。</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">navigator.<span class=\"title function_\">clearAppBadge</span>();</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-apis/Badging_API/index.html\">https://taoliujun.github.io/example/web-apis/Badging_API/index.html</a></p>\n<p>本示例代码较为简单，直接打开查看源码即可。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/50\">https://github.com/taoliujun/blog/issues/50</a></p>\n<!--hexo\n---\nurl: web-api-Badging_api\ntags:\n  - webapi\n  - Badging\n---\n-->\n\n<h1 id=\"Badging\"><a href=\"#Badging\" class=\"headerlink\" title=\"Badging\"></a>Badging</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Badging_API\">https://developer.mozilla.org/en-US/docs/Web/API/Badging_API</a></p>\n</blockquote>\n<p><strong>Badging</strong>用于在Web APP的图标上<strong>标记徽章</strong>，常用于通知用户有新消息啦，它有3种状态：</p>\n<table>\n<thead>\n<tr>\n<th>状态</th>\n<th>描述</th>\n<th>效果</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>nothing</td>\n<td>什么都没有</td>\n<td><img src=\"https://github.com/taoliujun/blog/assets/5689134/0410ffdf-fbf3-41aa-b3b5-de0aa2ceb671\" alt=\"image\"></td>\n</tr>\n<tr>\n<td>flag</td>\n<td>一个圆点</td>\n<td><img src=\"https://github.com/taoliujun/blog/assets/5689134/965f2c77-8b85-443f-8f97-da491df88354\" alt=\"image\"></td>\n</tr>\n<tr>\n<td>integer</td>\n<td>一个数字，最大显示99+</td>\n<td><img src=\"https://github.com/taoliujun/blog/assets/5689134/f0333758-125b-40b9-a88b-285346730816\" alt=\"image\"></td>\n</tr>\n</tbody></table>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"setAppBadge\"><a href=\"#setAppBadge\" class=\"headerlink\" title=\"setAppBadge\"></a>setAppBadge</h3><p>设置徽章。</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 设置圆点</span></span><br><span class=\"line\">navigator.<span class=\"title function_\">setAppBadge</span>();</span><br><span class=\"line\"><span class=\"comment\">// 设置数字</span></span><br><span class=\"line\">navigator.<span class=\"title function_\">setAppBadge</span>(<span class=\"number\">12</span>);</span><br><span class=\"line\"><span class=\"comment\">// 设置大数字</span></span><br><span class=\"line\">navigator.<span class=\"title function_\">setAppBadge</span>(<span class=\"number\">1234</span>);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"clearAppBadge\"><a href=\"#clearAppBadge\" class=\"headerlink\" title=\"clearAppBadge\"></a>clearAppBadge</h3><p>清空徽章。</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">navigator.<span class=\"title function_\">clearAppBadge</span>();</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-apis/Badging_API/index.html\">https://taoliujun.github.io/example/web-apis/Badging_API/index.html</a></p>\n<p>本示例代码较为简单，直接打开查看源码即可。</p>\n"},{"title":"Web API - Beacon","date":"2024-02-28T23:21:58.000Z","url":"web-api-Beacon_api","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/53](https://github.com/taoliujun/blog/issues/53)\n\n<!--hexo\n---\nurl: web-api-Beacon_api\ntags:\n  - webapi\n  - Beacon\n---\n-->\n\n# Beacon\n\n> MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API\n\n**Beacon**用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。主要使用场景是发送统计数据。\n\n## 方法\n\n### sendBeacon\n\n通过*POST*发送少量数据到服务器。\n\n```javascript\nnavigator.sendBeacon(url, data);\n```\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-apis/Beacon_API/index.html\n\n1. 创建一个页面，放一个按钮用于发送`manual`统计数据：\n\n```html\n<button onclick=\"javascript:sendData('manual');\">sendData</button>\n```\n\n2. 在页面隐藏、卸载的时候发送`hidden`统计数据：\n\n```javascript\ndocument.addEventListener(\"visibilitychange\", ()=> {\n  if (document.visibilityState === \"hidden\") {\n    sendData('hidden');\n  }\n});\n```\n\n3。 发送统计数据的函数：\n\n```javascript\nlet data = 0;\n\nfunction sendData(source) {\n  data += 1;\n  // getUrl用于获取服务端地址\n  navigator.sendBeacon(getUrl(), new URLSearchParams({ data, source }));\n}\n```\n\n4. 创建服务端，打印*request body*数据以测试点击按钮、关闭页面的效果，发现关闭页面后也发送了数据。\n\n```bash\nbody: [Object: null prototype] { data: '1', source: 'manual' }\nbody: [Object: null prototype] { data: '2', source: 'hidden' }\n```\n\n\n\n\n","source":"_posts/web-api-Beacon_api.md","raw":"---\ntitle: \"Web API - Beacon\"\ndate: \"2024-02-29T07:21:58Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-Beacon_api\ntags:\n  - webapi\n  - Beacon\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/53](https://github.com/taoliujun/blog/issues/53)\n\n<!--hexo\n---\nurl: web-api-Beacon_api\ntags:\n  - webapi\n  - Beacon\n---\n-->\n\n# Beacon\n\n> MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API\n\n**Beacon**用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。主要使用场景是发送统计数据。\n\n## 方法\n\n### sendBeacon\n\n通过*POST*发送少量数据到服务器。\n\n```javascript\nnavigator.sendBeacon(url, data);\n```\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-apis/Beacon_API/index.html\n\n1. 创建一个页面，放一个按钮用于发送`manual`统计数据：\n\n```html\n<button onclick=\"javascript:sendData('manual');\">sendData</button>\n```\n\n2. 在页面隐藏、卸载的时候发送`hidden`统计数据：\n\n```javascript\ndocument.addEventListener(\"visibilitychange\", ()=> {\n  if (document.visibilityState === \"hidden\") {\n    sendData('hidden');\n  }\n});\n```\n\n3。 发送统计数据的函数：\n\n```javascript\nlet data = 0;\n\nfunction sendData(source) {\n  data += 1;\n  // getUrl用于获取服务端地址\n  navigator.sendBeacon(getUrl(), new URLSearchParams({ data, source }));\n}\n```\n\n4. 创建服务端，打印*request body*数据以测试点击按钮、关闭页面的效果，发现关闭页面后也发送了数据。\n\n```bash\nbody: [Object: null prototype] { data: '1', source: 'manual' }\nbody: [Object: null prototype] { data: '2', source: 'hidden' }\n```\n\n\n\n\n","slug":"web-api-Beacon_api","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvyf0025jaot2f5xho76","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/53\">https://github.com/taoliujun/blog/issues/53</a></p>\n<!--hexo\n---\nurl: web-api-Beacon_api\ntags:\n  - webapi\n  - Beacon\n---\n-->\n\n<h1 id=\"Beacon\"><a href=\"#Beacon\" class=\"headerlink\" title=\"Beacon\"></a>Beacon</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API\">https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API</a></p>\n</blockquote>\n<p><strong>Beacon</strong>用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。主要使用场景是发送统计数据。</p>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"sendBeacon\"><a href=\"#sendBeacon\" class=\"headerlink\" title=\"sendBeacon\"></a>sendBeacon</h3><p>通过<em>POST</em>发送少量数据到服务器。</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">navigator.<span class=\"title function_\">sendBeacon</span>(url, data);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-apis/Beacon_API/index.html\">https://taoliujun.github.io/example/web-apis/Beacon_API/index.html</a></p>\n<ol>\n<li>创建一个页面，放一个按钮用于发送<code>manual</code>统计数据：</li>\n</ol>\n<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\">button</span> <span class=\"attr\">onclick</span>=<span class=\"string\">&quot;javascript:sendData(&#x27;manual&#x27;);&quot;</span>&gt;</span>sendData<span class=\"tag\">&lt;/<span class=\"name\">button</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<ol start=\"2\">\n<li>在页面隐藏、卸载的时候发送<code>hidden</code>统计数据：</li>\n</ol>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"variable language_\">document</span>.<span class=\"title function_\">addEventListener</span>(<span class=\"string\">&quot;visibilitychange&quot;</span>, <span class=\"function\">()=&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (<span class=\"variable language_\">document</span>.<span class=\"property\">visibilityState</span> === <span class=\"string\">&quot;hidden&quot;</span>) &#123;</span><br><span class=\"line\">    <span class=\"title function_\">sendData</span>(<span class=\"string\">&#x27;hidden&#x27;</span>);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>3。 发送统计数据的函数：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">let</span> data = <span class=\"number\">0</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">sendData</span>(<span class=\"params\">source</span>) &#123;</span><br><span class=\"line\">  data += <span class=\"number\">1</span>;</span><br><span class=\"line\">  <span class=\"comment\">// getUrl用于获取服务端地址</span></span><br><span class=\"line\">  navigator.<span class=\"title function_\">sendBeacon</span>(<span class=\"title function_\">getUrl</span>(), <span class=\"keyword\">new</span> <span class=\"title class_\">URLSearchParams</span>(&#123; data, source &#125;));</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<ol start=\"4\">\n<li>创建服务端，打印<em>request body</em>数据以测试点击按钮、关闭页面的效果，发现关闭页面后也发送了数据。</li>\n</ol>\n<figure class=\"highlight bash\"><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\">body: [Object: null prototype] &#123; data: <span class=\"string\">&#x27;1&#x27;</span>, <span class=\"built_in\">source</span>: <span class=\"string\">&#x27;manual&#x27;</span> &#125;</span><br><span class=\"line\">body: [Object: null prototype] &#123; data: <span class=\"string\">&#x27;2&#x27;</span>, <span class=\"built_in\">source</span>: <span class=\"string\">&#x27;hidden&#x27;</span> &#125;</span><br></pre></td></tr></table></figure>\n\n\n\n\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/53\">https://github.com/taoliujun/blog/issues/53</a></p>\n<!--hexo\n---\nurl: web-api-Beacon_api\ntags:\n  - webapi\n  - Beacon\n---\n-->\n\n<h1 id=\"Beacon\"><a href=\"#Beacon\" class=\"headerlink\" title=\"Beacon\"></a>Beacon</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API\">https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API</a></p>\n</blockquote>\n<p><strong>Beacon</strong>用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。主要使用场景是发送统计数据。</p>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"sendBeacon\"><a href=\"#sendBeacon\" class=\"headerlink\" title=\"sendBeacon\"></a>sendBeacon</h3><p>通过<em>POST</em>发送少量数据到服务器。</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">navigator.<span class=\"title function_\">sendBeacon</span>(url, data);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-apis/Beacon_API/index.html\">https://taoliujun.github.io/example/web-apis/Beacon_API/index.html</a></p>\n<ol>\n<li>创建一个页面，放一个按钮用于发送<code>manual</code>统计数据：</li>\n</ol>\n<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\">button</span> <span class=\"attr\">onclick</span>=<span class=\"string\">&quot;javascript:sendData(&#x27;manual&#x27;);&quot;</span>&gt;</span>sendData<span class=\"tag\">&lt;/<span class=\"name\">button</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<ol start=\"2\">\n<li>在页面隐藏、卸载的时候发送<code>hidden</code>统计数据：</li>\n</ol>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"variable language_\">document</span>.<span class=\"title function_\">addEventListener</span>(<span class=\"string\">&quot;visibilitychange&quot;</span>, <span class=\"function\">()=&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (<span class=\"variable language_\">document</span>.<span class=\"property\">visibilityState</span> === <span class=\"string\">&quot;hidden&quot;</span>) &#123;</span><br><span class=\"line\">    <span class=\"title function_\">sendData</span>(<span class=\"string\">&#x27;hidden&#x27;</span>);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>3。 发送统计数据的函数：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">let</span> data = <span class=\"number\">0</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">sendData</span>(<span class=\"params\">source</span>) &#123;</span><br><span class=\"line\">  data += <span class=\"number\">1</span>;</span><br><span class=\"line\">  <span class=\"comment\">// getUrl用于获取服务端地址</span></span><br><span class=\"line\">  navigator.<span class=\"title function_\">sendBeacon</span>(<span class=\"title function_\">getUrl</span>(), <span class=\"keyword\">new</span> <span class=\"title class_\">URLSearchParams</span>(&#123; data, source &#125;));</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<ol start=\"4\">\n<li>创建服务端，打印<em>request body</em>数据以测试点击按钮、关闭页面的效果，发现关闭页面后也发送了数据。</li>\n</ol>\n<figure class=\"highlight bash\"><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\">body: [Object: null prototype] &#123; data: <span class=\"string\">&#x27;1&#x27;</span>, <span class=\"built_in\">source</span>: <span class=\"string\">&#x27;manual&#x27;</span> &#125;</span><br><span class=\"line\">body: [Object: null prototype] &#123; data: <span class=\"string\">&#x27;2&#x27;</span>, <span class=\"built_in\">source</span>: <span class=\"string\">&#x27;hidden&#x27;</span> &#125;</span><br></pre></td></tr></table></figure>\n\n\n\n\n"},{"title":"Web API 实践，最后更新2024/02月...","date":"2024-02-28T00:10:53.000Z","url":"web-api-readme","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/49](https://github.com/taoliujun/blog/issues/49)\n\n<!--hexo\n---\nurl: web-api-readme\ntags:\n  - webapi\n---\n-->\n\n[Web API](https://www.w3.org/TR/)的发展日新月异，稍不留神就偷偷的出了新规范，这些规范为项目方案提供了更多的可能性。话说读百遍不如写一遍，计划在一段时间内，对大部分API进行demo实践以加深印象。\n\n> 以 https://developer.mozilla.org/en-US/docs/Web/API 为基础，只实践W3C Recommendation状态的API。\n\n## 目录\n\n- [ ] https://github.com/taoliujun/blog/issues/50\n- [ ] https://github.com/taoliujun/blog/issues/53\n- [ ] https://github.com/taoliujun/blog/issues/55\n\n\n\n","source":"_posts/web-api-readme.md","raw":"---\ntitle: \"Web API 实践，最后更新2024/02月...\"\ndate: \"2024-02-28T08:10:53Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-readme\ntags:\n  - webapi\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/49](https://github.com/taoliujun/blog/issues/49)\n\n<!--hexo\n---\nurl: web-api-readme\ntags:\n  - webapi\n---\n-->\n\n[Web API](https://www.w3.org/TR/)的发展日新月异，稍不留神就偷偷的出了新规范，这些规范为项目方案提供了更多的可能性。话说读百遍不如写一遍，计划在一段时间内，对大部分API进行demo实践以加深印象。\n\n> 以 https://developer.mozilla.org/en-US/docs/Web/API 为基础，只实践W3C Recommendation状态的API。\n\n## 目录\n\n- [ ] https://github.com/taoliujun/blog/issues/50\n- [ ] https://github.com/taoliujun/blog/issues/53\n- [ ] https://github.com/taoliujun/blog/issues/55\n\n\n\n","slug":"web-api-readme","published":1,"updated":"2024-03-01T04:09:20.459Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvyg0028jaotdpc922u5","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/49\">https://github.com/taoliujun/blog/issues/49</a></p>\n<!--hexo\n---\nurl: web-api-readme\ntags:\n  - webapi\n---\n-->\n\n<p><a href=\"https://www.w3.org/TR/\">Web API</a>的发展日新月异，稍不留神就偷偷的出了新规范，这些规范为项目方案提供了更多的可能性。话说读百遍不如写一遍，计划在一段时间内，对大部分API进行demo实践以加深印象。</p>\n<blockquote>\n<p>以 <a href=\"https://developer.mozilla.org/en-US/docs/Web/API\">https://developer.mozilla.org/en-US/docs/Web/API</a> 为基础，只实践W3C Recommendation状态的API。</p>\n</blockquote>\n<h2 id=\"目录\"><a href=\"#目录\" class=\"headerlink\" title=\"目录\"></a>目录</h2><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://github.com/taoliujun/blog/issues/50\">https://github.com/taoliujun/blog/issues/50</a></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://github.com/taoliujun/blog/issues/53\">https://github.com/taoliujun/blog/issues/53</a></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://github.com/taoliujun/blog/issues/55\">https://github.com/taoliujun/blog/issues/55</a></li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/49\">https://github.com/taoliujun/blog/issues/49</a></p>\n<!--hexo\n---\nurl: web-api-readme\ntags:\n  - webapi\n---\n-->\n\n<p><a href=\"https://www.w3.org/TR/\">Web API</a>的发展日新月异，稍不留神就偷偷的出了新规范，这些规范为项目方案提供了更多的可能性。话说读百遍不如写一遍，计划在一段时间内，对大部分API进行demo实践以加深印象。</p>\n<blockquote>\n<p>以 <a href=\"https://developer.mozilla.org/en-US/docs/Web/API\">https://developer.mozilla.org/en-US/docs/Web/API</a> 为基础，只实践W3C Recommendation状态的API。</p>\n</blockquote>\n<h2 id=\"目录\"><a href=\"#目录\" class=\"headerlink\" title=\"目录\"></a>目录</h2><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://github.com/taoliujun/blog/issues/50\">https://github.com/taoliujun/blog/issues/50</a></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://github.com/taoliujun/blog/issues/53\">https://github.com/taoliujun/blog/issues/53</a></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://github.com/taoliujun/blog/issues/55\">https://github.com/taoliujun/blog/issues/55</a></li>\n</ul>\n"},{"title":"整理ES6：ES6是什么？","date":"2023-07-05T22:18:38.000Z","url":"what-is-es6","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/1](https://github.com/taoliujun/blog/issues/1)\n\n<!--hexo\n---\nurl: what-is-es6\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## 注\n\n本系列文章不是技术教程，只是个人的知识点整理。\n\n## 第一段废话\n\n就在昨晚，我突然冒出了奇怪的心思想要对10年学习工作生涯做一个总结。但今早起来发现无从下手，一是没有优秀的文笔能力，不能科学优雅地整理出重点；二是实在没有牛逼的技术能力，羞于展示于众，这么多年的成长也不过是不断咀嚼大神们的产出。得益于互联网的开源精神和友善的讨论氛围，我这并不天资聪明的脑袋也算是学到了点皮毛能一直工作以温饱无忧。但是说了废话这么多，对写总结仍是没有帮助的，我翻来覆去后打算，不如抓近几年的重点，给某个技术点做一些总结，一来锻炼自己的文笔能力，二来做一次高质量的复习也是能提升自我能力。\n\n## 为什么写ES6？\n\n我从IE6时代开始写JavaScript，到2016年左右迎接真正的成年JS：ES6，接下来是前端爆发时代：CoffeeScript、TypeScript、Webpack、Angular、React、Node、Eslint等百十个技术点或框架层出不穷走向成熟。我和大部分人一样，在有限的精力里不断地消化它们，它们或成为我们工作的一部分，或像IE6一样一去不复返。如上所说，总有一些技术如TypeScript那般坚持了多年之久仍然在坚强的活着，它们如此受欢迎必然有它的闪光点。而ES6正是如此，用稳定优秀的迭代力，现代化的设计理念、牢牢的抓住了各大厂商和开发者的心。\n\n如果看这篇文档的人儿中有一些近几年加入的开发者，我想对大家说，ES6并不是自古就有，它的出生并不一帆风顺，甚至在推出稳定版本后，得到了一些开发者诸如“浏览器都不支持，要你何用”的嘲笑。但得益于polyfill(s)、浏览器厂商、github开源等好多组织的相辅相成，ES6才成为了现在这样。\n\n## ES6到底是什么？\n\n大家或多或少看了ES6的介绍文章，正如每个人心中哈姆雷特是不一样的，我参考总结了一些文章，加上自身的工作经验，对ES6做以下的介绍。\n\nJavaScript在上世纪90年代被提交给标准化组织ECMA，紧接着制定出第一个该语言标准并命名为ECMAScript 1.0，ES便是其简称。JavaScript是该标准的实现之一，被广泛使用，我们可以简单的认为JavaScript就是ECMAScript。\n\n之后该标准不断推出新版本一直到5.1，当要制定6.0标准的时候，发现要加入的语法功能太多了，要不断地推出6.1、6.2，难以规划和命名。于是ECMA组织改变了策略，定于每年6月推出一个新版本并按年份命名，在这一年期间，若干草案得到充分讨论和经过几个草案步骤后加入到新标准中。于是ES 6.0摇身变成ES2015，之后的年份一直推出ES2016、ES2017等。\n\n**虽然从历史上讲，ES6单指ES2015；但大众更容易理解的是，ES6泛指ES2015及以后的新语法功能。**\n\n这些年的互联网文章在特别的介绍ES6的语法功能，用于与ES5进行对比，或许再过一些年，人们不再提起ES6了，那时候的文章会统一讲整个ECMAScript，再有每年6月份单独的讲解ES20xx了吧。\n\n## ES6的相关技术\n\n### polyfill、babel是什么？\n\nES2015之后每一年会发布新的语法功能，我们在代码中使用新语法和功能，但用户的浏览器、Node客户端大概率不是最新版本，并不支持这些新语法。于是发展出两个方案解决这个问题，一是使用babel将新语法编译为老语法（按浏览器版本覆盖率、指定标准等配置，略过不表），二是使用polyfill用老语法模拟出新功能。有了这两者，我们基本可以放心的写出优雅的新代码，然后由它们编译后供浏览器解析。值的说明的是，新功能那么多，现代开发者不需要去维护polyfill列表了，babel中使用core-js库根据browserrc配置项智能的去引入polyfill了。\n\n### 和TypeScript的关系？\n\nTypeScript是对ES的类型补充，它存在一个配置项，来表明在ts检查、编译过程中去支持什么标准的ES。\n\n## 最后，欢迎大家在此讨论\n\n积极汲取大家的讨论，补充我的文章（偷笑）。\n\n\n<!--hexo-->\n\n# core-js\n\n虽然大部分开发者不直接使用core-js，甚至不知道它。我们使用webpack将ES6编译成老语法，实际上它在使用babel，而babel在使用core-js。\n\n它是一个伟大的库，其原理是维护一系列polyfill进行版本、浏览器支持度、草案阶段等维度的分类。你既可以直接引用具体的polyfill，也可以根据草案阶段引入，也可以根据浏览器支持度引入。\n\n它的作者是一个非常有趣，实诚的人。\n\n","source":"_posts/what-is-es6.md","raw":"---\ntitle: \"整理ES6：ES6是什么？\"\ndate: \"2023-07-06T06:18:38Z\"\ncategories:\n  - [JavaScript]\n\nurl: what-is-es6\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/1](https://github.com/taoliujun/blog/issues/1)\n\n<!--hexo\n---\nurl: what-is-es6\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## 注\n\n本系列文章不是技术教程，只是个人的知识点整理。\n\n## 第一段废话\n\n就在昨晚，我突然冒出了奇怪的心思想要对10年学习工作生涯做一个总结。但今早起来发现无从下手，一是没有优秀的文笔能力，不能科学优雅地整理出重点；二是实在没有牛逼的技术能力，羞于展示于众，这么多年的成长也不过是不断咀嚼大神们的产出。得益于互联网的开源精神和友善的讨论氛围，我这并不天资聪明的脑袋也算是学到了点皮毛能一直工作以温饱无忧。但是说了废话这么多，对写总结仍是没有帮助的，我翻来覆去后打算，不如抓近几年的重点，给某个技术点做一些总结，一来锻炼自己的文笔能力，二来做一次高质量的复习也是能提升自我能力。\n\n## 为什么写ES6？\n\n我从IE6时代开始写JavaScript，到2016年左右迎接真正的成年JS：ES6，接下来是前端爆发时代：CoffeeScript、TypeScript、Webpack、Angular、React、Node、Eslint等百十个技术点或框架层出不穷走向成熟。我和大部分人一样，在有限的精力里不断地消化它们，它们或成为我们工作的一部分，或像IE6一样一去不复返。如上所说，总有一些技术如TypeScript那般坚持了多年之久仍然在坚强的活着，它们如此受欢迎必然有它的闪光点。而ES6正是如此，用稳定优秀的迭代力，现代化的设计理念、牢牢的抓住了各大厂商和开发者的心。\n\n如果看这篇文档的人儿中有一些近几年加入的开发者，我想对大家说，ES6并不是自古就有，它的出生并不一帆风顺，甚至在推出稳定版本后，得到了一些开发者诸如“浏览器都不支持，要你何用”的嘲笑。但得益于polyfill(s)、浏览器厂商、github开源等好多组织的相辅相成，ES6才成为了现在这样。\n\n## ES6到底是什么？\n\n大家或多或少看了ES6的介绍文章，正如每个人心中哈姆雷特是不一样的，我参考总结了一些文章，加上自身的工作经验，对ES6做以下的介绍。\n\nJavaScript在上世纪90年代被提交给标准化组织ECMA，紧接着制定出第一个该语言标准并命名为ECMAScript 1.0，ES便是其简称。JavaScript是该标准的实现之一，被广泛使用，我们可以简单的认为JavaScript就是ECMAScript。\n\n之后该标准不断推出新版本一直到5.1，当要制定6.0标准的时候，发现要加入的语法功能太多了，要不断地推出6.1、6.2，难以规划和命名。于是ECMA组织改变了策略，定于每年6月推出一个新版本并按年份命名，在这一年期间，若干草案得到充分讨论和经过几个草案步骤后加入到新标准中。于是ES 6.0摇身变成ES2015，之后的年份一直推出ES2016、ES2017等。\n\n**虽然从历史上讲，ES6单指ES2015；但大众更容易理解的是，ES6泛指ES2015及以后的新语法功能。**\n\n这些年的互联网文章在特别的介绍ES6的语法功能，用于与ES5进行对比，或许再过一些年，人们不再提起ES6了，那时候的文章会统一讲整个ECMAScript，再有每年6月份单独的讲解ES20xx了吧。\n\n## ES6的相关技术\n\n### polyfill、babel是什么？\n\nES2015之后每一年会发布新的语法功能，我们在代码中使用新语法和功能，但用户的浏览器、Node客户端大概率不是最新版本，并不支持这些新语法。于是发展出两个方案解决这个问题，一是使用babel将新语法编译为老语法（按浏览器版本覆盖率、指定标准等配置，略过不表），二是使用polyfill用老语法模拟出新功能。有了这两者，我们基本可以放心的写出优雅的新代码，然后由它们编译后供浏览器解析。值的说明的是，新功能那么多，现代开发者不需要去维护polyfill列表了，babel中使用core-js库根据browserrc配置项智能的去引入polyfill了。\n\n### 和TypeScript的关系？\n\nTypeScript是对ES的类型补充，它存在一个配置项，来表明在ts检查、编译过程中去支持什么标准的ES。\n\n## 最后，欢迎大家在此讨论\n\n积极汲取大家的讨论，补充我的文章（偷笑）。\n\n\n<!--hexo-->\n\n# core-js\n\n虽然大部分开发者不直接使用core-js，甚至不知道它。我们使用webpack将ES6编译成老语法，实际上它在使用babel，而babel在使用core-js。\n\n它是一个伟大的库，其原理是维护一系列polyfill进行版本、浏览器支持度、草案阶段等维度的分类。你既可以直接引用具体的polyfill，也可以根据草案阶段引入，也可以根据浏览器支持度引入。\n\n它的作者是一个非常有趣，实诚的人。\n\n","slug":"what-is-es6","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvyg002bjaotfpai10mk","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/1\">https://github.com/taoliujun/blog/issues/1</a></p>\n<!--hexo\n---\nurl: what-is-es6\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"注\"><a href=\"#注\" class=\"headerlink\" title=\"注\"></a>注</h2><p>本系列文章不是技术教程，只是个人的知识点整理。</p>\n<h2 id=\"第一段废话\"><a href=\"#第一段废话\" class=\"headerlink\" title=\"第一段废话\"></a>第一段废话</h2><p>就在昨晚，我突然冒出了奇怪的心思想要对10年学习工作生涯做一个总结。但今早起来发现无从下手，一是没有优秀的文笔能力，不能科学优雅地整理出重点；二是实在没有牛逼的技术能力，羞于展示于众，这么多年的成长也不过是不断咀嚼大神们的产出。得益于互联网的开源精神和友善的讨论氛围，我这并不天资聪明的脑袋也算是学到了点皮毛能一直工作以温饱无忧。但是说了废话这么多，对写总结仍是没有帮助的，我翻来覆去后打算，不如抓近几年的重点，给某个技术点做一些总结，一来锻炼自己的文笔能力，二来做一次高质量的复习也是能提升自我能力。</p>\n<h2 id=\"为什么写ES6？\"><a href=\"#为什么写ES6？\" class=\"headerlink\" title=\"为什么写ES6？\"></a>为什么写ES6？</h2><p>我从IE6时代开始写JavaScript，到2016年左右迎接真正的成年JS：ES6，接下来是前端爆发时代：CoffeeScript、TypeScript、Webpack、Angular、React、Node、Eslint等百十个技术点或框架层出不穷走向成熟。我和大部分人一样，在有限的精力里不断地消化它们，它们或成为我们工作的一部分，或像IE6一样一去不复返。如上所说，总有一些技术如TypeScript那般坚持了多年之久仍然在坚强的活着，它们如此受欢迎必然有它的闪光点。而ES6正是如此，用稳定优秀的迭代力，现代化的设计理念、牢牢的抓住了各大厂商和开发者的心。</p>\n<p>如果看这篇文档的人儿中有一些近几年加入的开发者，我想对大家说，ES6并不是自古就有，它的出生并不一帆风顺，甚至在推出稳定版本后，得到了一些开发者诸如“浏览器都不支持，要你何用”的嘲笑。但得益于polyfill(s)、浏览器厂商、github开源等好多组织的相辅相成，ES6才成为了现在这样。</p>\n<h2 id=\"ES6到底是什么？\"><a href=\"#ES6到底是什么？\" class=\"headerlink\" title=\"ES6到底是什么？\"></a>ES6到底是什么？</h2><p>大家或多或少看了ES6的介绍文章，正如每个人心中哈姆雷特是不一样的，我参考总结了一些文章，加上自身的工作经验，对ES6做以下的介绍。</p>\n<p>JavaScript在上世纪90年代被提交给标准化组织ECMA，紧接着制定出第一个该语言标准并命名为ECMAScript 1.0，ES便是其简称。JavaScript是该标准的实现之一，被广泛使用，我们可以简单的认为JavaScript就是ECMAScript。</p>\n<p>之后该标准不断推出新版本一直到5.1，当要制定6.0标准的时候，发现要加入的语法功能太多了，要不断地推出6.1、6.2，难以规划和命名。于是ECMA组织改变了策略，定于每年6月推出一个新版本并按年份命名，在这一年期间，若干草案得到充分讨论和经过几个草案步骤后加入到新标准中。于是ES 6.0摇身变成ES2015，之后的年份一直推出ES2016、ES2017等。</p>\n<p><strong>虽然从历史上讲，ES6单指ES2015；但大众更容易理解的是，ES6泛指ES2015及以后的新语法功能。</strong></p>\n<p>这些年的互联网文章在特别的介绍ES6的语法功能，用于与ES5进行对比，或许再过一些年，人们不再提起ES6了，那时候的文章会统一讲整个ECMAScript，再有每年6月份单独的讲解ES20xx了吧。</p>\n<h2 id=\"ES6的相关技术\"><a href=\"#ES6的相关技术\" class=\"headerlink\" title=\"ES6的相关技术\"></a>ES6的相关技术</h2><h3 id=\"polyfill、babel是什么？\"><a href=\"#polyfill、babel是什么？\" class=\"headerlink\" title=\"polyfill、babel是什么？\"></a>polyfill、babel是什么？</h3><p>ES2015之后每一年会发布新的语法功能，我们在代码中使用新语法和功能，但用户的浏览器、Node客户端大概率不是最新版本，并不支持这些新语法。于是发展出两个方案解决这个问题，一是使用babel将新语法编译为老语法（按浏览器版本覆盖率、指定标准等配置，略过不表），二是使用polyfill用老语法模拟出新功能。有了这两者，我们基本可以放心的写出优雅的新代码，然后由它们编译后供浏览器解析。值的说明的是，新功能那么多，现代开发者不需要去维护polyfill列表了，babel中使用core-js库根据browserrc配置项智能的去引入polyfill了。</p>\n<h3 id=\"和TypeScript的关系？\"><a href=\"#和TypeScript的关系？\" class=\"headerlink\" title=\"和TypeScript的关系？\"></a>和TypeScript的关系？</h3><p>TypeScript是对ES的类型补充，它存在一个配置项，来表明在ts检查、编译过程中去支持什么标准的ES。</p>\n<h2 id=\"最后，欢迎大家在此讨论\"><a href=\"#最后，欢迎大家在此讨论\" class=\"headerlink\" title=\"最后，欢迎大家在此讨论\"></a>最后，欢迎大家在此讨论</h2><p>积极汲取大家的讨论，补充我的文章（偷笑）。</p>\n<!--hexo-->\n\n<h1 id=\"core-js\"><a href=\"#core-js\" class=\"headerlink\" title=\"core-js\"></a>core-js</h1><p>虽然大部分开发者不直接使用core-js，甚至不知道它。我们使用webpack将ES6编译成老语法，实际上它在使用babel，而babel在使用core-js。</p>\n<p>它是一个伟大的库，其原理是维护一系列polyfill进行版本、浏览器支持度、草案阶段等维度的分类。你既可以直接引用具体的polyfill，也可以根据草案阶段引入，也可以根据浏览器支持度引入。</p>\n<p>它的作者是一个非常有趣，实诚的人。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/1\">https://github.com/taoliujun/blog/issues/1</a></p>\n<!--hexo\n---\nurl: what-is-es6\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"注\"><a href=\"#注\" class=\"headerlink\" title=\"注\"></a>注</h2><p>本系列文章不是技术教程，只是个人的知识点整理。</p>\n<h2 id=\"第一段废话\"><a href=\"#第一段废话\" class=\"headerlink\" title=\"第一段废话\"></a>第一段废话</h2><p>就在昨晚，我突然冒出了奇怪的心思想要对10年学习工作生涯做一个总结。但今早起来发现无从下手，一是没有优秀的文笔能力，不能科学优雅地整理出重点；二是实在没有牛逼的技术能力，羞于展示于众，这么多年的成长也不过是不断咀嚼大神们的产出。得益于互联网的开源精神和友善的讨论氛围，我这并不天资聪明的脑袋也算是学到了点皮毛能一直工作以温饱无忧。但是说了废话这么多，对写总结仍是没有帮助的，我翻来覆去后打算，不如抓近几年的重点，给某个技术点做一些总结，一来锻炼自己的文笔能力，二来做一次高质量的复习也是能提升自我能力。</p>\n<h2 id=\"为什么写ES6？\"><a href=\"#为什么写ES6？\" class=\"headerlink\" title=\"为什么写ES6？\"></a>为什么写ES6？</h2><p>我从IE6时代开始写JavaScript，到2016年左右迎接真正的成年JS：ES6，接下来是前端爆发时代：CoffeeScript、TypeScript、Webpack、Angular、React、Node、Eslint等百十个技术点或框架层出不穷走向成熟。我和大部分人一样，在有限的精力里不断地消化它们，它们或成为我们工作的一部分，或像IE6一样一去不复返。如上所说，总有一些技术如TypeScript那般坚持了多年之久仍然在坚强的活着，它们如此受欢迎必然有它的闪光点。而ES6正是如此，用稳定优秀的迭代力，现代化的设计理念、牢牢的抓住了各大厂商和开发者的心。</p>\n<p>如果看这篇文档的人儿中有一些近几年加入的开发者，我想对大家说，ES6并不是自古就有，它的出生并不一帆风顺，甚至在推出稳定版本后，得到了一些开发者诸如“浏览器都不支持，要你何用”的嘲笑。但得益于polyfill(s)、浏览器厂商、github开源等好多组织的相辅相成，ES6才成为了现在这样。</p>\n<h2 id=\"ES6到底是什么？\"><a href=\"#ES6到底是什么？\" class=\"headerlink\" title=\"ES6到底是什么？\"></a>ES6到底是什么？</h2><p>大家或多或少看了ES6的介绍文章，正如每个人心中哈姆雷特是不一样的，我参考总结了一些文章，加上自身的工作经验，对ES6做以下的介绍。</p>\n<p>JavaScript在上世纪90年代被提交给标准化组织ECMA，紧接着制定出第一个该语言标准并命名为ECMAScript 1.0，ES便是其简称。JavaScript是该标准的实现之一，被广泛使用，我们可以简单的认为JavaScript就是ECMAScript。</p>\n<p>之后该标准不断推出新版本一直到5.1，当要制定6.0标准的时候，发现要加入的语法功能太多了，要不断地推出6.1、6.2，难以规划和命名。于是ECMA组织改变了策略，定于每年6月推出一个新版本并按年份命名，在这一年期间，若干草案得到充分讨论和经过几个草案步骤后加入到新标准中。于是ES 6.0摇身变成ES2015，之后的年份一直推出ES2016、ES2017等。</p>\n<p><strong>虽然从历史上讲，ES6单指ES2015；但大众更容易理解的是，ES6泛指ES2015及以后的新语法功能。</strong></p>\n<p>这些年的互联网文章在特别的介绍ES6的语法功能，用于与ES5进行对比，或许再过一些年，人们不再提起ES6了，那时候的文章会统一讲整个ECMAScript，再有每年6月份单独的讲解ES20xx了吧。</p>\n<h2 id=\"ES6的相关技术\"><a href=\"#ES6的相关技术\" class=\"headerlink\" title=\"ES6的相关技术\"></a>ES6的相关技术</h2><h3 id=\"polyfill、babel是什么？\"><a href=\"#polyfill、babel是什么？\" class=\"headerlink\" title=\"polyfill、babel是什么？\"></a>polyfill、babel是什么？</h3><p>ES2015之后每一年会发布新的语法功能，我们在代码中使用新语法和功能，但用户的浏览器、Node客户端大概率不是最新版本，并不支持这些新语法。于是发展出两个方案解决这个问题，一是使用babel将新语法编译为老语法（按浏览器版本覆盖率、指定标准等配置，略过不表），二是使用polyfill用老语法模拟出新功能。有了这两者，我们基本可以放心的写出优雅的新代码，然后由它们编译后供浏览器解析。值的说明的是，新功能那么多，现代开发者不需要去维护polyfill列表了，babel中使用core-js库根据browserrc配置项智能的去引入polyfill了。</p>\n<h3 id=\"和TypeScript的关系？\"><a href=\"#和TypeScript的关系？\" class=\"headerlink\" title=\"和TypeScript的关系？\"></a>和TypeScript的关系？</h3><p>TypeScript是对ES的类型补充，它存在一个配置项，来表明在ts检查、编译过程中去支持什么标准的ES。</p>\n<h2 id=\"最后，欢迎大家在此讨论\"><a href=\"#最后，欢迎大家在此讨论\" class=\"headerlink\" title=\"最后，欢迎大家在此讨论\"></a>最后，欢迎大家在此讨论</h2><p>积极汲取大家的讨论，补充我的文章（偷笑）。</p>\n<!--hexo-->\n\n<h1 id=\"core-js\"><a href=\"#core-js\" class=\"headerlink\" title=\"core-js\"></a>core-js</h1><p>虽然大部分开发者不直接使用core-js，甚至不知道它。我们使用webpack将ES6编译成老语法，实际上它在使用babel，而babel在使用core-js。</p>\n<p>它是一个伟大的库，其原理是维护一系列polyfill进行版本、浏览器支持度、草案阶段等维度的分类。你既可以直接引用具体的polyfill，也可以根据草案阶段引入，也可以根据浏览器支持度引入。</p>\n<p>它的作者是一个非常有趣，实诚的人。</p>\n"},{"title":"从Radix看如何优雅写组件","date":"2023-07-05T22:25:58.000Z","url":"write-components-elegantly-using-radix","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/3](https://github.com/taoliujun/blog/issues/3)\n\n<!--hexo\n---\nurl: write-components-elegantly-using-radix\ntags:\n  - radix\n---\n-->\n\n## 组件的困扰\n\n在更早以前，网页应用很简单，开发者自己维护简单的交互组件，通过入参去控制组件有不一样的渲染、样式、交互。后来React/Vue等框架的到来，使网页应用变得愈发复杂，于是使用Element、Ant、Mui之类的UI组件来提高开发效率，但使用后发现一些问题，其中常见的是：  \n1. 难以改变样式。\n1. 几乎不能改变dom结构。\n\n虽然很多组件库提供了css variables、less/sass包等方式让人们来定义样式，但离精细定义差些距离。而且固化的组件dom结构让开发者难以完成产品、UI设计师要求的定制化二次开发。\n\n于是部分人开始从0或基于更基础的UI组件来开发自定义组件以满足自定义样式和dom结构的目的，但问题是维护这些基础组件又是一个麻烦，或者说这些组件放到另一个项目中，是否又需要是另一个dom结构？\n\n于是，有开源项目在解决这样的事，比较出众的是Mui-Base、Radix，它们都旨在提供一套Uncontrolled、Unstyled、Opened的基础组件以便大家二次封装。我在阅读实践了这两个方案后，选择了使用Radix继续深入下去，主要是因为Radix将组件拆分的更为精细。\n\n## Radix的理念\n\n它提出了几个特性，一起看看吧。\n\n### Accessible 可访问性\n\n如果你的应用对可访问性有要求，那Radix会有很大帮助，它遵循了一个 `WAI-ARIA` 的设计规范。但我对可访问性的研究不多，在此不表了。\n\n### Unstyled 无样式\n\n顾名思义的是，它提供的组件都是不带任何样式的，你可以使用任意样式方案去开发。这也解决了上文提到的重要问题：自定义样式。\n\n### Opened 开放\n\n我认为Radix的开发性做到了优秀的程度，它的每个组件都太颗粒了，你可以精细的自由搭配，组装成想要的。\n\n### Incremental 渐进的\n\n可以只安装我们需要用到的组件库，比如`npm install @radix-ui/react-tooltip`。\n\n## 一个小例子\n\n我们要做一个tooltip，如果自己写，需要考虑样式、状态控制、可访问性等。但是在Radix里，采用简单的封装和自定义样式即可：\n\n```typescript\nimport * as Popover from '@radix-ui/react-popover';\nimport { FC } from 'react';\n\nexport const Main: FC = () => {\n    return (\n        <Popover.Root>\n            <Popover.Trigger>点击我</Popover.Trigger>\n            <Popover.Portal>\n                <Popover.Content sideOffset={5}>\n                    要显示的内容\n                    <Popover.Arrow />\n                </Popover.Content>\n            </Popover.Portal>\n        </Popover.Root>\n    );\n};\n```\n\n在上面的代码中，组装Radix提供的popover组件的颗粒，不加任意className就得到一个简单的tooltip，并且\"点击我\"可进行交互。如图：\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271427990.png)\n\n接着，我随便加了点tailwindcss。\n\n```typescript\n return (\n        <Popover.Root>\n            <Popover.Trigger className=\"text-red\">点击我</Popover.Trigger>\n            <Popover.Portal>\n                <Popover.Content className=\"border border-solid border-black\" sideOffset={5}>\n                    要显示的内容\n                    <Popover.Arrow />\n                </Popover.Content>\n            </Popover.Portal>\n        </Popover.Root>\n    );\n```\n\n就得到如图的效果：\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271430207.png)\n\nRadix的组件将几乎所有的state变化，反馈到`data-state`上方便你精细的定制样式了。\n\n## 其他\n\nRadix提供了很多小细节让你可以优雅的封装组件，不限于：\n\n* 提供`forceMount`以方便你的组件能运行完整的动画。\n* 提供`asChild`以方便你更精细的自定义dom。\n* 支持SSR。\n* 提供了许多现成组件，并且足够颗粒化，让你更快更优化的定制出自己的组件哟。\n\n相比较使用它，理解它的理念才能消化为自己的知识，个人认为即便是自己开发的基础组件，以精细颗粒控制为目标，也不失为一个很棒的思路。\n\n## 参考\n\n* https://www.radix-ui.com/\n\n\n\n\n","source":"_posts/write-components-elegantly-using-radix.md","raw":"---\ntitle: \"从Radix看如何优雅写组件\"\ndate: \"2023-07-06T06:25:58Z\"\ncategories:\n  - [React]\n\nurl: write-components-elegantly-using-radix\ntags:\n  - radix\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/3](https://github.com/taoliujun/blog/issues/3)\n\n<!--hexo\n---\nurl: write-components-elegantly-using-radix\ntags:\n  - radix\n---\n-->\n\n## 组件的困扰\n\n在更早以前，网页应用很简单，开发者自己维护简单的交互组件，通过入参去控制组件有不一样的渲染、样式、交互。后来React/Vue等框架的到来，使网页应用变得愈发复杂，于是使用Element、Ant、Mui之类的UI组件来提高开发效率，但使用后发现一些问题，其中常见的是：  \n1. 难以改变样式。\n1. 几乎不能改变dom结构。\n\n虽然很多组件库提供了css variables、less/sass包等方式让人们来定义样式，但离精细定义差些距离。而且固化的组件dom结构让开发者难以完成产品、UI设计师要求的定制化二次开发。\n\n于是部分人开始从0或基于更基础的UI组件来开发自定义组件以满足自定义样式和dom结构的目的，但问题是维护这些基础组件又是一个麻烦，或者说这些组件放到另一个项目中，是否又需要是另一个dom结构？\n\n于是，有开源项目在解决这样的事，比较出众的是Mui-Base、Radix，它们都旨在提供一套Uncontrolled、Unstyled、Opened的基础组件以便大家二次封装。我在阅读实践了这两个方案后，选择了使用Radix继续深入下去，主要是因为Radix将组件拆分的更为精细。\n\n## Radix的理念\n\n它提出了几个特性，一起看看吧。\n\n### Accessible 可访问性\n\n如果你的应用对可访问性有要求，那Radix会有很大帮助，它遵循了一个 `WAI-ARIA` 的设计规范。但我对可访问性的研究不多，在此不表了。\n\n### Unstyled 无样式\n\n顾名思义的是，它提供的组件都是不带任何样式的，你可以使用任意样式方案去开发。这也解决了上文提到的重要问题：自定义样式。\n\n### Opened 开放\n\n我认为Radix的开发性做到了优秀的程度，它的每个组件都太颗粒了，你可以精细的自由搭配，组装成想要的。\n\n### Incremental 渐进的\n\n可以只安装我们需要用到的组件库，比如`npm install @radix-ui/react-tooltip`。\n\n## 一个小例子\n\n我们要做一个tooltip，如果自己写，需要考虑样式、状态控制、可访问性等。但是在Radix里，采用简单的封装和自定义样式即可：\n\n```typescript\nimport * as Popover from '@radix-ui/react-popover';\nimport { FC } from 'react';\n\nexport const Main: FC = () => {\n    return (\n        <Popover.Root>\n            <Popover.Trigger>点击我</Popover.Trigger>\n            <Popover.Portal>\n                <Popover.Content sideOffset={5}>\n                    要显示的内容\n                    <Popover.Arrow />\n                </Popover.Content>\n            </Popover.Portal>\n        </Popover.Root>\n    );\n};\n```\n\n在上面的代码中，组装Radix提供的popover组件的颗粒，不加任意className就得到一个简单的tooltip，并且\"点击我\"可进行交互。如图：\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271427990.png)\n\n接着，我随便加了点tailwindcss。\n\n```typescript\n return (\n        <Popover.Root>\n            <Popover.Trigger className=\"text-red\">点击我</Popover.Trigger>\n            <Popover.Portal>\n                <Popover.Content className=\"border border-solid border-black\" sideOffset={5}>\n                    要显示的内容\n                    <Popover.Arrow />\n                </Popover.Content>\n            </Popover.Portal>\n        </Popover.Root>\n    );\n```\n\n就得到如图的效果：\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271430207.png)\n\nRadix的组件将几乎所有的state变化，反馈到`data-state`上方便你精细的定制样式了。\n\n## 其他\n\nRadix提供了很多小细节让你可以优雅的封装组件，不限于：\n\n* 提供`forceMount`以方便你的组件能运行完整的动画。\n* 提供`asChild`以方便你更精细的自定义dom。\n* 支持SSR。\n* 提供了许多现成组件，并且足够颗粒化，让你更快更优化的定制出自己的组件哟。\n\n相比较使用它，理解它的理念才能消化为自己的知识，个人认为即便是自己开发的基础组件，以精细颗粒控制为目标，也不失为一个很棒的思路。\n\n## 参考\n\n* https://www.radix-ui.com/\n\n\n\n\n","slug":"write-components-elegantly-using-radix","published":1,"updated":"2024-03-01T04:09:14.475Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt84xvyh002fjaot22n7hlil","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/3\">https://github.com/taoliujun/blog/issues/3</a></p>\n<!--hexo\n---\nurl: write-components-elegantly-using-radix\ntags:\n  - radix\n---\n-->\n\n<h2 id=\"组件的困扰\"><a href=\"#组件的困扰\" class=\"headerlink\" title=\"组件的困扰\"></a>组件的困扰</h2><p>在更早以前，网页应用很简单，开发者自己维护简单的交互组件，通过入参去控制组件有不一样的渲染、样式、交互。后来React&#x2F;Vue等框架的到来，使网页应用变得愈发复杂，于是使用Element、Ant、Mui之类的UI组件来提高开发效率，但使用后发现一些问题，其中常见的是：  </p>\n<ol>\n<li>难以改变样式。</li>\n<li>几乎不能改变dom结构。</li>\n</ol>\n<p>虽然很多组件库提供了css variables、less&#x2F;sass包等方式让人们来定义样式，但离精细定义差些距离。而且固化的组件dom结构让开发者难以完成产品、UI设计师要求的定制化二次开发。</p>\n<p>于是部分人开始从0或基于更基础的UI组件来开发自定义组件以满足自定义样式和dom结构的目的，但问题是维护这些基础组件又是一个麻烦，或者说这些组件放到另一个项目中，是否又需要是另一个dom结构？</p>\n<p>于是，有开源项目在解决这样的事，比较出众的是Mui-Base、Radix，它们都旨在提供一套Uncontrolled、Unstyled、Opened的基础组件以便大家二次封装。我在阅读实践了这两个方案后，选择了使用Radix继续深入下去，主要是因为Radix将组件拆分的更为精细。</p>\n<h2 id=\"Radix的理念\"><a href=\"#Radix的理念\" class=\"headerlink\" title=\"Radix的理念\"></a>Radix的理念</h2><p>它提出了几个特性，一起看看吧。</p>\n<h3 id=\"Accessible-可访问性\"><a href=\"#Accessible-可访问性\" class=\"headerlink\" title=\"Accessible 可访问性\"></a>Accessible 可访问性</h3><p>如果你的应用对可访问性有要求，那Radix会有很大帮助，它遵循了一个 <code>WAI-ARIA</code> 的设计规范。但我对可访问性的研究不多，在此不表了。</p>\n<h3 id=\"Unstyled-无样式\"><a href=\"#Unstyled-无样式\" class=\"headerlink\" title=\"Unstyled 无样式\"></a>Unstyled 无样式</h3><p>顾名思义的是，它提供的组件都是不带任何样式的，你可以使用任意样式方案去开发。这也解决了上文提到的重要问题：自定义样式。</p>\n<h3 id=\"Opened-开放\"><a href=\"#Opened-开放\" class=\"headerlink\" title=\"Opened 开放\"></a>Opened 开放</h3><p>我认为Radix的开发性做到了优秀的程度，它的每个组件都太颗粒了，你可以精细的自由搭配，组装成想要的。</p>\n<h3 id=\"Incremental-渐进的\"><a href=\"#Incremental-渐进的\" class=\"headerlink\" title=\"Incremental 渐进的\"></a>Incremental 渐进的</h3><p>可以只安装我们需要用到的组件库，比如<code>npm install @radix-ui/react-tooltip</code>。</p>\n<h2 id=\"一个小例子\"><a href=\"#一个小例子\" class=\"headerlink\" title=\"一个小例子\"></a>一个小例子</h2><p>我们要做一个tooltip，如果自己写，需要考虑样式、状态控制、可访问性等。但是在Radix里，采用简单的封装和自定义样式即可：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">import</span> * <span class=\"keyword\">as</span> <span class=\"title class_\">Popover</span> <span class=\"keyword\">from</span> <span class=\"string\">&#x27;@radix-ui/react-popover&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; <span class=\"variable constant_\">FC</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;react&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">const</span> <span class=\"title class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> (</span><br><span class=\"line\">        <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">Popover.Trigger</span>&gt;</span>点击我<span class=\"tag\">&lt;/<span class=\"name\">Popover.Trigger</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                <span class=\"tag\">&lt;<span class=\"name\">Popover.Content</span> <span class=\"attr\">sideOffset</span>=<span class=\"string\">&#123;5&#125;</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\">Popover.Arrow</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                <span class=\"tag\">&lt;/<span class=\"name\">Popover.Content</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;/<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">        <span class=\"tag\">&lt;/<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\">    );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>在上面的代码中，组装Radix提供的popover组件的颗粒，不加任意className就得到一个简单的tooltip，并且”点击我”可进行交互。如图：</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271427990.png\"></p>\n<p>接着，我随便加了点tailwindcss。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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\">return</span> (</span><br><span class=\"line\">       <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">           <span class=\"tag\">&lt;<span class=\"name\">Popover.Trigger</span> <span class=\"attr\">className</span>=<span class=\"string\">&quot;text-red&quot;</span>&gt;</span>点击我<span class=\"tag\">&lt;/<span class=\"name\">Popover.Trigger</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">           <span class=\"tag\">&lt;<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">               <span class=\"tag\">&lt;<span class=\"name\">Popover.Content</span> <span class=\"attr\">className</span>=<span class=\"string\">&quot;border border-solid border-black&quot;</span> <span class=\"attr\">sideOffset</span>=<span class=\"string\">&#123;5&#125;</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\">Popover.Arrow</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">               <span class=\"tag\">&lt;/<span class=\"name\">Popover.Content</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">           <span class=\"tag\">&lt;/<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">       <span class=\"tag\">&lt;/<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\">   );</span><br></pre></td></tr></table></figure>\n\n<p>就得到如图的效果：</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271430207.png\"></p>\n<p>Radix的组件将几乎所有的state变化，反馈到<code>data-state</code>上方便你精细的定制样式了。</p>\n<h2 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h2><p>Radix提供了很多小细节让你可以优雅的封装组件，不限于：</p>\n<ul>\n<li>提供<code>forceMount</code>以方便你的组件能运行完整的动画。</li>\n<li>提供<code>asChild</code>以方便你更精细的自定义dom。</li>\n<li>支持SSR。</li>\n<li>提供了许多现成组件，并且足够颗粒化，让你更快更优化的定制出自己的组件哟。</li>\n</ul>\n<p>相比较使用它，理解它的理念才能消化为自己的知识，个人认为即便是自己开发的基础组件，以精细颗粒控制为目标，也不失为一个很棒的思路。</p>\n<h2 id=\"参考\"><a href=\"#参考\" class=\"headerlink\" title=\"参考\"></a>参考</h2><ul>\n<li><a href=\"https://www.radix-ui.com/\">https://www.radix-ui.com/</a></li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/3\">https://github.com/taoliujun/blog/issues/3</a></p>\n<!--hexo\n---\nurl: write-components-elegantly-using-radix\ntags:\n  - radix\n---\n-->\n\n<h2 id=\"组件的困扰\"><a href=\"#组件的困扰\" class=\"headerlink\" title=\"组件的困扰\"></a>组件的困扰</h2><p>在更早以前，网页应用很简单，开发者自己维护简单的交互组件，通过入参去控制组件有不一样的渲染、样式、交互。后来React&#x2F;Vue等框架的到来，使网页应用变得愈发复杂，于是使用Element、Ant、Mui之类的UI组件来提高开发效率，但使用后发现一些问题，其中常见的是：  </p>\n<ol>\n<li>难以改变样式。</li>\n<li>几乎不能改变dom结构。</li>\n</ol>\n<p>虽然很多组件库提供了css variables、less&#x2F;sass包等方式让人们来定义样式，但离精细定义差些距离。而且固化的组件dom结构让开发者难以完成产品、UI设计师要求的定制化二次开发。</p>\n<p>于是部分人开始从0或基于更基础的UI组件来开发自定义组件以满足自定义样式和dom结构的目的，但问题是维护这些基础组件又是一个麻烦，或者说这些组件放到另一个项目中，是否又需要是另一个dom结构？</p>\n<p>于是，有开源项目在解决这样的事，比较出众的是Mui-Base、Radix，它们都旨在提供一套Uncontrolled、Unstyled、Opened的基础组件以便大家二次封装。我在阅读实践了这两个方案后，选择了使用Radix继续深入下去，主要是因为Radix将组件拆分的更为精细。</p>\n<h2 id=\"Radix的理念\"><a href=\"#Radix的理念\" class=\"headerlink\" title=\"Radix的理念\"></a>Radix的理念</h2><p>它提出了几个特性，一起看看吧。</p>\n<h3 id=\"Accessible-可访问性\"><a href=\"#Accessible-可访问性\" class=\"headerlink\" title=\"Accessible 可访问性\"></a>Accessible 可访问性</h3><p>如果你的应用对可访问性有要求，那Radix会有很大帮助，它遵循了一个 <code>WAI-ARIA</code> 的设计规范。但我对可访问性的研究不多，在此不表了。</p>\n<h3 id=\"Unstyled-无样式\"><a href=\"#Unstyled-无样式\" class=\"headerlink\" title=\"Unstyled 无样式\"></a>Unstyled 无样式</h3><p>顾名思义的是，它提供的组件都是不带任何样式的，你可以使用任意样式方案去开发。这也解决了上文提到的重要问题：自定义样式。</p>\n<h3 id=\"Opened-开放\"><a href=\"#Opened-开放\" class=\"headerlink\" title=\"Opened 开放\"></a>Opened 开放</h3><p>我认为Radix的开发性做到了优秀的程度，它的每个组件都太颗粒了，你可以精细的自由搭配，组装成想要的。</p>\n<h3 id=\"Incremental-渐进的\"><a href=\"#Incremental-渐进的\" class=\"headerlink\" title=\"Incremental 渐进的\"></a>Incremental 渐进的</h3><p>可以只安装我们需要用到的组件库，比如<code>npm install @radix-ui/react-tooltip</code>。</p>\n<h2 id=\"一个小例子\"><a href=\"#一个小例子\" class=\"headerlink\" title=\"一个小例子\"></a>一个小例子</h2><p>我们要做一个tooltip，如果自己写，需要考虑样式、状态控制、可访问性等。但是在Radix里，采用简单的封装和自定义样式即可：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">import</span> * <span class=\"keyword\">as</span> <span class=\"title class_\">Popover</span> <span class=\"keyword\">from</span> <span class=\"string\">&#x27;@radix-ui/react-popover&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; <span class=\"variable constant_\">FC</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;react&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">const</span> <span class=\"title class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> (</span><br><span class=\"line\">        <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">Popover.Trigger</span>&gt;</span>点击我<span class=\"tag\">&lt;/<span class=\"name\">Popover.Trigger</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                <span class=\"tag\">&lt;<span class=\"name\">Popover.Content</span> <span class=\"attr\">sideOffset</span>=<span class=\"string\">&#123;5&#125;</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\">Popover.Arrow</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                <span class=\"tag\">&lt;/<span class=\"name\">Popover.Content</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;/<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">        <span class=\"tag\">&lt;/<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\">    );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>在上面的代码中，组装Radix提供的popover组件的颗粒，不加任意className就得到一个简单的tooltip，并且”点击我”可进行交互。如图：</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271427990.png\"></p>\n<p>接着，我随便加了点tailwindcss。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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\">return</span> (</span><br><span class=\"line\">       <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">           <span class=\"tag\">&lt;<span class=\"name\">Popover.Trigger</span> <span class=\"attr\">className</span>=<span class=\"string\">&quot;text-red&quot;</span>&gt;</span>点击我<span class=\"tag\">&lt;/<span class=\"name\">Popover.Trigger</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">           <span class=\"tag\">&lt;<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">               <span class=\"tag\">&lt;<span class=\"name\">Popover.Content</span> <span class=\"attr\">className</span>=<span class=\"string\">&quot;border border-solid border-black&quot;</span> <span class=\"attr\">sideOffset</span>=<span class=\"string\">&#123;5&#125;</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\">Popover.Arrow</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">               <span class=\"tag\">&lt;/<span class=\"name\">Popover.Content</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">           <span class=\"tag\">&lt;/<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">       <span class=\"tag\">&lt;/<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\">   );</span><br></pre></td></tr></table></figure>\n\n<p>就得到如图的效果：</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271430207.png\"></p>\n<p>Radix的组件将几乎所有的state变化，反馈到<code>data-state</code>上方便你精细的定制样式了。</p>\n<h2 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h2><p>Radix提供了很多小细节让你可以优雅的封装组件，不限于：</p>\n<ul>\n<li>提供<code>forceMount</code>以方便你的组件能运行完整的动画。</li>\n<li>提供<code>asChild</code>以方便你更精细的自定义dom。</li>\n<li>支持SSR。</li>\n<li>提供了许多现成组件，并且足够颗粒化，让你更快更优化的定制出自己的组件哟。</li>\n</ul>\n<p>相比较使用它，理解它的理念才能消化为自己的知识，个人认为即便是自己开发的基础组件，以精细颗粒控制为目标，也不失为一个很棒的思路。</p>\n<h2 id=\"参考\"><a href=\"#参考\" class=\"headerlink\" title=\"参考\"></a>参考</h2><ul>\n<li><a href=\"https://www.radix-ui.com/\">https://www.radix-ui.com/</a></li>\n</ul>\n"}],"PostAsset":[],"PostCategory":[{"post_id":"clt84xvxt0005jaotgxzi6inn","category_id":"clt84xvxs0004jaot848oets5","_id":"clt84xvxy000ejaoteocogh8j"},{"post_id":"clt84xvxu0006jaotgwer6fef","category_id":"clt84xvxs0004jaot848oets5","_id":"clt84xvxz000hjaotgf6l6t79"},{"post_id":"clt84xvxl0000jaot4v3ac2xf","category_id":"clt84xvxs0004jaot848oets5","_id":"clt84xvy1000ljaot3ayd3wkw"},{"post_id":"clt84xvxl0000jaot4v3ac2xf","category_id":"clt84xvxv0008jaot37r83p59","_id":"clt84xvy2000ojaot6qteaq7b"},{"post_id":"clt84xvxv0009jaotepjnf3w0","category_id":"clt84xvxs0004jaot848oets5","_id":"clt84xvy2000rjaot6oqxc3af"},{"post_id":"clt84xvxp0001jaot16w7army","category_id":"clt84xvxv0008jaot37r83p59","_id":"clt84xvy3000tjaot74zbdg3f"},{"post_id":"clt84xvxw000ajaot16m5fl0w","category_id":"clt84xvxs0004jaot848oets5","_id":"clt84xvy4000vjaota8w60k5p"},{"post_id":"clt84xvxy000djaot35e97wk9","category_id":"clt84xvxs0004jaot848oets5","_id":"clt84xvy5000zjaotcgsz2op8"},{"post_id":"clt84xvxs0003jaot2s4a2okt","category_id":"clt84xvxs0004jaot848oets5","_id":"clt84xvy50012jaot63ek5emc"},{"post_id":"clt84xvxz000gjaot1ny4bgke","category_id":"clt84xvxs0004jaot848oets5","_id":"clt84xvy60015jaotct3ohqop"},{"post_id":"clt84xvy0000kjaotckrf1agv","category_id":"clt84xvxs0004jaot848oets5","_id":"clt84xvy70017jaothfblaajl"},{"post_id":"clt84xvy1000njaotb0p72f0f","category_id":"clt84xvxv0008jaot37r83p59","_id":"clt84xvy8001bjaot5ohrczt0"},{"post_id":"clt84xvy2000qjaot7pv5e9k6","category_id":"clt84xvxv0008jaot37r83p59","_id":"clt84xvy9001ejaot6mvpfzze"},{"post_id":"clt84xvy3000sjaot3njb3qkh","category_id":"clt84xvxv0008jaot37r83p59","_id":"clt84xvya001ijaot6jy98cmm"},{"post_id":"clt84xvy3000ujaot0c50f62v","category_id":"clt84xvxv0008jaot37r83p59","_id":"clt84xvya001kjaotfkdq7o1a"},{"post_id":"clt84xvy4000yjaot9qx41ilj","category_id":"clt84xvxv0008jaot37r83p59","_id":"clt84xvyb001ojaot0ppcg5to"},{"post_id":"clt84xvy50011jaot8v6xhhiy","category_id":"clt84xvxv0008jaot37r83p59","_id":"clt84xvyc001sjaot0d0kelfv"},{"post_id":"clt84xvy60014jaotag4vedz0","category_id":"clt84xvxv0008jaot37r83p59","_id":"clt84xvyd001vjaot2n1578r1"},{"post_id":"clt84xvy70016jaotdutv2p3p","category_id":"clt84xvxv0008jaot37r83p59","_id":"clt84xvye001yjaot17vn247q"},{"post_id":"clt84xvya001jjaotaulf9tew","category_id":"clt84xvy9001hjaotahwy1md9","_id":"clt84xvyf0022jaot4byj3o2s"},{"post_id":"clt84xvy8001ajaothnsy91na","category_id":"clt84xvy9001hjaotahwy1md9","_id":"clt84xvyf0026jaot7gze266f"},{"post_id":"clt84xvyb001njaotgf4c4r3y","category_id":"clt84xvxv0008jaot37r83p59","_id":"clt84xvyg0029jaotfkz2hqob"},{"post_id":"clt84xvy8001djaotbiagf004","category_id":"clt84xvy9001hjaotahwy1md9","_id":"clt84xvyh002cjaote3vu0l8z"},{"post_id":"clt84xvyd001xjaotciex7a91","category_id":"clt84xvxs0004jaot848oets5","_id":"clt84xvyi002gjaot9aodaqen"},{"post_id":"clt84xvy9001gjaot8o6ygvby","category_id":"clt84xvy9001hjaotahwy1md9","_id":"clt84xvyi002ijaotfw2t0oii"},{"post_id":"clt84xvye0021jaot1re21auq","category_id":"clt84xvxs0004jaot848oets5","_id":"clt84xvyj002ljaoterax88vw"},{"post_id":"clt84xvyf0025jaot2f5xho76","category_id":"clt84xvxs0004jaot848oets5","_id":"clt84xvyj002njaotgqb2f6bt"},{"post_id":"clt84xvyc001rjaot9mbxbgnc","category_id":"clt84xvyf0023jaot9nt14vdm","_id":"clt84xvyj002qjaot2yc3bpt2"},{"post_id":"clt84xvyg0028jaotdpc922u5","category_id":"clt84xvxs0004jaot848oets5","_id":"clt84xvyk002sjaotbtis41qg"},{"post_id":"clt84xvyg002bjaotfpai10mk","category_id":"clt84xvxs0004jaot848oets5","_id":"clt84xvyk002ujaot04zca75n"},{"post_id":"clt84xvyd001ujaot1vergh6f","category_id":"clt84xvyf0023jaot9nt14vdm","_id":"clt84xvyk002vjaot8bb3eha8"},{"post_id":"clt84xvyh002fjaot22n7hlil","category_id":"clt84xvy9001hjaotahwy1md9","_id":"clt84xvyk002yjaotd23w9udc"}],"PostTag":[{"post_id":"clt84xvxl0000jaot4v3ac2xf","tag_id":"clt84xvxr0002jaotfj4p0njj","_id":"clt84xvxz000fjaot22z183ek"},{"post_id":"clt84xvxl0000jaot4v3ac2xf","tag_id":"clt84xvxv0007jaotfjd61ybj","_id":"clt84xvxz000ijaot9z2hh3sa"},{"post_id":"clt84xvxp0001jaot16w7army","tag_id":"clt84xvxx000bjaotcefzcu7w","_id":"clt84xvy1000mjaotd2j4250x"},{"post_id":"clt84xvxs0003jaot2s4a2okt","tag_id":"clt84xvy0000jjaot6a9k564n","_id":"clt84xvy4000xjaotbief3j7t"},{"post_id":"clt84xvxs0003jaot2s4a2okt","tag_id":"clt84xvy2000pjaot71w6gpww","_id":"clt84xvy50010jaotdbmw3vt8"},{"post_id":"clt84xvxt0005jaotgxzi6inn","tag_id":"clt84xvy0000jjaot6a9k564n","_id":"clt84xvy80019jaotaai00xk1"},{"post_id":"clt84xvxt0005jaotgxzi6inn","tag_id":"clt84xvy2000pjaot71w6gpww","_id":"clt84xvy8001cjaot56ql5o5h"},{"post_id":"clt84xvxu0006jaotgwer6fef","tag_id":"clt84xvy0000jjaot6a9k564n","_id":"clt84xvyb001mjaot0f7icau9"},{"post_id":"clt84xvxu0006jaotgwer6fef","tag_id":"clt84xvy2000pjaot71w6gpww","_id":"clt84xvyc001qjaot2q6b438w"},{"post_id":"clt84xvxv0009jaotepjnf3w0","tag_id":"clt84xvy0000jjaot6a9k564n","_id":"clt84xvye0020jaot9geyejml"},{"post_id":"clt84xvxv0009jaotepjnf3w0","tag_id":"clt84xvy2000pjaot71w6gpww","_id":"clt84xvyf0024jaot6k3qb5en"},{"post_id":"clt84xvxw000ajaot16m5fl0w","tag_id":"clt84xvy0000jjaot6a9k564n","_id":"clt84xvyh002ejaot5tez86ds"},{"post_id":"clt84xvxw000ajaot16m5fl0w","tag_id":"clt84xvy2000pjaot71w6gpww","_id":"clt84xvyi002hjaot8mrr0xjc"},{"post_id":"clt84xvyg002bjaotfpai10mk","tag_id":"clt84xvy0000jjaot6a9k564n","_id":"clt84xvyi002kjaot32rxgayp"},{"post_id":"clt84xvyg002bjaotfpai10mk","tag_id":"clt84xvy2000pjaot71w6gpww","_id":"clt84xvyj002mjaot3e3d509q"},{"post_id":"clt84xvxy000djaot35e97wk9","tag_id":"clt84xvy0000jjaot6a9k564n","_id":"clt84xvyj002pjaot7sn456gq"},{"post_id":"clt84xvxy000djaot35e97wk9","tag_id":"clt84xvy2000pjaot71w6gpww","_id":"clt84xvyj002rjaot2k25dxpp"},{"post_id":"clt84xvxz000gjaot1ny4bgke","tag_id":"clt84xvy0000jjaot6a9k564n","_id":"clt84xvyk002xjaot4yh59152"},{"post_id":"clt84xvxz000gjaot1ny4bgke","tag_id":"clt84xvy2000pjaot71w6gpww","_id":"clt84xvyl002zjaoth3j7gmp9"},{"post_id":"clt84xvy0000kjaotckrf1agv","tag_id":"clt84xvy0000jjaot6a9k564n","_id":"clt84xvyl0031jaot8frlhqpb"},{"post_id":"clt84xvy0000kjaotckrf1agv","tag_id":"clt84xvy2000pjaot71w6gpww","_id":"clt84xvyl0032jaot8rwj0lts"},{"post_id":"clt84xvy1000njaotb0p72f0f","tag_id":"clt84xvyl0030jaothqppe3ib","_id":"clt84xvyo0034jaoth8tc0qd2"},{"post_id":"clt84xvy2000qjaot7pv5e9k6","tag_id":"clt84xvyl0030jaothqppe3ib","_id":"clt84xvyo0036jaothkqa6k1i"},{"post_id":"clt84xvy3000sjaot3njb3qkh","tag_id":"clt84xvyl0030jaothqppe3ib","_id":"clt84xvyo0038jaot9w0y1vez"},{"post_id":"clt84xvy3000ujaot0c50f62v","tag_id":"clt84xvyl0030jaothqppe3ib","_id":"clt84xvyp003ajaot0xy1hcj5"},{"post_id":"clt84xvy4000yjaot9qx41ilj","tag_id":"clt84xvyl0030jaothqppe3ib","_id":"clt84xvyp003cjaot2lcjbxyu"},{"post_id":"clt84xvy50011jaot8v6xhhiy","tag_id":"clt84xvyl0030jaothqppe3ib","_id":"clt84xvyq003ejaoteifi3ene"},{"post_id":"clt84xvy60014jaotag4vedz0","tag_id":"clt84xvyl0030jaothqppe3ib","_id":"clt84xvyq003gjaot5iqz1ubf"},{"post_id":"clt84xvy70016jaotdutv2p3p","tag_id":"clt84xvyl0030jaothqppe3ib","_id":"clt84xvyq003ijaotgmoe7j26"},{"post_id":"clt84xvy8001ajaothnsy91na","tag_id":"clt84xvyq003hjaothj9d6eh6","_id":"clt84xvyr003kjaot0gr7b9ld"},{"post_id":"clt84xvy8001djaotbiagf004","tag_id":"clt84xvyq003hjaothj9d6eh6","_id":"clt84xvyr003mjaot7gc1bcur"},{"post_id":"clt84xvy9001gjaot8o6ygvby","tag_id":"clt84xvyq003hjaothj9d6eh6","_id":"clt84xvyr003ojaot6bq9ghrt"},{"post_id":"clt84xvya001jjaotaulf9tew","tag_id":"clt84xvyr003njaot8e8ge2vh","_id":"clt84xvys003rjaotfx4jdysh"},{"post_id":"clt84xvya001jjaotaulf9tew","tag_id":"clt84xvyr003pjaot7w0xhruw","_id":"clt84xvys003sjaot1vxdbvdw"},{"post_id":"clt84xvyb001njaotgf4c4r3y","tag_id":"clt84xvyr003qjaotazfu0mis","_id":"clt84xvys003ujaot4q1l948h"},{"post_id":"clt84xvyc001rjaot9mbxbgnc","tag_id":"clt84xvys003tjaotg27ch1mz","_id":"clt84xvys003wjaot8cxd32rm"},{"post_id":"clt84xvyd001ujaot1vergh6f","tag_id":"clt84xvys003tjaotg27ch1mz","_id":"clt84xvys003yjaot5hsh0qp0"},{"post_id":"clt84xvyd001xjaotciex7a91","tag_id":"clt84xvys003xjaot5hmb7p73","_id":"clt84xvyt0041jaot3x5v25r6"},{"post_id":"clt84xvyd001xjaotciex7a91","tag_id":"clt84xvyt003zjaot8436717q","_id":"clt84xvyt0042jaotd2u5arzq"},{"post_id":"clt84xvye0021jaot1re21auq","tag_id":"clt84xvys003xjaot5hmb7p73","_id":"clt84xvyt0045jaothxvvgvlg"},{"post_id":"clt84xvye0021jaot1re21auq","tag_id":"clt84xvyt0043jaot93tl4vlv","_id":"clt84xvyt0046jaot127ggmvh"},{"post_id":"clt84xvyf0025jaot2f5xho76","tag_id":"clt84xvys003xjaot5hmb7p73","_id":"clt84xvyu0049jaotge0eeh5y"},{"post_id":"clt84xvyf0025jaot2f5xho76","tag_id":"clt84xvyt0047jaot8nru23pv","_id":"clt84xvyu004ajaot97qpe7if"},{"post_id":"clt84xvyg0028jaotdpc922u5","tag_id":"clt84xvys003xjaot5hmb7p73","_id":"clt84xvyu004cjaot8qb3gc9t"},{"post_id":"clt84xvyh002fjaot22n7hlil","tag_id":"clt84xvyu004bjaotfocjgcqn","_id":"clt84xvyu004djaot7z9y0kw4"}],"Tag":[{"name":"ast","_id":"clt84xvxr0002jaotfj4p0njj"},{"name":"css module","_id":"clt84xvxv0007jaotfjd61ybj"},{"name":"changesets","_id":"clt84xvxx000bjaotcefzcu7w"},{"name":"es6","_id":"clt84xvy0000jjaot6a9k564n"},{"name":"javascript","_id":"clt84xvy2000pjaot71w6gpww"},{"name":"github actions","_id":"clt84xvyl0030jaothqppe3ib"},{"name":"react","_id":"clt84xvyq003hjaothj9d6eh6"},{"name":"zustand","_id":"clt84xvyr003njaot8e8ge2vh"},{"name":"react store","_id":"clt84xvyr003pjaot7w0xhruw"},{"name":"jest","_id":"clt84xvyr003qjaotazfu0mis"},{"name":"typescript","_id":"clt84xvys003tjaotg27ch1mz"},{"name":"webapi","_id":"clt84xvys003xjaot5hmb7p73"},{"name":"Background Tasks","_id":"clt84xvyt003zjaot8436717q"},{"name":"Badging","_id":"clt84xvyt0043jaot93tl4vlv"},{"name":"Beacon","_id":"clt84xvyt0047jaot8nru23pv"},{"name":"radix","_id":"clt84xvyu004bjaotfocjgcqn"}]}}
\ No newline at end of file
+{"meta":{"version":1,"warehouse":"4.0.2"},"models":{"Asset":[{"_id":"node_modules/hexo-theme-landscape/source/css/style.styl","path":"css/style.styl","modified":1,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/fancybox/jquery.fancybox.min.css","path":"fancybox/jquery.fancybox.min.css","modified":1,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/fancybox/jquery.fancybox.min.js","path":"fancybox/jquery.fancybox.min.js","modified":1,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/js/jquery-3.6.4.min.js","path":"js/jquery-3.6.4.min.js","modified":1,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/js/script.js","path":"js/script.js","modified":1,"renderable":1},{"_id":"node_modules/hexo-theme-landscape/source/css/images/banner.jpg","path":"css/images/banner.jpg","modified":1,"renderable":1}],"Cache":[{"_id":"source/_posts/ast-in-css-module-auto-match.md","hash":"57243d11328b5b236e753cf43e3aeaf92581d5c8","modified":1709287498540},{"_id":"source/_posts/changesets-in-monorepo.md","hash":"028e5a939286e4d64d530cfce91dfd8ce48ff8bc","modified":1709287498540},{"_id":"source/_posts/es6-destructuring.md","hash":"14256da572743cb2ec5dfa96e7bfbe36f0d1662c","modified":1709287498540},{"_id":"source/_posts/es6-map.md","hash":"1c004ce951d740f148ac18fc64df7261bdac2c94","modified":1709287498540},{"_id":"source/_posts/es6-operator.md","hash":"3ea73f56b24d7c69d59810aa2d1abc9d850a79f4","modified":1709287498540},{"_id":"source/_posts/es6-promise.md","hash":"65ecdccb17128c0680d96667944dc9c89a386ac5","modified":1709287498540},{"_id":"source/_posts/es6-proxy.md","hash":"b90e92ade7360df923dc577c4a82a8a7b1cd1e55","modified":1709287498540},{"_id":"source/_posts/es6-reflect.md","hash":"2106ce9eeba6a2fde6b0a1b745ec45aa18dfcc3c","modified":1709287498540},{"_id":"source/_posts/es6-set.md","hash":"90c7946c5ff3c077400cc0b41c39e12577f4839a","modified":1709287498540},{"_id":"source/_posts/es6-symbol.md","hash":"de300a1125fb2b54db5c5ed2159603ef76af7584","modified":1709287498540},{"_id":"source/_posts/github-actions-examples.md","hash":"447bddffb8264f48acf58ad353b7fc217564f892","modified":1709287498540},{"_id":"source/_posts/github-actions-intro.md","hash":"a83c76905a6e0914c86b1a926a8796ed856a0d5e","modified":1709287498540},{"_id":"source/_posts/github-actions-jobs.md","hash":"e9a026ecf09a82d48e770e2f92f095e3a27cbde8","modified":1709287498540},{"_id":"source/_posts/github-actions-learn.md","hash":"0c0b4c67d64f84b9824a2ddef979dcd76fb438e5","modified":1709287498540},{"_id":"source/_posts/github-actions-quickstart.md","hash":"74ba308dae7aed5228948aa59b7cc2b5b200b2fa","modified":1709287498540},{"_id":"source/_posts/github-actions-runs.md","hash":"8c85a6c4f08c951e1418e4dc0098a720d8b93e34","modified":1709287498540},{"_id":"source/_posts/github-actions-sample-eslint-in-pull-request.md","hash":"90053841520f1e0bc092fbf24ac1f975ab2e8070","modified":1709287498540},{"_id":"source/_posts/github-actions-workflows.md","hash":"c741cbe78aaacf2cd443d5de96826ca6c850fea0","modified":1709287498540},{"_id":"source/_posts/react-performance optimization.md","hash":"4c5ab18461891d2786c41e8993815e6135dfb1a4","modified":1709287498540},{"_id":"source/_posts/react-usedeferredvalue.md","hash":"f33a9314f722fe6eca1fcbf090ae11385dfe0771","modified":1709287498540},{"_id":"source/_posts/react-usetransition.md","hash":"6c1e1d0c887c1d92d76590a8059e369ba96b9409","modified":1709287498540},{"_id":"source/_posts/react-zustand.md","hash":"346576eb884e3157eb3e630225a314d9f0cd36fe","modified":1709287498540},{"_id":"source/_posts/snapshot-impact-on-coverage.md","hash":"58a3c96463a7f8f98f131e868f53f4d313d3af30","modified":1709287498540},{"_id":"source/_posts/tsconfig-json.md","hash":"7b1afc50798072eb2c6872bf14a39e362b5a9384","modified":1709287498540},{"_id":"source/_posts/typescript-means.md","hash":"bc4c5fbcdf3d022678d478ee7393daeb696ee0b8","modified":1709287498540},{"_id":"source/_posts/web-api-Background_Tasks_API.md","hash":"3aa6f43ef44402abea7e62e2690b1f283f147a73","modified":1709287505916},{"_id":"source/_posts/web-api-Badging_API.md","hash":"82453a1f547bc895f3c224194f480de5b282210a","modified":1709287505952},{"_id":"source/_posts/web-api-Battery_Status_API.md","hash":"9e019280cce5abcc0535bca84ede36f2f909f17a","modified":1709287505932},{"_id":"source/_posts/web-api-Beacon_API.md","hash":"2e8762cb50b47ef63be48e3a0a55560d5c802a3d","modified":1709287505952},{"_id":"source/_posts/web-api-Broadcast_Channel_API.md","hash":"8cd6fb25c31316b779803b0e884a2bbbe593d575","modified":1709287505924},{"_id":"source/_posts/web-api-readme.md","hash":"379c92b3c5600a64c20e5350851ce8414b2ffcf3","modified":1709287505908},{"_id":"source/_posts/what-is-es6.md","hash":"fd3d6c8c60ca914b00153cba27a84b3ad395a0b3","modified":1709287498540},{"_id":"source/_posts/write-components-elegantly-using-radix.md","hash":"a50deb6fbb3d782319c9c426dd24547d95d9298e","modified":1709287498540},{"_id":"node_modules/hexo-theme-landscape/LICENSE","hash":"c480fce396b23997ee23cc535518ffaaf7f458f8","modified":1709113853716},{"_id":"node_modules/hexo-theme-landscape/README.md","hash":"1a9b279e6dd29fd19245f913f0c4a316ffaa62db","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/_config.yml","hash":"b608c1f1322760dce9805285a602a95832730a2e","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/package.json","hash":"4bf95d52f77edf811f23f6d264a7493311a8d078","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/languages/de-DE.yml","hash":"d29d1c4256b7ed9df42f511c2ff0a23ad5fd6c1f","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/de.yml","hash":"3ebf0775abbee928c8d7bda943c191d166ded0d3","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/default.yml","hash":"ea5e6aee4cb14510793ac4593a3bddffe23e530c","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/en-GB.yml","hash":"ea5e6aee4cb14510793ac4593a3bddffe23e530c","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/en-US.yml","hash":"ea5e6aee4cb14510793ac4593a3bddffe23e530c","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/en.yml","hash":"3083f319b352d21d80fc5e20113ddf27889c9d11","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/es-ES.yml","hash":"7008a8fc91f18d2a735864817b8ebda30c7a2c66","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/es.yml","hash":"76edb1171b86532ef12cfd15f5f2c1ac3949f061","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/fr-FR.yml","hash":"8d09dbdab00a30a2870b56f7c0a7ca7deafa7b88","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/fr.yml","hash":"415e1c580ced8e4ce20b3b0aeedc3610341c76fb","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/hu-HU.yml","hash":"712d18664898fa21ba38d4973e90ef41a324ea25","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/hu.yml","hash":"284d557130bf54a74e7dcef9d42096130e4d9550","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/it-IT.yml","hash":"2cb6dc2fab9bd2dbe1c8bb869a9e8bf85a564fdd","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/it.yml","hash":"89b7d91306b2c1a0f3ac023b657bf974f798a1e8","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/ja-JP.yml","hash":"08481267e0c112e1f6855620f2837ec4c4a98bbd","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/ja.yml","hash":"a73e1b9c80fd6e930e2628b393bfe3fb716a21a9","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/ko-KR.yml","hash":"19209ad8f9d4057e8df808937f950eb265e1db69","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/ko.yml","hash":"881d6a0a101706e0452af81c580218e0bfddd9cf","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/mn-MN.yml","hash":"b9e5f3e7c0c2f779cf2cfded6db847b5941637ca","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/nl-NL.yml","hash":"5ebbc30021f05d99938f96dfff280392df7f91f0","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/mn.yml","hash":"2e7523951072a9403ead3840ad823edd1084c116","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/nl.yml","hash":"12ed59faba1fc4e8cdd1d42ab55ef518dde8039c","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/no.yml","hash":"965a171e70347215ec726952e63f5b47930931ef","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/pt-PT.yml","hash":"0f852b6b228e6ea59aa3540574bb89b233f2a098","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/pt.yml","hash":"57d07b75d434fbfc33b0ddb543021cb5f53318a8","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/ru-RU.yml","hash":"360d11a28bb768afb1dd15f63fa7fd3a8cc547ee","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/ru.yml","hash":"4fda301bbd8b39f2c714e2c934eccc4b27c0a2b0","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/th-TH.yml","hash":"ebfdba9bc4842c829473c1e6e4544344f182724d","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/th.yml","hash":"84a55b00aa01f03982be294e43c33a20e6d32862","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/tr.yml","hash":"a1cdbfa17682d7a971de8ab8588bf57c74224b5b","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/zh-CN.yml","hash":"1efd95774f401c80193eac6ee3f1794bfe93dc5a","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/languages/zh-TW.yml","hash":"53ce3000c5f767759c7d2c4efcaa9049788599c3","modified":1709113854196},{"_id":"node_modules/hexo-theme-landscape/layout/archive.ejs","hash":"2703b07cc8ac64ae46d1d263f4653013c7e1666b","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/category.ejs","hash":"765426a9c8236828dc34759e604cc2c52292835a","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/index.ejs","hash":"aa1b4456907bdb43e629be3931547e2d29ac58c8","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/layout.ejs","hash":"0d1765036e4874500e68256fedb7470e96eeb6ee","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/page.ejs","hash":"7d80e4e36b14d30a7cd2ac1f61376d9ebf264e8b","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/post.ejs","hash":"7d80e4e36b14d30a7cd2ac1f61376d9ebf264e8b","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/tag.ejs","hash":"eaa7b4ccb2ca7befb90142e4e68995fb1ea68b2e","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/scripts/fancybox.js","hash":"c857d7a5e4a5d71c743a009c5932bf84229db428","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/after-footer.ejs","hash":"377d257d5d16e0158a4405c72401517b074fd7ff","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/archive-post.ejs","hash":"c7a71425a946d05414c069ec91811b5c09a92c47","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/archive.ejs","hash":"7cb70a7a54f8c7ae49b10d1f37c0a9b74eab8826","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/article.ejs","hash":"56597e951203dd662a6d2c817c7c4f1c920d4a25","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/footer.ejs","hash":"3656eb692254346671abc03cb3ba1459829e0dce","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/gauges-analytics.ejs","hash":"21a1e2a3907d1a3dad1cd0ab855fe6735f233c74","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/google-analytics.ejs","hash":"2ea7442ea1e1a8ab4e41e26c563f58413b59a3d0","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/head.ejs","hash":"f05bced793b0314d4f2ef0c993b3a51d0b7d203a","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/header.ejs","hash":"6a5033d189554c9a6d42e2ef7952ae5c9742648e","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/mobile-nav.ejs","hash":"e952a532dfc583930a666b9d4479c32d4a84b44e","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/sidebar.ejs","hash":"930da35cc2d447a92e5ee8f835735e6fd2232469","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_widget/archive.ejs","hash":"beb4a86fcc82a9bdda9289b59db5a1988918bec3","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_widget/category.ejs","hash":"dd1e5af3c6af3f5d6c85dfd5ca1766faed6a0b05","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_widget/recent_posts.ejs","hash":"60c4b012dcc656438ff59997e60367e5a21ab746","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_widget/tag.ejs","hash":"2de380865df9ab5f577f7d3bcadf44261eb5faae","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_widget/tagcloud.ejs","hash":"b4a2079101643f63993dcdb32925c9b071763b46","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/source/css/_extend.styl","hash":"222fbe6d222531d61c1ef0f868c90f747b1c2ced","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_variables.styl","hash":"ca28281423ae57d76b6c1eb91cd845fd4e518bd6","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/style.styl","hash":"e55a1d92954ed20f6887f92dc727bb995a010a43","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/fancybox/jquery.fancybox.min.css","hash":"1be9b79be02a1cfc5d96c4a5e0feb8f472babd95","modified":1709113854184},{"_id":"node_modules/hexo-theme-landscape/source/js/script.js","hash":"49773efcb2221bbdf2d86f3f5c5ff2d841b528cc","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/category.ejs","hash":"c6bcd0e04271ffca81da25bcff5adf3d46f02fc0","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/date.ejs","hash":"f1458584b679545830b75bef2526e2f3eb931045","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/gallery.ejs","hash":"3d9d81a3c693ff2378ef06ddb6810254e509de5b","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/tag.ejs","hash":"2fcb0bf9c8847a644167a27824c9bb19ac74dd14","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/nav.ejs","hash":"16a904de7bceccbb36b4267565f2215704db2880","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/layout/_partial/post/title.ejs","hash":"4d7e62574ddf46de9b41605fe3140d77b5ddb26d","modified":1709113854188},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/archive.styl","hash":"db15f5677dc68f1730e82190bab69c24611ca292","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/article.styl","hash":"2d1f6f79ebf9cb55ebdb3865a2474437eb2b37c6","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/comment.styl","hash":"79d280d8d203abb3bd933ca9b8e38c78ec684987","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/footer.styl","hash":"e35a060b8512031048919709a8e7b1ec0e40bc1b","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/header.styl","hash":"268d2989acb06e2ddd06cc36a6918c6cd865476b","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/highlight.styl","hash":"9cc3b2927d814f2f6e8e188f9d3657b94f4c6ef3","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/mobile.styl","hash":"a399cf9e1e1cec3e4269066e2948d7ae5854d745","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/sidebar-aside.styl","hash":"890349df5145abf46ce7712010c89237900b3713","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/sidebar-bottom.styl","hash":"8fd4f30d319542babfd31f087ddbac550f000a8a","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_partial/sidebar.styl","hash":"404ec059dc674a48b9ab89cd83f258dec4dcb24d","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_util/grid.styl","hash":"0bf55ee5d09f193e249083602ac5fcdb1e571aed","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/_util/mixin.styl","hash":"44f32767d9fd3c1c08a60d91f181ee53c8f0dbb3","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/fancybox/jquery.fancybox.min.js","hash":"6181412e73966696d08e1e5b1243a572d0f22ba6","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/js/jquery-3.6.4.min.js","hash":"eda46747c71d38a880bee44f9a439c3858bb8f99","modified":1709113854192},{"_id":"node_modules/hexo-theme-landscape/source/css/images/banner.jpg","hash":"f44aa591089fcb3ec79770a1e102fd3289a7c6a6","modified":1709113854192},{"_id":"public/sitemap.xml","hash":"3a37510d10d2e4aa9557a127a5864c75b61e044e","modified":1709287507914},{"_id":"public/web-api-Broadcast_Channel_API/index.html","hash":"440bd66eb780c6c401f067f327dbeecba4443392","modified":1709287507914},{"_id":"public/web-api-Battery_Status_API/index.html","hash":"b9a80cda699c7a0a3cec3ddb1b4690eeefaa6e03","modified":1709287507914},{"_id":"public/web-api-Background_Tasks_API/index.html","hash":"120ac180a5b83e6edf6093afd606e430e1f71d50","modified":1709287507914},{"_id":"public/web-api-Beacon_API/index.html","hash":"cab651784bb33eab81f726a792aa570619a2cf62","modified":1709287507914},{"_id":"public/web-api-Badging_API/index.html","hash":"3d4351bbe1c7b4d9ad77e124c5841170ce690357","modified":1709287507914},{"_id":"public/web-api-readme/index.html","hash":"73ec254159d6baca0880992c49c6bb54a4722dde","modified":1709287507914},{"_id":"public/snapshot-impact-on-coverage/index.html","hash":"f63ad6c63ac3edbcd2f562ad94ae14aa4b850035","modified":1709287507914},{"_id":"public/github-actions-sample-eslint-in-pull-request/index.html","hash":"58ae186853c40fb118f7ae032a1ee44bbb81588b","modified":1709287507914},{"_id":"public/react-zustand/index.html","hash":"4812fdbdf604da6f3a952cc03055fefca337ef9f","modified":1709287507914},{"_id":"public/changesets-in-monorepo/index.html","hash":"cb660ed9a7c5721e28c6e0ba5320c322c1c44805","modified":1709287507914},{"_id":"public/tsconfig-json/index.html","hash":"9e431561420bf10883bc3ba5f6621649bb190224","modified":1709287507914},{"_id":"public/typescript-means/index.html","hash":"c99081f785e35877dcf68983855fa00db801dd35","modified":1709287507914},{"_id":"public/ast-in-css-module-auto-match/index.html","hash":"5eb59e8389eee4c686e785ec8bda04e63056982f","modified":1709287507914},{"_id":"public/react-usedeferredvalue/index.html","hash":"0b8645b407edbbc4fccf0fcd9621c407ae65c92f","modified":1709287507914},{"_id":"public/react-usetransition/index.html","hash":"767f61b71caea36f39100cbc7a56723071c3295e","modified":1709287507914},{"_id":"public/react-performance optimization/index.html","hash":"c98a9da9fbfa1fc895aa89407349356b071ca9bb","modified":1709287507914},{"_id":"public/es6-destructuring/index.html","hash":"96bfbc41c223e7cae9babaad44fef03969230b92","modified":1709287507914},{"_id":"public/es6-operator/index.html","hash":"13c842edb599d4233598a98cfe4d5f22a6ff2979","modified":1709287507914},{"_id":"public/es6-symbol/index.html","hash":"9ea3a3fa65d1f0c7bf65b347173c7297be9e6f17","modified":1709287507914},{"_id":"public/es6-set/index.html","hash":"5f6b85b9c441218bdc8fe70df6847a3dce6492c8","modified":1709287507914},{"_id":"public/es6-map/index.html","hash":"61c6f60f110f2039e273f50e5066e07bb600c804","modified":1709287507914},{"_id":"public/es6-proxy/index.html","hash":"af0d3e3f6f25a1e879a019133fd58b2e345efa2c","modified":1709287507914},{"_id":"public/es6-reflect/index.html","hash":"458a40d2d4c3d046f0de176cf57032081bb67224","modified":1709287507914},{"_id":"public/github-actions-runs/index.html","hash":"9f06acf7cd2f813070bc21a0cf7223064f2bdc96","modified":1709287507914},{"_id":"public/github-actions-jobs/index.html","hash":"3b7752f9bac52822226450762586c2a40343d6d1","modified":1709287507914},{"_id":"public/github-actions-workflows/index.html","hash":"f11f64b1f04f0bed17bbebcf1410549e8eca7b69","modified":1709287507914},{"_id":"public/github-actions-examples/index.html","hash":"d7e52d6c783d03b0ef1955f762f1ee14d2d24de7","modified":1709287507914},{"_id":"public/github-actions-learn/index.html","hash":"816bdd75fe1e1357a13797e734ea39a860f58449","modified":1709287507914},{"_id":"public/github-actions-quickstart/index.html","hash":"91a32a704ed2a65cf99216aa82266a6ce3d88e2c","modified":1709287507914},{"_id":"public/github-actions-intro/index.html","hash":"b4a6d3abec414affd98c32b657898726802caef7","modified":1709287507914},{"_id":"public/write-components-elegantly-using-radix/index.html","hash":"25235b4177d276e96a516b398d3407eba594ae65","modified":1709287507914},{"_id":"public/es6-promise/index.html","hash":"351036d41a919c8effdab4e8a76422a4116eb604","modified":1709287507914},{"_id":"public/what-is-es6/index.html","hash":"18be849944568415ca6eaddd886fec18a4c10c00","modified":1709287507914},{"_id":"public/archives/index.html","hash":"acb9ef259912a3cf8107c3b7111035337cdbe375","modified":1709287507914},{"_id":"public/archives/page/2/index.html","hash":"601a5c79e6bbede295ef72608a9fd0a8f243a1b8","modified":1709287507914},{"_id":"public/archives/page/3/index.html","hash":"e60bff41edc39b1619cda558b8078d2c191090cd","modified":1709287507914},{"_id":"public/archives/page/4/index.html","hash":"69f9c48313a9045b0733b53e8bfefd7da593fec9","modified":1709287507914},{"_id":"public/archives/2023/index.html","hash":"35612532a6e69995b2529cb92c44c7272fe8f34b","modified":1709287507914},{"_id":"public/archives/2023/page/2/index.html","hash":"571c1ac6038362002955a38d74d43ca19344e81d","modified":1709287507914},{"_id":"public/archives/2023/page/3/index.html","hash":"e3a9e99e2b920063c0b95f389657367b8e909b1c","modified":1709287507914},{"_id":"public/archives/2023/07/index.html","hash":"a1ed53f14d2f067ae0e70b99649444ed876b04b6","modified":1709287507914},{"_id":"public/archives/2023/07/page/2/index.html","hash":"b1c01d991e841f3e25c2f94e087051bb7f9cb377","modified":1709287507914},{"_id":"public/archives/2023/07/page/3/index.html","hash":"215a4bfc74f6710fa3715b7c68a8e9f6d02ed1d5","modified":1709287507914},{"_id":"public/archives/2023/08/index.html","hash":"375f422517b4032d77d0f4e1ad9269f4295f2456","modified":1709287507914},{"_id":"public/archives/2023/09/index.html","hash":"a6d83f6178db4a93538261cd934300182cd31500","modified":1709287507914},{"_id":"public/archives/2023/12/index.html","hash":"f5ab04dab697c850459308b5f8435d201c5a1bc3","modified":1709287507914},{"_id":"public/archives/2024/index.html","hash":"4cfb0fc9045d3976186c31d25fcf793aed712691","modified":1709287507914},{"_id":"public/archives/2024/01/index.html","hash":"500fab01380e21a8ccc23d12c907cb20fd5538ff","modified":1709287507914},{"_id":"public/archives/2024/02/index.html","hash":"716c4e60fcbbd251c132fe1c0269e798d0d1e82e","modified":1709287507914},{"_id":"public/archives/2024/03/index.html","hash":"9bee2c939defb9aec4ddba31763f48adb12c48ff","modified":1709287507914},{"_id":"public/categories/JavaScript/index.html","hash":"5e98b19fb53c5ffa597ea1d16265f7f410b12e07","modified":1709287507914},{"_id":"public/categories/JavaScript/page/2/index.html","hash":"63ff93a53af37c44bf3c1ffc9a130c4bf3b480de","modified":1709287507914},{"_id":"public/categories/工程化/index.html","hash":"b2357b480f69ac5dc402988c3b743530fe966fe9","modified":1709287507914},{"_id":"public/categories/工程化/page/2/index.html","hash":"8222d1555bc287fdac5883e87f239a091cce877c","modified":1709287507914},{"_id":"public/categories/React/index.html","hash":"848838bb8e872dfc260b1205113bc04cd3b31173","modified":1709287507914},{"_id":"public/categories/TypeScript/index.html","hash":"dcdb7a06cca38a22fa1338a7a370d6d88c2ea1be","modified":1709287507914},{"_id":"public/index.html","hash":"12301044fd7d4f9123ce0b1cba7a2da3f2af9dd3","modified":1709287507914},{"_id":"public/page/2/index.html","hash":"ddca467b576d380be7b04b0b11833c52770b0da8","modified":1709287507914},{"_id":"public/page/3/index.html","hash":"d529f143c7edf36f8833fab8bee23534a34dc6b8","modified":1709287507914},{"_id":"public/page/4/index.html","hash":"315f6a9091730bb26191fa51c538f60540ce9991","modified":1709287507914},{"_id":"public/tags/ast/index.html","hash":"dfef5bfeea1513681ff19604148ea49c991dae4c","modified":1709287507914},{"_id":"public/tags/css-module/index.html","hash":"cd3499a24f53cf7f6eb99ee46a5b73d1c9cc0be5","modified":1709287507914},{"_id":"public/tags/changesets/index.html","hash":"a8da703e00848cde6e03420aa4f8698aed4f2014","modified":1709287507914},{"_id":"public/tags/es6/index.html","hash":"4c3ae325fc96eb8642b21a15068d6daacd080641","modified":1709287507914},{"_id":"public/tags/javascript/index.html","hash":"3ae582bea501a8aacf22131a4b3d3f522de20667","modified":1709287507914},{"_id":"public/tags/github-actions/index.html","hash":"1e11f8ab4577d9701a4c6ac55b9ed127a11d1749","modified":1709287507914},{"_id":"public/tags/react/index.html","hash":"1e8b0b098f1d8c07a46b026300185fd506228c42","modified":1709287507914},{"_id":"public/tags/zustand/index.html","hash":"a2121f93da392e17c26fa1eec5e9ad089045ba4b","modified":1709287507914},{"_id":"public/tags/react-store/index.html","hash":"6611c118b768ca66575ce57b664880abdbed8d81","modified":1709287507914},{"_id":"public/tags/jest/index.html","hash":"eb5e32f6e290a0bb52d3ab4a142474ab598d0611","modified":1709287507914},{"_id":"public/tags/typescript/index.html","hash":"0023f0da0d03b78f897a3a819db933238899e242","modified":1709287507914},{"_id":"public/tags/webapi/index.html","hash":"f1ee8cb71436adc3d1573c92f214cd58bc974699","modified":1709287507914},{"_id":"public/tags/Background-Tasks/index.html","hash":"fc81b4a436698d633d78fa88b313f75bcd21d646","modified":1709287507914},{"_id":"public/tags/Battery-Status/index.html","hash":"649c1a23e87455f6cb98f0f8f9d8aca145d99f32","modified":1709287507914},{"_id":"public/tags/Badging/index.html","hash":"2a125a3a7933e0bc8ea6d22118c89ce768f705ea","modified":1709287507914},{"_id":"public/tags/Beacon/index.html","hash":"00e1ef25866602375a424b67feb0714b79b5f9e9","modified":1709287507914},{"_id":"public/tags/Broadcast-Channel/index.html","hash":"db5a7b0fca4aa01cb98331a94c71bf95d41fc063","modified":1709287507914},{"_id":"public/tags/radix/index.html","hash":"88950140356fc17d931f38e0f338046faa17846f","modified":1709287507914},{"_id":"public/css/style.css","hash":"ddb3792605d744ab3d9f0a649c82b62e9b16daa6","modified":1709287507914},{"_id":"public/fancybox/jquery.fancybox.min.css","hash":"1be9b79be02a1cfc5d96c4a5e0feb8f472babd95","modified":1709287507914},{"_id":"public/fancybox/jquery.fancybox.min.js","hash":"6181412e73966696d08e1e5b1243a572d0f22ba6","modified":1709287507914},{"_id":"public/js/jquery-3.6.4.min.js","hash":"eda46747c71d38a880bee44f9a439c3858bb8f99","modified":1709287507914},{"_id":"public/js/script.js","hash":"49773efcb2221bbdf2d86f3f5c5ff2d841b528cc","modified":1709287507914},{"_id":"public/css/images/banner.jpg","hash":"f44aa591089fcb3ec79770a1e102fd3289a7c6a6","modified":1709287507914}],"Category":[{"name":"JavaScript","_id":"clt8hne6n0004i8oh43m1hw74"},{"name":"工程化","_id":"clt8hne6p0008i8oh71e23h3h"},{"name":"React","_id":"clt8hne75001hi8ohbu9u46rh"},{"name":"TypeScript","_id":"clt8hne7a0023i8oh66x482p2"}],"Data":[],"Page":[],"Post":[{"title":"AST 在 css module 自动匹配中的应用","date":"2023-07-26T00:03:32.000Z","url":"ast-in-css-module-auto-match","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/21](https://github.com/taoliujun/blog/issues/21)\n\n<!--hexo\n---\nurl: ast-in-css-module-auto-match\ntags:\n  - ast\n  - css module\n---\n-->\n\n# AST 在 css module 自动匹配中的应用\n\n我们已经非常明白为什么在项目中要使用 css modules，可直接说到“自动匹配”有点莫名其妙，所以有必要介绍下为什么提出这个问题。\n\n第一步，我想用官方的话来镇住大家。\n\n> [css modules](https://github.com/css-modules/css-modules)的官方描述：A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.\n\n官方只提供了一个规范的描述，本身并未提供工具去实现。但无需担心，常见的打包工具都支持了 css modules。比如 webpack 的[css-loader](https://webpack.js.org/loaders/css-loader/)。\n\n## css-loader\n\ncss-loader 在很早就支持 modules，只需要配置`modules`属性，程序员们使用它的方式是各种各样的。有设置 local modules，在 css 文件中使用`:global`来支持全局样式的；有设置 global modules，在 css 文件中使用`:local`来支持局部样式的。这些都是可以的，但是都需要在 css 文件中做一些特殊的标记，这样就会导致 css 文件的可读性变差。\n\n后来人们学会了配置根据 css 文件名中是否包含`.modules.`或`.global.`字符串来启用/禁用该文件的 modules 功能。于是项目里有大量的*.modules.css/*.global.css 文件，而通过文件名去匹配某个功能的开关却恰恰是程序设计的忌讳。\n\n## 符合直觉的自动识别\n\n我就在 \\*.modules.css 文件堆中浑浑噩噩的度过了好多年，直到近两年的某一天在[UmiJS](https://umijs.org/)脚手架中发现了这个奇特的细节。\n\n**使用`import xxx from './styles.css'`启用 modules，使用`import './styles.css'`启用 global。**\n\n这思路对我来说简直是惊为天人，无关乎它的技术细节。因为在直觉中，`import module`就是要直接执行它，而`import xxx from module`就是要使用它的某些东西。对于 css 是同样的，既要直接引入全局样式，又要使用局部样式。\n\n## 技术细节\n\nwebpack 的 module rules 支持使用`resourceQuery`去匹配模块文件名的 query 部分，所以为 css-loader 增加一个 rules 如下：\n\n```typescript\n{\n  test: /\\.css$/,\n  oneOf: [\n    {\n      resourceQuery: /modules/,\n      use: [\n        { loader: 'style-loader' },\n        { loader: 'css-loader', options: { modules: true } },\n      ],\n    },\n    {\n      use: [\n        { loader: 'style-loader' },\n        { loader: 'css-loader' },\n      ],\n    },\n  ],\n}\n```\n\n如此，使用`import xxx from './styles.css?modules'`就会命中第一个规则而启用 modules 功能了。\n\n但显然这样写太麻烦了，有什么办法让它在写`import xxx from './styles.css'`时候，自动加上`?modules`而启用 css modules 呢？\n\n答案就是使用 AST。由于项目几乎都在使用 babel 去处理 js 文件，所以可以直接使用 babel 插件去分析 AST 从而给 css 文件加上`?modules`后缀即可。就直接看[umijs 的插件代码](https://github.com/umijs/umi/blob/master/packages/babel-preset-umi/src/plugins/autoCSSModules.ts):\n\n```typescript\nimport * as Babel from \"@umijs/bundler-utils/compiled/babel/core\";\nimport * as t from \"@umijs/bundler-utils/compiled/babel/types\";\nimport { extname } from \"path\";\n\nconst CSS_EXT_NAMES = [\".css\", \".less\", \".sass\", \".scss\", \".stylus\", \".styl\"];\n\nexport default function () {\n  return {\n    visitor: {\n      ImportDeclaration(path: Babel.NodePath<t.ImportDeclaration>) {\n        const {\n          specifiers,\n          source,\n          source: { value },\n        } = path.node;\n        if (specifiers.length && CSS_EXT_NAMES.includes(extname(value))) {\n          source.value = `${value}?modules`;\n        }\n      },\n\n      // more codes\n    },\n  };\n}\n```\n\n如上代码中，AST `specifiers` 里有内容，说明是`import xxx from module`的形式，而`source.value`就是 css 文件的路径，所以直接加上`?modules`后缀即可。\n\n## 参考\n\n- https://github.com/css-modules/css-modules\n- https://webpack.js.org/loaders/css-loader/#modules\n- https://www.npmjs.com/package/@umijs/babel-plugin-auto-css-modules\n\n\n\n\n","source":"_posts/ast-in-css-module-auto-match.md","raw":"---\ntitle: \"AST 在 css module 自动匹配中的应用\"\ndate: \"2023-07-26T08:03:32Z\"\ncategories:\n  - [JavaScript]\n  - [工程化]\n\nurl: ast-in-css-module-auto-match\ntags:\n  - ast\n  - css module\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/21](https://github.com/taoliujun/blog/issues/21)\n\n<!--hexo\n---\nurl: ast-in-css-module-auto-match\ntags:\n  - ast\n  - css module\n---\n-->\n\n# AST 在 css module 自动匹配中的应用\n\n我们已经非常明白为什么在项目中要使用 css modules，可直接说到“自动匹配”有点莫名其妙，所以有必要介绍下为什么提出这个问题。\n\n第一步，我想用官方的话来镇住大家。\n\n> [css modules](https://github.com/css-modules/css-modules)的官方描述：A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.\n\n官方只提供了一个规范的描述，本身并未提供工具去实现。但无需担心，常见的打包工具都支持了 css modules。比如 webpack 的[css-loader](https://webpack.js.org/loaders/css-loader/)。\n\n## css-loader\n\ncss-loader 在很早就支持 modules，只需要配置`modules`属性，程序员们使用它的方式是各种各样的。有设置 local modules，在 css 文件中使用`:global`来支持全局样式的；有设置 global modules，在 css 文件中使用`:local`来支持局部样式的。这些都是可以的，但是都需要在 css 文件中做一些特殊的标记，这样就会导致 css 文件的可读性变差。\n\n后来人们学会了配置根据 css 文件名中是否包含`.modules.`或`.global.`字符串来启用/禁用该文件的 modules 功能。于是项目里有大量的*.modules.css/*.global.css 文件，而通过文件名去匹配某个功能的开关却恰恰是程序设计的忌讳。\n\n## 符合直觉的自动识别\n\n我就在 \\*.modules.css 文件堆中浑浑噩噩的度过了好多年，直到近两年的某一天在[UmiJS](https://umijs.org/)脚手架中发现了这个奇特的细节。\n\n**使用`import xxx from './styles.css'`启用 modules，使用`import './styles.css'`启用 global。**\n\n这思路对我来说简直是惊为天人，无关乎它的技术细节。因为在直觉中，`import module`就是要直接执行它，而`import xxx from module`就是要使用它的某些东西。对于 css 是同样的，既要直接引入全局样式，又要使用局部样式。\n\n## 技术细节\n\nwebpack 的 module rules 支持使用`resourceQuery`去匹配模块文件名的 query 部分，所以为 css-loader 增加一个 rules 如下：\n\n```typescript\n{\n  test: /\\.css$/,\n  oneOf: [\n    {\n      resourceQuery: /modules/,\n      use: [\n        { loader: 'style-loader' },\n        { loader: 'css-loader', options: { modules: true } },\n      ],\n    },\n    {\n      use: [\n        { loader: 'style-loader' },\n        { loader: 'css-loader' },\n      ],\n    },\n  ],\n}\n```\n\n如此，使用`import xxx from './styles.css?modules'`就会命中第一个规则而启用 modules 功能了。\n\n但显然这样写太麻烦了，有什么办法让它在写`import xxx from './styles.css'`时候，自动加上`?modules`而启用 css modules 呢？\n\n答案就是使用 AST。由于项目几乎都在使用 babel 去处理 js 文件，所以可以直接使用 babel 插件去分析 AST 从而给 css 文件加上`?modules`后缀即可。就直接看[umijs 的插件代码](https://github.com/umijs/umi/blob/master/packages/babel-preset-umi/src/plugins/autoCSSModules.ts):\n\n```typescript\nimport * as Babel from \"@umijs/bundler-utils/compiled/babel/core\";\nimport * as t from \"@umijs/bundler-utils/compiled/babel/types\";\nimport { extname } from \"path\";\n\nconst CSS_EXT_NAMES = [\".css\", \".less\", \".sass\", \".scss\", \".stylus\", \".styl\"];\n\nexport default function () {\n  return {\n    visitor: {\n      ImportDeclaration(path: Babel.NodePath<t.ImportDeclaration>) {\n        const {\n          specifiers,\n          source,\n          source: { value },\n        } = path.node;\n        if (specifiers.length && CSS_EXT_NAMES.includes(extname(value))) {\n          source.value = `${value}?modules`;\n        }\n      },\n\n      // more codes\n    },\n  };\n}\n```\n\n如上代码中，AST `specifiers` 里有内容，说明是`import xxx from module`的形式，而`source.value`就是 css 文件的路径，所以直接加上`?modules`后缀即可。\n\n## 参考\n\n- https://github.com/css-modules/css-modules\n- https://webpack.js.org/loaders/css-loader/#modules\n- https://www.npmjs.com/package/@umijs/babel-plugin-auto-css-modules\n\n\n\n\n","slug":"ast-in-css-module-auto-match","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne6g0000i8ohaup9dgy1","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/21\">https://github.com/taoliujun/blog/issues/21</a></p>\n<!--hexo\n---\nurl: ast-in-css-module-auto-match\ntags:\n  - ast\n  - css module\n---\n-->\n\n<h1 id=\"AST-在-css-module-自动匹配中的应用\"><a href=\"#AST-在-css-module-自动匹配中的应用\" class=\"headerlink\" title=\"AST 在 css module 自动匹配中的应用\"></a>AST 在 css module 自动匹配中的应用</h1><p>我们已经非常明白为什么在项目中要使用 css modules，可直接说到“自动匹配”有点莫名其妙，所以有必要介绍下为什么提出这个问题。</p>\n<p>第一步，我想用官方的话来镇住大家。</p>\n<blockquote>\n<p><a href=\"https://github.com/css-modules/css-modules\">css modules</a>的官方描述：A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.</p>\n</blockquote>\n<p>官方只提供了一个规范的描述，本身并未提供工具去实现。但无需担心，常见的打包工具都支持了 css modules。比如 webpack 的<a href=\"https://webpack.js.org/loaders/css-loader/\">css-loader</a>。</p>\n<h2 id=\"css-loader\"><a href=\"#css-loader\" class=\"headerlink\" title=\"css-loader\"></a>css-loader</h2><p>css-loader 在很早就支持 modules，只需要配置<code>modules</code>属性，程序员们使用它的方式是各种各样的。有设置 local modules，在 css 文件中使用<code>:global</code>来支持全局样式的；有设置 global modules，在 css 文件中使用<code>:local</code>来支持局部样式的。这些都是可以的，但是都需要在 css 文件中做一些特殊的标记，这样就会导致 css 文件的可读性变差。</p>\n<p>后来人们学会了配置根据 css 文件名中是否包含<code>.modules.</code>或<code>.global.</code>字符串来启用&#x2F;禁用该文件的 modules 功能。于是项目里有大量的*.modules.css&#x2F;*.global.css 文件，而通过文件名去匹配某个功能的开关却恰恰是程序设计的忌讳。</p>\n<h2 id=\"符合直觉的自动识别\"><a href=\"#符合直觉的自动识别\" class=\"headerlink\" title=\"符合直觉的自动识别\"></a>符合直觉的自动识别</h2><p>我就在 *.modules.css 文件堆中浑浑噩噩的度过了好多年，直到近两年的某一天在<a href=\"https://umijs.org/\">UmiJS</a>脚手架中发现了这个奇特的细节。</p>\n<p><strong>使用<code>import xxx from &#39;./styles.css&#39;</code>启用 modules，使用<code>import &#39;./styles.css&#39;</code>启用 global。</strong></p>\n<p>这思路对我来说简直是惊为天人，无关乎它的技术细节。因为在直觉中，<code>import module</code>就是要直接执行它，而<code>import xxx from module</code>就是要使用它的某些东西。对于 css 是同样的，既要直接引入全局样式，又要使用局部样式。</p>\n<h2 id=\"技术细节\"><a href=\"#技术细节\" class=\"headerlink\" title=\"技术细节\"></a>技术细节</h2><p>webpack 的 module rules 支持使用<code>resourceQuery</code>去匹配模块文件名的 query 部分，所以为 css-loader 增加一个 rules 如下：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><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\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">test</span>: <span class=\"regexp\">/\\.css$/</span>,</span><br><span class=\"line\">  <span class=\"attr\">oneOf</span>: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">resourceQuery</span>: <span class=\"regexp\">/modules/</span>,</span><br><span class=\"line\">      <span class=\"attr\">use</span>: [</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;style-loader&#x27;</span> &#125;,</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;css-loader&#x27;</span>, <span class=\"attr\">options</span>: &#123; <span class=\"attr\">modules</span>: <span class=\"literal\">true</span> &#125; &#125;,</span><br><span class=\"line\">      ],</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">use</span>: [</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;style-loader&#x27;</span> &#125;,</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;css-loader&#x27;</span> &#125;,</span><br><span class=\"line\">      ],</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">  ],</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>如此，使用<code>import xxx from &#39;./styles.css?modules&#39;</code>就会命中第一个规则而启用 modules 功能了。</p>\n<p>但显然这样写太麻烦了，有什么办法让它在写<code>import xxx from &#39;./styles.css&#39;</code>时候，自动加上<code>?modules</code>而启用 css modules 呢？</p>\n<p>答案就是使用 AST。由于项目几乎都在使用 babel 去处理 js 文件，所以可以直接使用 babel 插件去分析 AST 从而给 css 文件加上<code>?modules</code>后缀即可。就直接看<a href=\"https://github.com/umijs/umi/blob/master/packages/babel-preset-umi/src/plugins/autoCSSModules.ts\">umijs 的插件代码</a>:</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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\">import</span> * <span class=\"keyword\">as</span> <span class=\"title class_\">Babel</span> <span class=\"keyword\">from</span> <span class=\"string\">&quot;@umijs/bundler-utils/compiled/babel/core&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> * <span class=\"keyword\">as</span> t <span class=\"keyword\">from</span> <span class=\"string\">&quot;@umijs/bundler-utils/compiled/babel/types&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; extname &#125; <span class=\"keyword\">from</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_\">CSS_EXT_NAMES</span> = [<span class=\"string\">&quot;.css&quot;</span>, <span class=\"string\">&quot;.less&quot;</span>, <span class=\"string\">&quot;.sass&quot;</span>, <span class=\"string\">&quot;.scss&quot;</span>, <span class=\"string\">&quot;.stylus&quot;</span>, <span class=\"string\">&quot;.styl&quot;</span>];</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</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\">visitor</span>: &#123;</span><br><span class=\"line\">      <span class=\"title class_\">ImportDeclaration</span>(<span class=\"attr\">path</span>: <span class=\"title class_\">Babel</span>.<span class=\"property\">NodePath</span>&lt;t.<span class=\"property\">ImportDeclaration</span>&gt;) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">const</span> &#123;</span><br><span class=\"line\">          specifiers,</span><br><span class=\"line\">          source,</span><br><span class=\"line\">          <span class=\"attr\">source</span>: &#123; value &#125;,</span><br><span class=\"line\">        &#125; = path.<span class=\"property\">node</span>;</span><br><span class=\"line\">        <span class=\"keyword\">if</span> (specifiers.<span class=\"property\">length</span> &amp;&amp; <span class=\"variable constant_\">CSS_EXT_NAMES</span>.<span class=\"title function_\">includes</span>(<span class=\"title function_\">extname</span>(value))) &#123;</span><br><span class=\"line\">          source.<span class=\"property\">value</span> = <span class=\"string\">`<span class=\"subst\">$&#123;value&#125;</span>?modules`</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\">// more codes</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>\n\n<p>如上代码中，AST <code>specifiers</code> 里有内容，说明是<code>import xxx from module</code>的形式，而<code>source.value</code>就是 css 文件的路径，所以直接加上<code>?modules</code>后缀即可。</p>\n<h2 id=\"参考\"><a href=\"#参考\" class=\"headerlink\" title=\"参考\"></a>参考</h2><ul>\n<li><a href=\"https://github.com/css-modules/css-modules\">https://github.com/css-modules/css-modules</a></li>\n<li><a href=\"https://webpack.js.org/loaders/css-loader/#modules\">https://webpack.js.org/loaders/css-loader/#modules</a></li>\n<li><a href=\"https://www.npmjs.com/package/@umijs/babel-plugin-auto-css-modules\">https://www.npmjs.com/package/@umijs/babel-plugin-auto-css-modules</a></li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/21\">https://github.com/taoliujun/blog/issues/21</a></p>\n<!--hexo\n---\nurl: ast-in-css-module-auto-match\ntags:\n  - ast\n  - css module\n---\n-->\n\n<h1 id=\"AST-在-css-module-自动匹配中的应用\"><a href=\"#AST-在-css-module-自动匹配中的应用\" class=\"headerlink\" title=\"AST 在 css module 自动匹配中的应用\"></a>AST 在 css module 自动匹配中的应用</h1><p>我们已经非常明白为什么在项目中要使用 css modules，可直接说到“自动匹配”有点莫名其妙，所以有必要介绍下为什么提出这个问题。</p>\n<p>第一步，我想用官方的话来镇住大家。</p>\n<blockquote>\n<p><a href=\"https://github.com/css-modules/css-modules\">css modules</a>的官方描述：A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.</p>\n</blockquote>\n<p>官方只提供了一个规范的描述，本身并未提供工具去实现。但无需担心，常见的打包工具都支持了 css modules。比如 webpack 的<a href=\"https://webpack.js.org/loaders/css-loader/\">css-loader</a>。</p>\n<h2 id=\"css-loader\"><a href=\"#css-loader\" class=\"headerlink\" title=\"css-loader\"></a>css-loader</h2><p>css-loader 在很早就支持 modules，只需要配置<code>modules</code>属性，程序员们使用它的方式是各种各样的。有设置 local modules，在 css 文件中使用<code>:global</code>来支持全局样式的；有设置 global modules，在 css 文件中使用<code>:local</code>来支持局部样式的。这些都是可以的，但是都需要在 css 文件中做一些特殊的标记，这样就会导致 css 文件的可读性变差。</p>\n<p>后来人们学会了配置根据 css 文件名中是否包含<code>.modules.</code>或<code>.global.</code>字符串来启用&#x2F;禁用该文件的 modules 功能。于是项目里有大量的*.modules.css&#x2F;*.global.css 文件，而通过文件名去匹配某个功能的开关却恰恰是程序设计的忌讳。</p>\n<h2 id=\"符合直觉的自动识别\"><a href=\"#符合直觉的自动识别\" class=\"headerlink\" title=\"符合直觉的自动识别\"></a>符合直觉的自动识别</h2><p>我就在 *.modules.css 文件堆中浑浑噩噩的度过了好多年，直到近两年的某一天在<a href=\"https://umijs.org/\">UmiJS</a>脚手架中发现了这个奇特的细节。</p>\n<p><strong>使用<code>import xxx from &#39;./styles.css&#39;</code>启用 modules，使用<code>import &#39;./styles.css&#39;</code>启用 global。</strong></p>\n<p>这思路对我来说简直是惊为天人，无关乎它的技术细节。因为在直觉中，<code>import module</code>就是要直接执行它，而<code>import xxx from module</code>就是要使用它的某些东西。对于 css 是同样的，既要直接引入全局样式，又要使用局部样式。</p>\n<h2 id=\"技术细节\"><a href=\"#技术细节\" class=\"headerlink\" title=\"技术细节\"></a>技术细节</h2><p>webpack 的 module rules 支持使用<code>resourceQuery</code>去匹配模块文件名的 query 部分，所以为 css-loader 增加一个 rules 如下：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><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\">&#123;</span><br><span class=\"line\">  <span class=\"attr\">test</span>: <span class=\"regexp\">/\\.css$/</span>,</span><br><span class=\"line\">  <span class=\"attr\">oneOf</span>: [</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">resourceQuery</span>: <span class=\"regexp\">/modules/</span>,</span><br><span class=\"line\">      <span class=\"attr\">use</span>: [</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;style-loader&#x27;</span> &#125;,</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;css-loader&#x27;</span>, <span class=\"attr\">options</span>: &#123; <span class=\"attr\">modules</span>: <span class=\"literal\">true</span> &#125; &#125;,</span><br><span class=\"line\">      ],</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">use</span>: [</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;style-loader&#x27;</span> &#125;,</span><br><span class=\"line\">        &#123; <span class=\"attr\">loader</span>: <span class=\"string\">&#x27;css-loader&#x27;</span> &#125;,</span><br><span class=\"line\">      ],</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">  ],</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>如此，使用<code>import xxx from &#39;./styles.css?modules&#39;</code>就会命中第一个规则而启用 modules 功能了。</p>\n<p>但显然这样写太麻烦了，有什么办法让它在写<code>import xxx from &#39;./styles.css&#39;</code>时候，自动加上<code>?modules</code>而启用 css modules 呢？</p>\n<p>答案就是使用 AST。由于项目几乎都在使用 babel 去处理 js 文件，所以可以直接使用 babel 插件去分析 AST 从而给 css 文件加上<code>?modules</code>后缀即可。就直接看<a href=\"https://github.com/umijs/umi/blob/master/packages/babel-preset-umi/src/plugins/autoCSSModules.ts\">umijs 的插件代码</a>:</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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\">import</span> * <span class=\"keyword\">as</span> <span class=\"title class_\">Babel</span> <span class=\"keyword\">from</span> <span class=\"string\">&quot;@umijs/bundler-utils/compiled/babel/core&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> * <span class=\"keyword\">as</span> t <span class=\"keyword\">from</span> <span class=\"string\">&quot;@umijs/bundler-utils/compiled/babel/types&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; extname &#125; <span class=\"keyword\">from</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_\">CSS_EXT_NAMES</span> = [<span class=\"string\">&quot;.css&quot;</span>, <span class=\"string\">&quot;.less&quot;</span>, <span class=\"string\">&quot;.sass&quot;</span>, <span class=\"string\">&quot;.scss&quot;</span>, <span class=\"string\">&quot;.stylus&quot;</span>, <span class=\"string\">&quot;.styl&quot;</span>];</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</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\">visitor</span>: &#123;</span><br><span class=\"line\">      <span class=\"title class_\">ImportDeclaration</span>(<span class=\"attr\">path</span>: <span class=\"title class_\">Babel</span>.<span class=\"property\">NodePath</span>&lt;t.<span class=\"property\">ImportDeclaration</span>&gt;) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">const</span> &#123;</span><br><span class=\"line\">          specifiers,</span><br><span class=\"line\">          source,</span><br><span class=\"line\">          <span class=\"attr\">source</span>: &#123; value &#125;,</span><br><span class=\"line\">        &#125; = path.<span class=\"property\">node</span>;</span><br><span class=\"line\">        <span class=\"keyword\">if</span> (specifiers.<span class=\"property\">length</span> &amp;&amp; <span class=\"variable constant_\">CSS_EXT_NAMES</span>.<span class=\"title function_\">includes</span>(<span class=\"title function_\">extname</span>(value))) &#123;</span><br><span class=\"line\">          source.<span class=\"property\">value</span> = <span class=\"string\">`<span class=\"subst\">$&#123;value&#125;</span>?modules`</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\">// more codes</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>\n\n<p>如上代码中，AST <code>specifiers</code> 里有内容，说明是<code>import xxx from module</code>的形式，而<code>source.value</code>就是 css 文件的路径，所以直接加上<code>?modules</code>后缀即可。</p>\n<h2 id=\"参考\"><a href=\"#参考\" class=\"headerlink\" title=\"参考\"></a>参考</h2><ul>\n<li><a href=\"https://github.com/css-modules/css-modules\">https://github.com/css-modules/css-modules</a></li>\n<li><a href=\"https://webpack.js.org/loaders/css-loader/#modules\">https://webpack.js.org/loaders/css-loader/#modules</a></li>\n<li><a href=\"https://www.npmjs.com/package/@umijs/babel-plugin-auto-css-modules\">https://www.npmjs.com/package/@umijs/babel-plugin-auto-css-modules</a></li>\n</ul>\n"},{"title":"在monorepo中使用changesets","date":"2023-12-08T01:44:30.000Z","url":"changesets-in-monorepo","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/33](https://github.com/taoliujun/blog/issues/33)\n\n<!--hexo\n---\nurl: changesets-in-monorepo\ntags:\n  - changesets\n---\n-->\n\n`changesets`是目前(2023年)最流行的(多)包管理和发布工具了，使用它可以方便的生成CHANGELOG、打版本号和发布。\n\n项目链接：[changesets](https://github.com/changesets/changesets)\n\n我这有个[pnpm monorepo](https://github.com/taoliujun/npm-packages)库，现在在用`changesets`管理发布版本了。\n\n## 安装\n\n```shell\npnpm add -Dw @changesets/cli @changesets/changelog-git\n```\n\n`@changesets/cli`是必须安装的，`@changesets/changelog-git`是CHANGELOG生成风格，可以选择其他的，也可以不安装，用默认的。\n\n## 初始化\n\n```shell\npnpm changeset init\n```\n\n生成`.changeset`目录，里面有`config.json`，我修改了一下，如下：\n\n```json\n{\n  \"$schema\": \"https://unpkg.com/@changesets/config@3.0.0/schema.json\",\n  \"changelog\": \"@changesets/changelog-git\",\n  // 在changeset add和changeset version后，自动运行git commit\n  \"commit\": true,\n  // 如果要发布到npm官方仓库，就设置成public\n  \"access\": \"public\",\n  // 我的仓库的主分支是master\n  \"baseBranch\": \"master\",\n  \"fixed\": [],\n  \"linked\": [],\n  \"updateInternalDependencies\": \"patch\",\n  \"ignore\": []\n}\n```\n\n## 发布一个包\n\n现在，我要给包pack1添加一些新特性，和修复一些bug。\n\n特性代码有点长，我要写好几天的代码。仍然按照以往的commit message的频率和风格去提交代码。这个commit message里的type和subject，**都不会影响CHANGELOG和包版本号**。\n\n### 随时添加一个changeset\n\n当我完成一个特性，或修复了一个bug，可以随时打一个changeset标记，这样就可以记录下来，方便后面生成CHANGELOG。再次说明，这个changeset标记和commit message是互不冲突的，changeset标记是用来管理包版本的，而commit message是用来管理代码的。\n\n*这和之前使用lerna有点区别，lerna是根据commit message来决定版本号和CHANGLOG的，而`changesets`是根据`changeset add`和`changeset version`来决定的。*\n\n`changeset`这么做的目的是，让开发者将包管理和代码管理分开，这样更加灵活。\n\n```base\n// 添加一个changeset标记\npnpm changeset add\n```\n\n会出现交互，让你选择要打标记的包，版本号等。\n\n#### 选版本遇到一个坑，总是显示`major`？？？\n\n`changeset`老版本会让你上下选择版本类型，而新的`changeset`的交互改了，在提示`major`的时候，未选择的包，按回车后会进入到选择`minor`的步骤。\n\n### 生成CHANGELOG和版本号\n\n终于，我完成了所有的特性和bug，准备发布了。\n\n可以查看`.changeset`下有很多`.md`文件，这些就是之前随时添加的changeset标记。每一个文件描述了改动的包、改动的类型、改动的内容。在下一步操作之前，可以直接修改这些`.md`文件，来修改上述提到的类型、内容等。\n\n准备好了，运行\n\n```shell\npnpm changeset version\n```\n\nchangeset会生成CHANGELOG和版本号，在最终发布之前，最好查看一下。\n\n### 发布\n\n```\npnpm changeset publish\n```\n\n它会自动调用`pnpm publish`，发布到npm仓库，并且打上tag。不过可惜的是，要手动push tag到远程：`git push --tags`。\n\n\n\n","source":"_posts/changesets-in-monorepo.md","raw":"---\ntitle: \"在monorepo中使用changesets\"\ndate: \"2023-12-08T09:44:30Z\"\ncategories:\n  - [工程化]\n\nurl: changesets-in-monorepo\ntags:\n  - changesets\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/33](https://github.com/taoliujun/blog/issues/33)\n\n<!--hexo\n---\nurl: changesets-in-monorepo\ntags:\n  - changesets\n---\n-->\n\n`changesets`是目前(2023年)最流行的(多)包管理和发布工具了，使用它可以方便的生成CHANGELOG、打版本号和发布。\n\n项目链接：[changesets](https://github.com/changesets/changesets)\n\n我这有个[pnpm monorepo](https://github.com/taoliujun/npm-packages)库，现在在用`changesets`管理发布版本了。\n\n## 安装\n\n```shell\npnpm add -Dw @changesets/cli @changesets/changelog-git\n```\n\n`@changesets/cli`是必须安装的，`@changesets/changelog-git`是CHANGELOG生成风格，可以选择其他的，也可以不安装，用默认的。\n\n## 初始化\n\n```shell\npnpm changeset init\n```\n\n生成`.changeset`目录，里面有`config.json`，我修改了一下，如下：\n\n```json\n{\n  \"$schema\": \"https://unpkg.com/@changesets/config@3.0.0/schema.json\",\n  \"changelog\": \"@changesets/changelog-git\",\n  // 在changeset add和changeset version后，自动运行git commit\n  \"commit\": true,\n  // 如果要发布到npm官方仓库，就设置成public\n  \"access\": \"public\",\n  // 我的仓库的主分支是master\n  \"baseBranch\": \"master\",\n  \"fixed\": [],\n  \"linked\": [],\n  \"updateInternalDependencies\": \"patch\",\n  \"ignore\": []\n}\n```\n\n## 发布一个包\n\n现在，我要给包pack1添加一些新特性，和修复一些bug。\n\n特性代码有点长，我要写好几天的代码。仍然按照以往的commit message的频率和风格去提交代码。这个commit message里的type和subject，**都不会影响CHANGELOG和包版本号**。\n\n### 随时添加一个changeset\n\n当我完成一个特性，或修复了一个bug，可以随时打一个changeset标记，这样就可以记录下来，方便后面生成CHANGELOG。再次说明，这个changeset标记和commit message是互不冲突的，changeset标记是用来管理包版本的，而commit message是用来管理代码的。\n\n*这和之前使用lerna有点区别，lerna是根据commit message来决定版本号和CHANGLOG的，而`changesets`是根据`changeset add`和`changeset version`来决定的。*\n\n`changeset`这么做的目的是，让开发者将包管理和代码管理分开，这样更加灵活。\n\n```base\n// 添加一个changeset标记\npnpm changeset add\n```\n\n会出现交互，让你选择要打标记的包，版本号等。\n\n#### 选版本遇到一个坑，总是显示`major`？？？\n\n`changeset`老版本会让你上下选择版本类型，而新的`changeset`的交互改了，在提示`major`的时候，未选择的包，按回车后会进入到选择`minor`的步骤。\n\n### 生成CHANGELOG和版本号\n\n终于，我完成了所有的特性和bug，准备发布了。\n\n可以查看`.changeset`下有很多`.md`文件，这些就是之前随时添加的changeset标记。每一个文件描述了改动的包、改动的类型、改动的内容。在下一步操作之前，可以直接修改这些`.md`文件，来修改上述提到的类型、内容等。\n\n准备好了，运行\n\n```shell\npnpm changeset version\n```\n\nchangeset会生成CHANGELOG和版本号，在最终发布之前，最好查看一下。\n\n### 发布\n\n```\npnpm changeset publish\n```\n\n它会自动调用`pnpm publish`，发布到npm仓库，并且打上tag。不过可惜的是，要手动push tag到远程：`git push --tags`。\n\n\n\n","slug":"changesets-in-monorepo","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne6j0001i8ohamwvdd40","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/33\">https://github.com/taoliujun/blog/issues/33</a></p>\n<!--hexo\n---\nurl: changesets-in-monorepo\ntags:\n  - changesets\n---\n-->\n\n<p><code>changesets</code>是目前(2023年)最流行的(多)包管理和发布工具了，使用它可以方便的生成CHANGELOG、打版本号和发布。</p>\n<p>项目链接：<a href=\"https://github.com/changesets/changesets\">changesets</a></p>\n<p>我这有个<a href=\"https://github.com/taoliujun/npm-packages\">pnpm monorepo</a>库，现在在用<code>changesets</code>管理发布版本了。</p>\n<h2 id=\"安装\"><a href=\"#安装\" class=\"headerlink\" title=\"安装\"></a>安装</h2><figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm add -Dw @changesets/cli @changesets/changelog-git</span><br></pre></td></tr></table></figure>\n\n<p><code>@changesets/cli</code>是必须安装的，<code>@changesets/changelog-git</code>是CHANGELOG生成风格，可以选择其他的，也可以不安装，用默认的。</p>\n<h2 id=\"初始化\"><a href=\"#初始化\" class=\"headerlink\" title=\"初始化\"></a>初始化</h2><figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm changeset init</span><br></pre></td></tr></table></figure>\n\n<p>生成<code>.changeset</code>目录，里面有<code>config.json</code>，我修改了一下，如下：</p>\n<figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;$schema&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;https://unpkg.com/@changesets/config@3.0.0/schema.json&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;changelog&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;@changesets/changelog-git&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"comment\">// 在changeset add和changeset version后，自动运行git commit</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;commit&quot;</span><span class=\"punctuation\">:</span> <span class=\"literal\"><span class=\"keyword\">true</span></span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"comment\">// 如果要发布到npm官方仓库，就设置成public</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;access&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;public&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"comment\">// 我的仓库的主分支是master</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;baseBranch&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;master&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;fixed&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"punctuation\">]</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;linked&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"punctuation\">]</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;updateInternalDependencies&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;patch&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;ignore&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"punctuation\">]</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"发布一个包\"><a href=\"#发布一个包\" class=\"headerlink\" title=\"发布一个包\"></a>发布一个包</h2><p>现在，我要给包pack1添加一些新特性，和修复一些bug。</p>\n<p>特性代码有点长，我要写好几天的代码。仍然按照以往的commit message的频率和风格去提交代码。这个commit message里的type和subject，<strong>都不会影响CHANGELOG和包版本号</strong>。</p>\n<h3 id=\"随时添加一个changeset\"><a href=\"#随时添加一个changeset\" class=\"headerlink\" title=\"随时添加一个changeset\"></a>随时添加一个changeset</h3><p>当我完成一个特性，或修复了一个bug，可以随时打一个changeset标记，这样就可以记录下来，方便后面生成CHANGELOG。再次说明，这个changeset标记和commit message是互不冲突的，changeset标记是用来管理包版本的，而commit message是用来管理代码的。</p>\n<p><em>这和之前使用lerna有点区别，lerna是根据commit message来决定版本号和CHANGLOG的，而<code>changesets</code>是根据<code>changeset add</code>和<code>changeset version</code>来决定的。</em></p>\n<p><code>changeset</code>这么做的目的是，让开发者将包管理和代码管理分开，这样更加灵活。</p>\n<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\">// 添加一个changeset标记</span><br><span class=\"line\">pnpm changeset add</span><br></pre></td></tr></table></figure>\n\n<p>会出现交互，让你选择要打标记的包，版本号等。</p>\n<h4 id=\"选版本遇到一个坑，总是显示major？？？\"><a href=\"#选版本遇到一个坑，总是显示major？？？\" class=\"headerlink\" title=\"选版本遇到一个坑，总是显示major？？？\"></a>选版本遇到一个坑，总是显示<code>major</code>？？？</h4><p><code>changeset</code>老版本会让你上下选择版本类型，而新的<code>changeset</code>的交互改了，在提示<code>major</code>的时候，未选择的包，按回车后会进入到选择<code>minor</code>的步骤。</p>\n<h3 id=\"生成CHANGELOG和版本号\"><a href=\"#生成CHANGELOG和版本号\" class=\"headerlink\" title=\"生成CHANGELOG和版本号\"></a>生成CHANGELOG和版本号</h3><p>终于，我完成了所有的特性和bug，准备发布了。</p>\n<p>可以查看<code>.changeset</code>下有很多<code>.md</code>文件，这些就是之前随时添加的changeset标记。每一个文件描述了改动的包、改动的类型、改动的内容。在下一步操作之前，可以直接修改这些<code>.md</code>文件，来修改上述提到的类型、内容等。</p>\n<p>准备好了，运行</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm changeset version</span><br></pre></td></tr></table></figure>\n\n<p>changeset会生成CHANGELOG和版本号，在最终发布之前，最好查看一下。</p>\n<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></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm changeset publish</span><br></pre></td></tr></table></figure>\n\n<p>它会自动调用<code>pnpm publish</code>，发布到npm仓库，并且打上tag。不过可惜的是，要手动push tag到远程：<code>git push --tags</code>。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/33\">https://github.com/taoliujun/blog/issues/33</a></p>\n<!--hexo\n---\nurl: changesets-in-monorepo\ntags:\n  - changesets\n---\n-->\n\n<p><code>changesets</code>是目前(2023年)最流行的(多)包管理和发布工具了，使用它可以方便的生成CHANGELOG、打版本号和发布。</p>\n<p>项目链接：<a href=\"https://github.com/changesets/changesets\">changesets</a></p>\n<p>我这有个<a href=\"https://github.com/taoliujun/npm-packages\">pnpm monorepo</a>库，现在在用<code>changesets</code>管理发布版本了。</p>\n<h2 id=\"安装\"><a href=\"#安装\" class=\"headerlink\" title=\"安装\"></a>安装</h2><figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm add -Dw @changesets/cli @changesets/changelog-git</span><br></pre></td></tr></table></figure>\n\n<p><code>@changesets/cli</code>是必须安装的，<code>@changesets/changelog-git</code>是CHANGELOG生成风格，可以选择其他的，也可以不安装，用默认的。</p>\n<h2 id=\"初始化\"><a href=\"#初始化\" class=\"headerlink\" title=\"初始化\"></a>初始化</h2><figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm changeset init</span><br></pre></td></tr></table></figure>\n\n<p>生成<code>.changeset</code>目录，里面有<code>config.json</code>，我修改了一下，如下：</p>\n<figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;$schema&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;https://unpkg.com/@changesets/config@3.0.0/schema.json&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;changelog&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;@changesets/changelog-git&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"comment\">// 在changeset add和changeset version后，自动运行git commit</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;commit&quot;</span><span class=\"punctuation\">:</span> <span class=\"literal\"><span class=\"keyword\">true</span></span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"comment\">// 如果要发布到npm官方仓库，就设置成public</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;access&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;public&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"comment\">// 我的仓库的主分支是master</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;baseBranch&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;master&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;fixed&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"punctuation\">]</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;linked&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"punctuation\">]</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;updateInternalDependencies&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;patch&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;ignore&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"punctuation\">]</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"发布一个包\"><a href=\"#发布一个包\" class=\"headerlink\" title=\"发布一个包\"></a>发布一个包</h2><p>现在，我要给包pack1添加一些新特性，和修复一些bug。</p>\n<p>特性代码有点长，我要写好几天的代码。仍然按照以往的commit message的频率和风格去提交代码。这个commit message里的type和subject，<strong>都不会影响CHANGELOG和包版本号</strong>。</p>\n<h3 id=\"随时添加一个changeset\"><a href=\"#随时添加一个changeset\" class=\"headerlink\" title=\"随时添加一个changeset\"></a>随时添加一个changeset</h3><p>当我完成一个特性，或修复了一个bug，可以随时打一个changeset标记，这样就可以记录下来，方便后面生成CHANGELOG。再次说明，这个changeset标记和commit message是互不冲突的，changeset标记是用来管理包版本的，而commit message是用来管理代码的。</p>\n<p><em>这和之前使用lerna有点区别，lerna是根据commit message来决定版本号和CHANGLOG的，而<code>changesets</code>是根据<code>changeset add</code>和<code>changeset version</code>来决定的。</em></p>\n<p><code>changeset</code>这么做的目的是，让开发者将包管理和代码管理分开，这样更加灵活。</p>\n<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\">// 添加一个changeset标记</span><br><span class=\"line\">pnpm changeset add</span><br></pre></td></tr></table></figure>\n\n<p>会出现交互，让你选择要打标记的包，版本号等。</p>\n<h4 id=\"选版本遇到一个坑，总是显示major？？？\"><a href=\"#选版本遇到一个坑，总是显示major？？？\" class=\"headerlink\" title=\"选版本遇到一个坑，总是显示major？？？\"></a>选版本遇到一个坑，总是显示<code>major</code>？？？</h4><p><code>changeset</code>老版本会让你上下选择版本类型，而新的<code>changeset</code>的交互改了，在提示<code>major</code>的时候，未选择的包，按回车后会进入到选择<code>minor</code>的步骤。</p>\n<h3 id=\"生成CHANGELOG和版本号\"><a href=\"#生成CHANGELOG和版本号\" class=\"headerlink\" title=\"生成CHANGELOG和版本号\"></a>生成CHANGELOG和版本号</h3><p>终于，我完成了所有的特性和bug，准备发布了。</p>\n<p>可以查看<code>.changeset</code>下有很多<code>.md</code>文件，这些就是之前随时添加的changeset标记。每一个文件描述了改动的包、改动的类型、改动的内容。在下一步操作之前，可以直接修改这些<code>.md</code>文件，来修改上述提到的类型、内容等。</p>\n<p>准备好了，运行</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm changeset version</span><br></pre></td></tr></table></figure>\n\n<p>changeset会生成CHANGELOG和版本号，在最终发布之前，最好查看一下。</p>\n<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></pre></td><td class=\"code\"><pre><span class=\"line\">pnpm changeset publish</span><br></pre></td></tr></table></figure>\n\n<p>它会自动调用<code>pnpm publish</code>，发布到npm仓库，并且打上tag。不过可惜的是，要手动push tag到远程：<code>git push --tags</code>。</p>\n"},{"title":"整理ES6：解构赋值","date":"2023-07-05T22:36:43.000Z","url":"es6-destructuring","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/17](https://github.com/taoliujun/blog/issues/17)\n\n<!--hexo\n---\nurl: es6-destructuring\ntags:\n  - es6\n  - javascript\n---\n-->\n\n工作中经常会使用变量的解构赋值，随便举几个例子。\n\n## 数组解构\n\n```typescript\nconst fruits = [\"apple\", \"pear\", \"orange\", \"banana\", \"peach\"];\nconst [fruit1, , fruit3, ...otherFruits] = fruits;\n\nconsole.log({\n  fruit1,\n  fruit3,\n  otherFruits,\n});\n```\n\n```shell\n> node 1.ts\n{\n  fruit1: 'apple',\n  fruit3: 'orange',\n  otherFruits: [ 'banana', 'peach' ]\n}\n```\n\n在执行结果中可以看到，`fruit1`是apple，其后是一个空位，所以`fruit3`是orange，`otherFruits`前面有扩展运算符，所以它读取了剩下的所有索引值。\n\n## 对象解构\n\n对象解构里记录一个概念，就是模式与变量，见下面一个嵌套结构的例子：\n\n```typescript\nconst user = {\n  base: {\n    truename: \"张三\",\n    sex: \"女\",\n  },\n  card: \"320xxx\",\n};\n\nconst {\n  base,\n  base: { truename },\n  card,\n} = user;\n\nconsole.log(\"base:\", base);\nconsole.log(\"truename:\", truename);\nconsole.log(\"card:\", card);\n```\n\n```shell\nbase: { truename: '张三', sex: '女' }\ntruename: 张三\ncard: 320xxx\n```\n\n在如上的对象解构中，第一个`base`是变量，第二个`base`是模式，它的值是`user`对象中的`base`属性，`truename`是变量，`card`也是变量。\n\n## 字符串、数组、布尔值解构\n\n因为解构的规则是将变量转为对象（数组也是对象），字符串、数字、布尔都可以转成对象。\n\n**所以字符串可以像数组**那样解构。\n\n```typescript\nconst word = \"abcdefg\";\n\nconst [, x] = word;\nconst { 3: y } = word;\n\nconsole.log({ x, y });\n```\n\n```shell\n{ x: 'b', y: 'd' }\n```\n\n## 小技巧\n\n**数组也是对象**，所以读取指定索引的值，可以这样写：\n\n```typescript\nconst fruits = [\"apple\", \"pear\", \"orange\", \"banana\", \"peach\"];\nconst { 3: fruit1 } = fruits;\n\nconsole.log(fruit1);\n```\n\n```shell\nbanana\n```\n\n\n\n","source":"_posts/es6-destructuring.md","raw":"---\ntitle: \"整理ES6：解构赋值\"\ndate: \"2023-07-06T06:36:43Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-destructuring\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/17](https://github.com/taoliujun/blog/issues/17)\n\n<!--hexo\n---\nurl: es6-destructuring\ntags:\n  - es6\n  - javascript\n---\n-->\n\n工作中经常会使用变量的解构赋值，随便举几个例子。\n\n## 数组解构\n\n```typescript\nconst fruits = [\"apple\", \"pear\", \"orange\", \"banana\", \"peach\"];\nconst [fruit1, , fruit3, ...otherFruits] = fruits;\n\nconsole.log({\n  fruit1,\n  fruit3,\n  otherFruits,\n});\n```\n\n```shell\n> node 1.ts\n{\n  fruit1: 'apple',\n  fruit3: 'orange',\n  otherFruits: [ 'banana', 'peach' ]\n}\n```\n\n在执行结果中可以看到，`fruit1`是apple，其后是一个空位，所以`fruit3`是orange，`otherFruits`前面有扩展运算符，所以它读取了剩下的所有索引值。\n\n## 对象解构\n\n对象解构里记录一个概念，就是模式与变量，见下面一个嵌套结构的例子：\n\n```typescript\nconst user = {\n  base: {\n    truename: \"张三\",\n    sex: \"女\",\n  },\n  card: \"320xxx\",\n};\n\nconst {\n  base,\n  base: { truename },\n  card,\n} = user;\n\nconsole.log(\"base:\", base);\nconsole.log(\"truename:\", truename);\nconsole.log(\"card:\", card);\n```\n\n```shell\nbase: { truename: '张三', sex: '女' }\ntruename: 张三\ncard: 320xxx\n```\n\n在如上的对象解构中，第一个`base`是变量，第二个`base`是模式，它的值是`user`对象中的`base`属性，`truename`是变量，`card`也是变量。\n\n## 字符串、数组、布尔值解构\n\n因为解构的规则是将变量转为对象（数组也是对象），字符串、数字、布尔都可以转成对象。\n\n**所以字符串可以像数组**那样解构。\n\n```typescript\nconst word = \"abcdefg\";\n\nconst [, x] = word;\nconst { 3: y } = word;\n\nconsole.log({ x, y });\n```\n\n```shell\n{ x: 'b', y: 'd' }\n```\n\n## 小技巧\n\n**数组也是对象**，所以读取指定索引的值，可以这样写：\n\n```typescript\nconst fruits = [\"apple\", \"pear\", \"orange\", \"banana\", \"peach\"];\nconst { 3: fruit1 } = fruits;\n\nconsole.log(fruit1);\n```\n\n```shell\nbanana\n```\n\n\n\n","slug":"es6-destructuring","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne6m0003i8ohghnpfqye","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/17\">https://github.com/taoliujun/blog/issues/17</a></p>\n<!--hexo\n---\nurl: es6-destructuring\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>工作中经常会使用变量的解构赋值，随便举几个例子。</p>\n<h2 id=\"数组解构\"><a href=\"#数组解构\" class=\"headerlink\" title=\"数组解构\"></a>数组解构</h2><figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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> fruits = [<span class=\"string\">&quot;apple&quot;</span>, <span class=\"string\">&quot;pear&quot;</span>, <span class=\"string\">&quot;orange&quot;</span>, <span class=\"string\">&quot;banana&quot;</span>, <span class=\"string\">&quot;peach&quot;</span>];</span><br><span class=\"line\"><span class=\"keyword\">const</span> [fruit1, , fruit3, ...otherFruits] = fruits;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(&#123;</span><br><span class=\"line\">  fruit1,</span><br><span class=\"line\">  fruit3,</span><br><span class=\"line\">  otherFruits,</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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=\"meta prompt_\">&gt; </span><span class=\"language-bash\">node 1.ts</span></span><br><span class=\"line\">&#123;</span><br><span class=\"line\">  fruit1: &#x27;apple&#x27;,</span><br><span class=\"line\">  fruit3: &#x27;orange&#x27;,</span><br><span class=\"line\">  otherFruits: [ &#x27;banana&#x27;, &#x27;peach&#x27; ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>在执行结果中可以看到，<code>fruit1</code>是apple，其后是一个空位，所以<code>fruit3</code>是orange，<code>otherFruits</code>前面有扩展运算符，所以它读取了剩下的所有索引值。</p>\n<h2 id=\"对象解构\"><a href=\"#对象解构\" class=\"headerlink\" title=\"对象解构\"></a>对象解构</h2><p>对象解构里记录一个概念，就是模式与变量，见下面一个嵌套结构的例子：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><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> user = &#123;</span><br><span class=\"line\">  <span class=\"attr\">base</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">truename</span>: <span class=\"string\">&quot;张三&quot;</span>,</span><br><span class=\"line\">    <span class=\"attr\">sex</span>: <span class=\"string\">&quot;女&quot;</span>,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  <span class=\"attr\">card</span>: <span class=\"string\">&quot;320xxx&quot;</span>,</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> &#123;</span><br><span class=\"line\">  base,</span><br><span class=\"line\">  <span class=\"attr\">base</span>: &#123; truename &#125;,</span><br><span class=\"line\">  card,</span><br><span class=\"line\">&#125; = user;</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;base:&quot;</span>, base);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;truename:&quot;</span>, truename);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;card:&quot;</span>, card);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><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\">base: &#123; truename: &#x27;张三&#x27;, sex: &#x27;女&#x27; &#125;</span><br><span class=\"line\">truename: 张三</span><br><span class=\"line\">card: 320xxx</span><br></pre></td></tr></table></figure>\n\n<p>在如上的对象解构中，第一个<code>base</code>是变量，第二个<code>base</code>是模式，它的值是<code>user</code>对象中的<code>base</code>属性，<code>truename</code>是变量，<code>card</code>也是变量。</p>\n<h2 id=\"字符串、数组、布尔值解构\"><a href=\"#字符串、数组、布尔值解构\" class=\"headerlink\" title=\"字符串、数组、布尔值解构\"></a>字符串、数组、布尔值解构</h2><p>因为解构的规则是将变量转为对象（数组也是对象），字符串、数字、布尔都可以转成对象。</p>\n<p><strong>所以字符串可以像数组</strong>那样解构。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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> word = <span class=\"string\">&quot;abcdefg&quot;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> [, x] = word;</span><br><span class=\"line\"><span class=\"keyword\">const</span> &#123; <span class=\"number\">3</span>: y &#125; = word;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(&#123; x, y &#125;);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">&#123; x: &#x27;b&#x27;, y: &#x27;d&#x27; &#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"小技巧\"><a href=\"#小技巧\" class=\"headerlink\" title=\"小技巧\"></a>小技巧</h2><p><strong>数组也是对象</strong>，所以读取指定索引的值，可以这样写：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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> fruits = [<span class=\"string\">&quot;apple&quot;</span>, <span class=\"string\">&quot;pear&quot;</span>, <span class=\"string\">&quot;orange&quot;</span>, <span class=\"string\">&quot;banana&quot;</span>, <span class=\"string\">&quot;peach&quot;</span>];</span><br><span class=\"line\"><span class=\"keyword\">const</span> &#123; <span class=\"number\">3</span>: fruit1 &#125; = fruits;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(fruit1);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">banana</span><br></pre></td></tr></table></figure>\n\n\n\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/17\">https://github.com/taoliujun/blog/issues/17</a></p>\n<!--hexo\n---\nurl: es6-destructuring\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>工作中经常会使用变量的解构赋值，随便举几个例子。</p>\n<h2 id=\"数组解构\"><a href=\"#数组解构\" class=\"headerlink\" title=\"数组解构\"></a>数组解构</h2><figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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> fruits = [<span class=\"string\">&quot;apple&quot;</span>, <span class=\"string\">&quot;pear&quot;</span>, <span class=\"string\">&quot;orange&quot;</span>, <span class=\"string\">&quot;banana&quot;</span>, <span class=\"string\">&quot;peach&quot;</span>];</span><br><span class=\"line\"><span class=\"keyword\">const</span> [fruit1, , fruit3, ...otherFruits] = fruits;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(&#123;</span><br><span class=\"line\">  fruit1,</span><br><span class=\"line\">  fruit3,</span><br><span class=\"line\">  otherFruits,</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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=\"meta prompt_\">&gt; </span><span class=\"language-bash\">node 1.ts</span></span><br><span class=\"line\">&#123;</span><br><span class=\"line\">  fruit1: &#x27;apple&#x27;,</span><br><span class=\"line\">  fruit3: &#x27;orange&#x27;,</span><br><span class=\"line\">  otherFruits: [ &#x27;banana&#x27;, &#x27;peach&#x27; ]</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>在执行结果中可以看到，<code>fruit1</code>是apple，其后是一个空位，所以<code>fruit3</code>是orange，<code>otherFruits</code>前面有扩展运算符，所以它读取了剩下的所有索引值。</p>\n<h2 id=\"对象解构\"><a href=\"#对象解构\" class=\"headerlink\" title=\"对象解构\"></a>对象解构</h2><p>对象解构里记录一个概念，就是模式与变量，见下面一个嵌套结构的例子：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><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> user = &#123;</span><br><span class=\"line\">  <span class=\"attr\">base</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">truename</span>: <span class=\"string\">&quot;张三&quot;</span>,</span><br><span class=\"line\">    <span class=\"attr\">sex</span>: <span class=\"string\">&quot;女&quot;</span>,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  <span class=\"attr\">card</span>: <span class=\"string\">&quot;320xxx&quot;</span>,</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> &#123;</span><br><span class=\"line\">  base,</span><br><span class=\"line\">  <span class=\"attr\">base</span>: &#123; truename &#125;,</span><br><span class=\"line\">  card,</span><br><span class=\"line\">&#125; = user;</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;base:&quot;</span>, base);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;truename:&quot;</span>, truename);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;card:&quot;</span>, card);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><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\">base: &#123; truename: &#x27;张三&#x27;, sex: &#x27;女&#x27; &#125;</span><br><span class=\"line\">truename: 张三</span><br><span class=\"line\">card: 320xxx</span><br></pre></td></tr></table></figure>\n\n<p>在如上的对象解构中，第一个<code>base</code>是变量，第二个<code>base</code>是模式，它的值是<code>user</code>对象中的<code>base</code>属性，<code>truename</code>是变量，<code>card</code>也是变量。</p>\n<h2 id=\"字符串、数组、布尔值解构\"><a href=\"#字符串、数组、布尔值解构\" class=\"headerlink\" title=\"字符串、数组、布尔值解构\"></a>字符串、数组、布尔值解构</h2><p>因为解构的规则是将变量转为对象（数组也是对象），字符串、数字、布尔都可以转成对象。</p>\n<p><strong>所以字符串可以像数组</strong>那样解构。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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> word = <span class=\"string\">&quot;abcdefg&quot;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> [, x] = word;</span><br><span class=\"line\"><span class=\"keyword\">const</span> &#123; <span class=\"number\">3</span>: y &#125; = word;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(&#123; x, y &#125;);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">&#123; x: &#x27;b&#x27;, y: &#x27;d&#x27; &#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"小技巧\"><a href=\"#小技巧\" class=\"headerlink\" title=\"小技巧\"></a>小技巧</h2><p><strong>数组也是对象</strong>，所以读取指定索引的值，可以这样写：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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> fruits = [<span class=\"string\">&quot;apple&quot;</span>, <span class=\"string\">&quot;pear&quot;</span>, <span class=\"string\">&quot;orange&quot;</span>, <span class=\"string\">&quot;banana&quot;</span>, <span class=\"string\">&quot;peach&quot;</span>];</span><br><span class=\"line\"><span class=\"keyword\">const</span> &#123; <span class=\"number\">3</span>: fruit1 &#125; = fruits;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(fruit1);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">banana</span><br></pre></td></tr></table></figure>\n\n\n\n"},{"title":"整理ES6：Map真的挺好的","date":"2023-07-05T22:34:11.000Z","url":"es6-map","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/13](https://github.com/taoliujun/blog/issues/13)\n\n<!--hexo\n---\nurl: es6-map\ntags:\n  - es6\n  - javascript\n---\n-->\n\n在以前，想要维护一个集合去处理dom和其附加信息的关系，使用Array方式如下：\n\n```ts\nconst list = [\n  {\n    dom: dom1,\n    info: { area: 123 },\n  },\n  {\n    dom: dom2,\n    info: { area: 123 },\n  },\n];\n```\n\n如上代码有个很难受的问题，就是读取某个dom的时候需要遍历，而且每次都需要遍历，如果数据量大的话，性能会很差。\n\n那么改成Object方式：\n\n```ts\nconst list = {\n  key1: {\n    dom: dom1,\n    info: { area: 123 },\n  },\n  key2: {\n    dom: dom1,\n    info: { area: 123 },\n  },\n};\n```\n\n这种方式虽然可以快速读取，但是如何处理key和dom的关系又是一个麻烦；并且如果需要遍历的话，就需要先转成Array，然后再遍历，这样也很麻烦。\n\n## Map的基础用法\n\n但是使用Map可以方便的解决上面的问题：\n\n```ts\nconst list = new Map([\n  [dom1, { area: 123 }],\n  [dom2, { area: 123 }],\n]);\n```\n\n这样就可以快速的读取dom对应的信息，也可以快速的遍历。\n\n## 注意点\n\n* Map的键是内存引用，所以两个相同值的对象实例，它们是两个键。\n* Map采取了和Set一样的比较算法，所以虽然NaN不严格相等于自身，但 Map 将其视为同一个键。\n\n\n\n","source":"_posts/es6-map.md","raw":"---\ntitle: \"整理ES6：Map真的挺好的\"\ndate: \"2023-07-06T06:34:11Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-map\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/13](https://github.com/taoliujun/blog/issues/13)\n\n<!--hexo\n---\nurl: es6-map\ntags:\n  - es6\n  - javascript\n---\n-->\n\n在以前，想要维护一个集合去处理dom和其附加信息的关系，使用Array方式如下：\n\n```ts\nconst list = [\n  {\n    dom: dom1,\n    info: { area: 123 },\n  },\n  {\n    dom: dom2,\n    info: { area: 123 },\n  },\n];\n```\n\n如上代码有个很难受的问题，就是读取某个dom的时候需要遍历，而且每次都需要遍历，如果数据量大的话，性能会很差。\n\n那么改成Object方式：\n\n```ts\nconst list = {\n  key1: {\n    dom: dom1,\n    info: { area: 123 },\n  },\n  key2: {\n    dom: dom1,\n    info: { area: 123 },\n  },\n};\n```\n\n这种方式虽然可以快速读取，但是如何处理key和dom的关系又是一个麻烦；并且如果需要遍历的话，就需要先转成Array，然后再遍历，这样也很麻烦。\n\n## Map的基础用法\n\n但是使用Map可以方便的解决上面的问题：\n\n```ts\nconst list = new Map([\n  [dom1, { area: 123 }],\n  [dom2, { area: 123 }],\n]);\n```\n\n这样就可以快速的读取dom对应的信息，也可以快速的遍历。\n\n## 注意点\n\n* Map的键是内存引用，所以两个相同值的对象实例，它们是两个键。\n* Map采取了和Set一样的比较算法，所以虽然NaN不严格相等于自身，但 Map 将其视为同一个键。\n\n\n\n","slug":"es6-map","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne6n0005i8ohal4i8rav","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/13\">https://github.com/taoliujun/blog/issues/13</a></p>\n<!--hexo\n---\nurl: es6-map\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>在以前，想要维护一个集合去处理dom和其附加信息的关系，使用Array方式如下：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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> list = [</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom1,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom2,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">];</span><br></pre></td></tr></table></figure>\n\n<p>如上代码有个很难受的问题，就是读取某个dom的时候需要遍历，而且每次都需要遍历，如果数据量大的话，性能会很差。</p>\n<p>那么改成Object方式：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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> list = &#123;</span><br><span class=\"line\">  <span class=\"attr\">key1</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom1,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  <span class=\"attr\">key2</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom1,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>这种方式虽然可以快速读取，但是如何处理key和dom的关系又是一个麻烦；并且如果需要遍历的话，就需要先转成Array，然后再遍历，这样也很麻烦。</p>\n<h2 id=\"Map的基础用法\"><a href=\"#Map的基础用法\" class=\"headerlink\" title=\"Map的基础用法\"></a>Map的基础用法</h2><p>但是使用Map可以方便的解决上面的问题：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><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> list = <span class=\"keyword\">new</span> <span class=\"title class_\">Map</span>([</span><br><span class=\"line\">  [dom1, &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;],</span><br><span class=\"line\">  [dom2, &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;],</span><br><span class=\"line\">]);</span><br></pre></td></tr></table></figure>\n\n<p>这样就可以快速的读取dom对应的信息，也可以快速的遍历。</p>\n<h2 id=\"注意点\"><a href=\"#注意点\" class=\"headerlink\" title=\"注意点\"></a>注意点</h2><ul>\n<li>Map的键是内存引用，所以两个相同值的对象实例，它们是两个键。</li>\n<li>Map采取了和Set一样的比较算法，所以虽然NaN不严格相等于自身，但 Map 将其视为同一个键。</li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/13\">https://github.com/taoliujun/blog/issues/13</a></p>\n<!--hexo\n---\nurl: es6-map\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>在以前，想要维护一个集合去处理dom和其附加信息的关系，使用Array方式如下：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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> list = [</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom1,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom2,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">];</span><br></pre></td></tr></table></figure>\n\n<p>如上代码有个很难受的问题，就是读取某个dom的时候需要遍历，而且每次都需要遍历，如果数据量大的话，性能会很差。</p>\n<p>那么改成Object方式：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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> list = &#123;</span><br><span class=\"line\">  <span class=\"attr\">key1</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom1,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">  <span class=\"attr\">key2</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">dom</span>: dom1,</span><br><span class=\"line\">    <span class=\"attr\">info</span>: &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;,</span><br><span class=\"line\">  &#125;,</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>这种方式虽然可以快速读取，但是如何处理key和dom的关系又是一个麻烦；并且如果需要遍历的话，就需要先转成Array，然后再遍历，这样也很麻烦。</p>\n<h2 id=\"Map的基础用法\"><a href=\"#Map的基础用法\" class=\"headerlink\" title=\"Map的基础用法\"></a>Map的基础用法</h2><p>但是使用Map可以方便的解决上面的问题：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><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> list = <span class=\"keyword\">new</span> <span class=\"title class_\">Map</span>([</span><br><span class=\"line\">  [dom1, &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;],</span><br><span class=\"line\">  [dom2, &#123; <span class=\"attr\">area</span>: <span class=\"number\">123</span> &#125;],</span><br><span class=\"line\">]);</span><br></pre></td></tr></table></figure>\n\n<p>这样就可以快速的读取dom对应的信息，也可以快速的遍历。</p>\n<h2 id=\"注意点\"><a href=\"#注意点\" class=\"headerlink\" title=\"注意点\"></a>注意点</h2><ul>\n<li>Map的键是内存引用，所以两个相同值的对象实例，它们是两个键。</li>\n<li>Map采取了和Set一样的比较算法，所以虽然NaN不严格相等于自身，但 Map 将其视为同一个键。</li>\n</ul>\n"},{"title":"整理ES6：运算符","date":"2023-07-05T22:35:25.000Z","url":"es6-operator","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/16](https://github.com/taoliujun/blog/issues/16)\n\n<!--hexo\n---\nurl: es6-operator\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## 链判断运算符`?.`\n\n非常方便的代替了传统的属性是否存在的判断，它有两个注意点：\n\n* 左侧的对象是否为`null`或`undefined`，如果不是，则继续运算。\n* 如果是的，就不再往下运算，而是返回`undefined`。\n\n常见用法如下：\n\n* obj?.prop // 对象属性是否存在\n* obj?.[expr] // 同上\n* func?.(...args) // 函数或对象方法是否存在\n\n## Null 判断运算符`??`\n\n如果运算结果为`null`或`undefined`，则返回右侧的值，否则返回左侧的值。\n\n```typescript\n// 老写法，如果左侧的boolean值为falsy，都会返回右侧的值\nconst headerText = response.settings.headerText || 'Hello, world!';\n// ??写法，只有左侧的值为null或undefined时，才会返回右侧的值\nconst headerText = response.settings.headerText ?? 'Hello, world!';\n```\n\n\n\n","source":"_posts/es6-operator.md","raw":"---\ntitle: \"整理ES6：运算符\"\ndate: \"2023-07-06T06:35:25Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-operator\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/16](https://github.com/taoliujun/blog/issues/16)\n\n<!--hexo\n---\nurl: es6-operator\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## 链判断运算符`?.`\n\n非常方便的代替了传统的属性是否存在的判断，它有两个注意点：\n\n* 左侧的对象是否为`null`或`undefined`，如果不是，则继续运算。\n* 如果是的，就不再往下运算，而是返回`undefined`。\n\n常见用法如下：\n\n* obj?.prop // 对象属性是否存在\n* obj?.[expr] // 同上\n* func?.(...args) // 函数或对象方法是否存在\n\n## Null 判断运算符`??`\n\n如果运算结果为`null`或`undefined`，则返回右侧的值，否则返回左侧的值。\n\n```typescript\n// 老写法，如果左侧的boolean值为falsy，都会返回右侧的值\nconst headerText = response.settings.headerText || 'Hello, world!';\n// ??写法，只有左侧的值为null或undefined时，才会返回右侧的值\nconst headerText = response.settings.headerText ?? 'Hello, world!';\n```\n\n\n\n","slug":"es6-operator","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne6o0006i8oh1ydc6nlv","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/16\">https://github.com/taoliujun/blog/issues/16</a></p>\n<!--hexo\n---\nurl: es6-operator\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"链判断运算符\"><a href=\"#链判断运算符\" class=\"headerlink\" title=\"链判断运算符?.\"></a>链判断运算符<code>?.</code></h2><p>非常方便的代替了传统的属性是否存在的判断，它有两个注意点：</p>\n<ul>\n<li>左侧的对象是否为<code>null</code>或<code>undefined</code>，如果不是，则继续运算。</li>\n<li>如果是的，就不再往下运算，而是返回<code>undefined</code>。</li>\n</ul>\n<p>常见用法如下：</p>\n<ul>\n<li>obj?.prop &#x2F;&#x2F; 对象属性是否存在</li>\n<li>obj?.[expr] &#x2F;&#x2F; 同上</li>\n<li>func?.(…args) &#x2F;&#x2F; 函数或对象方法是否存在</li>\n</ul>\n<h2 id=\"Null-判断运算符\"><a href=\"#Null-判断运算符\" class=\"headerlink\" title=\"Null 判断运算符??\"></a>Null 判断运算符<code>??</code></h2><p>如果运算结果为<code>null</code>或<code>undefined</code>，则返回右侧的值，否则返回左侧的值。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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\">// 老写法，如果左侧的boolean值为falsy，都会返回右侧的值</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> headerText = response.<span class=\"property\">settings</span>.<span class=\"property\">headerText</span> || <span class=\"string\">&#x27;Hello, world!&#x27;</span>;</span><br><span class=\"line\"><span class=\"comment\">// ??写法，只有左侧的值为null或undefined时，才会返回右侧的值</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> headerText = response.<span class=\"property\">settings</span>.<span class=\"property\">headerText</span> ?? <span class=\"string\">&#x27;Hello, world!&#x27;</span>;</span><br></pre></td></tr></table></figure>\n\n\n\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/16\">https://github.com/taoliujun/blog/issues/16</a></p>\n<!--hexo\n---\nurl: es6-operator\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"链判断运算符\"><a href=\"#链判断运算符\" class=\"headerlink\" title=\"链判断运算符?.\"></a>链判断运算符<code>?.</code></h2><p>非常方便的代替了传统的属性是否存在的判断，它有两个注意点：</p>\n<ul>\n<li>左侧的对象是否为<code>null</code>或<code>undefined</code>，如果不是，则继续运算。</li>\n<li>如果是的，就不再往下运算，而是返回<code>undefined</code>。</li>\n</ul>\n<p>常见用法如下：</p>\n<ul>\n<li>obj?.prop &#x2F;&#x2F; 对象属性是否存在</li>\n<li>obj?.[expr] &#x2F;&#x2F; 同上</li>\n<li>func?.(…args) &#x2F;&#x2F; 函数或对象方法是否存在</li>\n</ul>\n<h2 id=\"Null-判断运算符\"><a href=\"#Null-判断运算符\" class=\"headerlink\" title=\"Null 判断运算符??\"></a>Null 判断运算符<code>??</code></h2><p>如果运算结果为<code>null</code>或<code>undefined</code>，则返回右侧的值，否则返回左侧的值。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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\">// 老写法，如果左侧的boolean值为falsy，都会返回右侧的值</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> headerText = response.<span class=\"property\">settings</span>.<span class=\"property\">headerText</span> || <span class=\"string\">&#x27;Hello, world!&#x27;</span>;</span><br><span class=\"line\"><span class=\"comment\">// ??写法，只有左侧的值为null或undefined时，才会返回右侧的值</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> headerText = response.<span class=\"property\">settings</span>.<span class=\"property\">headerText</span> ?? <span class=\"string\">&#x27;Hello, world!&#x27;</span>;</span><br></pre></td></tr></table></figure>\n\n\n\n"},{"title":"整理ES6：Promise的忽略点和几个方法的区别","date":"2023-07-05T22:21:12.000Z","url":"es6-promise","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/2](https://github.com/taoliujun/blog/issues/2)\n\n<!--hexo\n---\nurl: es6-promise\ntags:\n  - es6\n  - javascript\n---\n-->\n\n**Promise**是业务开发中使用率最高的ES6方法了，但日常容易忽略几个点，以及记不得它几个方法的区别，现记录。\n\n## 容易忽略的点\n\n* `catch`是`then`的语法糖，但是`catch`可以捕获`then`中的异常，而`then`的第二个回调函数不行。\n* 如果没有使用`catch`捕获错误，那么Promise的错误不会传递到外层，即使外层有`try...catch`也捕获不到。\n* 因为`catch`捕获了`rejected`且返回新的实例，所以在`all`等方法中，p1实现了`catch`方法，则p1的`rejected`不会触发p的`catch`。\n\n## 几个方法的区别\n\n| 方法 | resolved的前提 | rejected的前提 | 说明 |\n| --- | ------------- | ------------- | --- |\n| all | 全部resolved | 任一rejected | - |\n| race | 任一resolved | 任一rejected | 任一率先改变的状态，传递给p |\n| allSettled | 全部改变 | - | 状态全部改变，传递给p。格式为: <br /> `{status: 'fulfilled', value: value}` <br/> 或者 <br/> `{status: 'rejected', reason: reason}` |\n| any | 任一resolved | 全部rejected | 传递给`catch`的是一个`AggregateError`实例 |\n\n\n<!--hexo-->\n\n# AggregateError\n\nAggregateError封装了Error数组，它的结构是：\n\n> AggregateError(errors[, message])\n\n`AggregateError()`构造函数可以接受两个参数。\n\n* errors：数组，它的每个成员都是一个错误对象。该参数是必须的。\n* message：字符串，表示 AggregateError 抛出时的提示信息。该参数是可选的。\n\n","source":"_posts/es6-promise.md","raw":"---\ntitle: \"整理ES6：Promise的忽略点和几个方法的区别\"\ndate: \"2023-07-06T06:21:12Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-promise\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/2](https://github.com/taoliujun/blog/issues/2)\n\n<!--hexo\n---\nurl: es6-promise\ntags:\n  - es6\n  - javascript\n---\n-->\n\n**Promise**是业务开发中使用率最高的ES6方法了，但日常容易忽略几个点，以及记不得它几个方法的区别，现记录。\n\n## 容易忽略的点\n\n* `catch`是`then`的语法糖，但是`catch`可以捕获`then`中的异常，而`then`的第二个回调函数不行。\n* 如果没有使用`catch`捕获错误，那么Promise的错误不会传递到外层，即使外层有`try...catch`也捕获不到。\n* 因为`catch`捕获了`rejected`且返回新的实例，所以在`all`等方法中，p1实现了`catch`方法，则p1的`rejected`不会触发p的`catch`。\n\n## 几个方法的区别\n\n| 方法 | resolved的前提 | rejected的前提 | 说明 |\n| --- | ------------- | ------------- | --- |\n| all | 全部resolved | 任一rejected | - |\n| race | 任一resolved | 任一rejected | 任一率先改变的状态，传递给p |\n| allSettled | 全部改变 | - | 状态全部改变，传递给p。格式为: <br /> `{status: 'fulfilled', value: value}` <br/> 或者 <br/> `{status: 'rejected', reason: reason}` |\n| any | 任一resolved | 全部rejected | 传递给`catch`的是一个`AggregateError`实例 |\n\n\n<!--hexo-->\n\n# AggregateError\n\nAggregateError封装了Error数组，它的结构是：\n\n> AggregateError(errors[, message])\n\n`AggregateError()`构造函数可以接受两个参数。\n\n* errors：数组，它的每个成员都是一个错误对象。该参数是必须的。\n* message：字符串，表示 AggregateError 抛出时的提示信息。该参数是可选的。\n\n","slug":"es6-promise","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne6p0009i8ohdlk8aqi7","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/2\">https://github.com/taoliujun/blog/issues/2</a></p>\n<!--hexo\n---\nurl: es6-promise\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p><strong>Promise</strong>是业务开发中使用率最高的ES6方法了，但日常容易忽略几个点，以及记不得它几个方法的区别，现记录。</p>\n<h2 id=\"容易忽略的点\"><a href=\"#容易忽略的点\" class=\"headerlink\" title=\"容易忽略的点\"></a>容易忽略的点</h2><ul>\n<li><code>catch</code>是<code>then</code>的语法糖，但是<code>catch</code>可以捕获<code>then</code>中的异常，而<code>then</code>的第二个回调函数不行。</li>\n<li>如果没有使用<code>catch</code>捕获错误，那么Promise的错误不会传递到外层，即使外层有<code>try...catch</code>也捕获不到。</li>\n<li>因为<code>catch</code>捕获了<code>rejected</code>且返回新的实例，所以在<code>all</code>等方法中，p1实现了<code>catch</code>方法，则p1的<code>rejected</code>不会触发p的<code>catch</code>。</li>\n</ul>\n<h2 id=\"几个方法的区别\"><a href=\"#几个方法的区别\" class=\"headerlink\" title=\"几个方法的区别\"></a>几个方法的区别</h2><table>\n<thead>\n<tr>\n<th>方法</th>\n<th>resolved的前提</th>\n<th>rejected的前提</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>all</td>\n<td>全部resolved</td>\n<td>任一rejected</td>\n<td>-</td>\n</tr>\n<tr>\n<td>race</td>\n<td>任一resolved</td>\n<td>任一rejected</td>\n<td>任一率先改变的状态，传递给p</td>\n</tr>\n<tr>\n<td>allSettled</td>\n<td>全部改变</td>\n<td>-</td>\n<td>状态全部改变，传递给p。格式为: <br /> <code>&#123;status: &#39;fulfilled&#39;, value: value&#125;</code> <br/> 或者 <br/> <code>&#123;status: &#39;rejected&#39;, reason: reason&#125;</code></td>\n</tr>\n<tr>\n<td>any</td>\n<td>任一resolved</td>\n<td>全部rejected</td>\n<td>传递给<code>catch</code>的是一个<code>AggregateError</code>实例</td>\n</tr>\n</tbody></table>\n<!--hexo-->\n\n<h1 id=\"AggregateError\"><a href=\"#AggregateError\" class=\"headerlink\" title=\"AggregateError\"></a>AggregateError</h1><p>AggregateError封装了Error数组，它的结构是：</p>\n<blockquote>\n<p>AggregateError(errors[, message])</p>\n</blockquote>\n<p><code>AggregateError()</code>构造函数可以接受两个参数。</p>\n<ul>\n<li>errors：数组，它的每个成员都是一个错误对象。该参数是必须的。</li>\n<li>message：字符串，表示 AggregateError 抛出时的提示信息。该参数是可选的。</li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/2\">https://github.com/taoliujun/blog/issues/2</a></p>\n<!--hexo\n---\nurl: es6-promise\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p><strong>Promise</strong>是业务开发中使用率最高的ES6方法了，但日常容易忽略几个点，以及记不得它几个方法的区别，现记录。</p>\n<h2 id=\"容易忽略的点\"><a href=\"#容易忽略的点\" class=\"headerlink\" title=\"容易忽略的点\"></a>容易忽略的点</h2><ul>\n<li><code>catch</code>是<code>then</code>的语法糖，但是<code>catch</code>可以捕获<code>then</code>中的异常，而<code>then</code>的第二个回调函数不行。</li>\n<li>如果没有使用<code>catch</code>捕获错误，那么Promise的错误不会传递到外层，即使外层有<code>try...catch</code>也捕获不到。</li>\n<li>因为<code>catch</code>捕获了<code>rejected</code>且返回新的实例，所以在<code>all</code>等方法中，p1实现了<code>catch</code>方法，则p1的<code>rejected</code>不会触发p的<code>catch</code>。</li>\n</ul>\n<h2 id=\"几个方法的区别\"><a href=\"#几个方法的区别\" class=\"headerlink\" title=\"几个方法的区别\"></a>几个方法的区别</h2><table>\n<thead>\n<tr>\n<th>方法</th>\n<th>resolved的前提</th>\n<th>rejected的前提</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>all</td>\n<td>全部resolved</td>\n<td>任一rejected</td>\n<td>-</td>\n</tr>\n<tr>\n<td>race</td>\n<td>任一resolved</td>\n<td>任一rejected</td>\n<td>任一率先改变的状态，传递给p</td>\n</tr>\n<tr>\n<td>allSettled</td>\n<td>全部改变</td>\n<td>-</td>\n<td>状态全部改变，传递给p。格式为: <br /> <code>&#123;status: &#39;fulfilled&#39;, value: value&#125;</code> <br/> 或者 <br/> <code>&#123;status: &#39;rejected&#39;, reason: reason&#125;</code></td>\n</tr>\n<tr>\n<td>any</td>\n<td>任一resolved</td>\n<td>全部rejected</td>\n<td>传递给<code>catch</code>的是一个<code>AggregateError</code>实例</td>\n</tr>\n</tbody></table>\n<!--hexo-->\n\n<h1 id=\"AggregateError\"><a href=\"#AggregateError\" class=\"headerlink\" title=\"AggregateError\"></a>AggregateError</h1><p>AggregateError封装了Error数组，它的结构是：</p>\n<blockquote>\n<p>AggregateError(errors[, message])</p>\n</blockquote>\n<p><code>AggregateError()</code>构造函数可以接受两个参数。</p>\n<ul>\n<li>errors：数组，它的每个成员都是一个错误对象。该参数是必须的。</li>\n<li>message：字符串，表示 AggregateError 抛出时的提示信息。该参数是可选的。</li>\n</ul>\n"},{"title":"整理ES6：Proxy的应用场景","date":"2023-07-05T22:33:50.000Z","url":"es6-proxy","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/12](https://github.com/taoliujun/blog/issues/12)\n\n<!--hexo\n---\nurl: es6-proxy\ntags:\n  - es6\n  - javascript\n---\n-->\n\nProxy拦截对象的操作，这些操作有13种：get、set、apply等。\n\n## get、set\n\n拦截对象的读取和赋值操作。如下场景，如果用户角色是管理员，那么期望在读取姓名的时候，补充上“管理员”角色名称，并且管理员的姓名不允许被修改。\n\n```ts\nconst user = {\n  name: \"张三\",\n  sex: \"男\",\n};\n\nconst admin = new Proxy(\n  { ...user },\n  {\n    get: (target, key) => {\n      if (key === \"name\") {\n        return `管理员：${target[key]}`;\n      }\n      return target[key];\n    },\n\n    set: (target, key, value) => {\n      if (key === \"name\") {\n        throw new Error(\"不能修改管理员姓名\");\n      }\n      target[key] = value;\n      return true;\n    },\n  }\n);\n\nconsole.log(\"admin信息1：\", admin.name, admin.sex);\nadmin.sex = \"女\";\ntry {\n  admin.name = \"李四\";\n} catch (e) {\n  console.log(e);\n}\nconsole.log(\"admin信息2：\", admin.name, admin.sex);\n```\n\n```shell\nadmin信息1： 管理员：张三 男\nError: 不能修改管理员姓名\n    at Object.set (/Users/stao2/www/learn/something/1.ts:18:15)\n    at Object.<anonymous> (/Users/stao2/www/learn/something/1.ts:29:14)\n    at Module._compile (node:internal/modules/cjs/loader:1254:14)\n    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)\n    at Module.load (node:internal/modules/cjs/loader:1117:32)\n    at Module._load (node:internal/modules/cjs/loader:958:12)\n    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)\n    at node:internal/main/run_main_module:23:47\nadmin信息2： 管理员：张三 女\n```\n\n利用这个规则，可以方便的给对象做一层扩展，而不用修改原来的对象逻辑。\n\n## apply\n\napply可以拦截函数的调用，对用户的年龄，但是对不同的角色，校验规则不一样，而且校验代码挺多，函数里的校验就耦合了。例如：\n\n```ts\nfunction validate(role, age) {\n  if (role === \"student\") {\n    if (age < 7) {\n      return \"不满足学生年龄\";\n    }\n  }\n  if (role === \"teacher\") {\n    if (age < 24 || age > 60) {\n      return \"不满足教室年龄\";\n    }\n  }\n  // ...其他公用的代码\n  return \"validate success\";\n}\n\nconsole.log(validate(\"student\", 4), validate(\"teacher\", 123));\n```\n\n```shell\n不满足学生年龄 不满足教室年龄\n```\n\n但是利用Proxy，可以这样做：\n\n```ts\nfunction validate(user) {\n  // ...其他公用的代码\n  return \"validate success\";\n}\n\nconst validateStudent = new Proxy(validate, {\n  apply: (target, thisArg, args) => {\n    const [user] = args;\n    if (user.age < 7) {\n      return \"不满足学生年龄\";\n    }\n    return target(args);\n  },\n});\n\nconsole.log(validateStudent({ age: 7 }),validateStudent({ age: 8 }));\n```\n\n## 其他\n\nProxy还有`has`，`construct`等拦截，先知道有这些东西，用的时候看文档用Proxy实现，而不是自己两眼一抹黑写了半天自己杂乱的代码。\n\n值得一提的是，很多MVVM框架是用Proxy做数据劫持的，例如Vue3，这样可以监听到对象的变化，从而实现响应式。\n\n\n\n","source":"_posts/es6-proxy.md","raw":"---\ntitle: \"整理ES6：Proxy的应用场景\"\ndate: \"2023-07-06T06:33:50Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-proxy\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/12](https://github.com/taoliujun/blog/issues/12)\n\n<!--hexo\n---\nurl: es6-proxy\ntags:\n  - es6\n  - javascript\n---\n-->\n\nProxy拦截对象的操作，这些操作有13种：get、set、apply等。\n\n## get、set\n\n拦截对象的读取和赋值操作。如下场景，如果用户角色是管理员，那么期望在读取姓名的时候，补充上“管理员”角色名称，并且管理员的姓名不允许被修改。\n\n```ts\nconst user = {\n  name: \"张三\",\n  sex: \"男\",\n};\n\nconst admin = new Proxy(\n  { ...user },\n  {\n    get: (target, key) => {\n      if (key === \"name\") {\n        return `管理员：${target[key]}`;\n      }\n      return target[key];\n    },\n\n    set: (target, key, value) => {\n      if (key === \"name\") {\n        throw new Error(\"不能修改管理员姓名\");\n      }\n      target[key] = value;\n      return true;\n    },\n  }\n);\n\nconsole.log(\"admin信息1：\", admin.name, admin.sex);\nadmin.sex = \"女\";\ntry {\n  admin.name = \"李四\";\n} catch (e) {\n  console.log(e);\n}\nconsole.log(\"admin信息2：\", admin.name, admin.sex);\n```\n\n```shell\nadmin信息1： 管理员：张三 男\nError: 不能修改管理员姓名\n    at Object.set (/Users/stao2/www/learn/something/1.ts:18:15)\n    at Object.<anonymous> (/Users/stao2/www/learn/something/1.ts:29:14)\n    at Module._compile (node:internal/modules/cjs/loader:1254:14)\n    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)\n    at Module.load (node:internal/modules/cjs/loader:1117:32)\n    at Module._load (node:internal/modules/cjs/loader:958:12)\n    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)\n    at node:internal/main/run_main_module:23:47\nadmin信息2： 管理员：张三 女\n```\n\n利用这个规则，可以方便的给对象做一层扩展，而不用修改原来的对象逻辑。\n\n## apply\n\napply可以拦截函数的调用，对用户的年龄，但是对不同的角色，校验规则不一样，而且校验代码挺多，函数里的校验就耦合了。例如：\n\n```ts\nfunction validate(role, age) {\n  if (role === \"student\") {\n    if (age < 7) {\n      return \"不满足学生年龄\";\n    }\n  }\n  if (role === \"teacher\") {\n    if (age < 24 || age > 60) {\n      return \"不满足教室年龄\";\n    }\n  }\n  // ...其他公用的代码\n  return \"validate success\";\n}\n\nconsole.log(validate(\"student\", 4), validate(\"teacher\", 123));\n```\n\n```shell\n不满足学生年龄 不满足教室年龄\n```\n\n但是利用Proxy，可以这样做：\n\n```ts\nfunction validate(user) {\n  // ...其他公用的代码\n  return \"validate success\";\n}\n\nconst validateStudent = new Proxy(validate, {\n  apply: (target, thisArg, args) => {\n    const [user] = args;\n    if (user.age < 7) {\n      return \"不满足学生年龄\";\n    }\n    return target(args);\n  },\n});\n\nconsole.log(validateStudent({ age: 7 }),validateStudent({ age: 8 }));\n```\n\n## 其他\n\nProxy还有`has`，`construct`等拦截，先知道有这些东西，用的时候看文档用Proxy实现，而不是自己两眼一抹黑写了半天自己杂乱的代码。\n\n值得一提的是，很多MVVM框架是用Proxy做数据劫持的，例如Vue3，这样可以监听到对象的变化，从而实现响应式。\n\n\n\n","slug":"es6-proxy","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne6q000ai8oh3czc7dtv","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/12\">https://github.com/taoliujun/blog/issues/12</a></p>\n<!--hexo\n---\nurl: es6-proxy\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>Proxy拦截对象的操作，这些操作有13种：get、set、apply等。</p>\n<h2 id=\"get、set\"><a href=\"#get、set\" class=\"headerlink\" title=\"get、set\"></a>get、set</h2><p>拦截对象的读取和赋值操作。如下场景，如果用户角色是管理员，那么期望在读取姓名的时候，补充上“管理员”角色名称，并且管理员的姓名不允许被修改。</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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> user = &#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\">sex</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\">const</span> admin = <span class=\"keyword\">new</span> <span class=\"title class_\">Proxy</span>(</span><br><span class=\"line\">  &#123; ...user &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    <span class=\"attr\">get</span>: <span class=\"function\">(<span class=\"params\">target, key</span>) =&gt;</span> &#123;</span><br><span class=\"line\">      <span class=\"keyword\">if</span> (key === <span class=\"string\">&quot;name&quot;</span>) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> <span class=\"string\">`管理员：<span class=\"subst\">$&#123;target[key]&#125;</span>`</span>;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">      <span class=\"keyword\">return</span> target[key];</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">set</span>: <span class=\"function\">(<span class=\"params\">target, key, value</span>) =&gt;</span> &#123;</span><br><span class=\"line\">      <span class=\"keyword\">if</span> (key === <span class=\"string\">&quot;name&quot;</span>) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">throw</span> <span class=\"keyword\">new</span> <span class=\"title class_\">Error</span>(<span class=\"string\">&quot;不能修改管理员姓名&quot;</span>);</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">      target[key] = value;</span><br><span class=\"line\">      <span class=\"keyword\">return</span> <span class=\"literal\">true</span>;</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=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;admin信息1：&quot;</span>, admin.<span class=\"property\">name</span>, admin.<span class=\"property\">sex</span>);</span><br><span class=\"line\">admin.<span class=\"property\">sex</span> = <span class=\"string\">&quot;女&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">try</span> &#123;</span><br><span class=\"line\">  admin.<span class=\"property\">name</span> = <span class=\"string\">&quot;李四&quot;</span>;</span><br><span class=\"line\">&#125; <span class=\"keyword\">catch</span> (e) &#123;</span><br><span class=\"line\">  <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(e);</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\">&quot;admin信息2：&quot;</span>, admin.<span class=\"property\">name</span>, admin.<span class=\"property\">sex</span>);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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\">admin信息1： 管理员：张三 男</span><br><span class=\"line\">Error: 不能修改管理员姓名</span><br><span class=\"line\">    at Object.set (/Users/stao2/www/learn/something/1.ts:18:15)</span><br><span class=\"line\">    at Object.&lt;anonymous&gt; (/Users/stao2/www/learn/something/1.ts:29:14)</span><br><span class=\"line\">    at Module._compile (node:internal/modules/cjs/loader:1254:14)</span><br><span class=\"line\">    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)</span><br><span class=\"line\">    at Module.load (node:internal/modules/cjs/loader:1117:32)</span><br><span class=\"line\">    at Module._load (node:internal/modules/cjs/loader:958:12)</span><br><span class=\"line\">    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)</span><br><span class=\"line\">    at node:internal/main/run_main_module:23:47</span><br><span class=\"line\">admin信息2： 管理员：张三 女</span><br></pre></td></tr></table></figure>\n\n<p>利用这个规则，可以方便的给对象做一层扩展，而不用修改原来的对象逻辑。</p>\n<h2 id=\"apply\"><a href=\"#apply\" class=\"headerlink\" title=\"apply\"></a>apply</h2><p>apply可以拦截函数的调用，对用户的年龄，但是对不同的角色，校验规则不一样，而且校验代码挺多，函数里的校验就耦合了。例如：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">function</span> <span class=\"title function_\">validate</span>(<span class=\"params\">role, age</span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (role === <span class=\"string\">&quot;student&quot;</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (age &lt; <span class=\"number\">7</span>) &#123;</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\">  <span class=\"keyword\">if</span> (role === <span class=\"string\">&quot;teacher&quot;</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (age &lt; <span class=\"number\">24</span> || age &gt; <span class=\"number\">60</span>) &#123;</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\">  <span class=\"comment\">// ...其他公用的代码</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"string\">&quot;validate success&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=\"title function_\">validate</span>(<span class=\"string\">&quot;student&quot;</span>, <span class=\"number\">4</span>), <span class=\"title function_\">validate</span>(<span class=\"string\">&quot;teacher&quot;</span>, <span class=\"number\">123</span>));</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">不满足学生年龄 不满足教室年龄</span><br></pre></td></tr></table></figure>\n\n<p>但是利用Proxy，可以这样做：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">function</span> <span class=\"title function_\">validate</span>(<span class=\"params\">user</span>) &#123;</span><br><span class=\"line\">  <span class=\"comment\">// ...其他公用的代码</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"string\">&quot;validate success&quot;</span>;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> validateStudent = <span class=\"keyword\">new</span> <span class=\"title class_\">Proxy</span>(validate, &#123;</span><br><span class=\"line\">  <span class=\"attr\">apply</span>: <span class=\"function\">(<span class=\"params\">target, thisArg, args</span>) =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [user] = args;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (user.<span class=\"property\">age</span> &lt; <span class=\"number\">7</span>) &#123;</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\">    <span class=\"keyword\">return</span> <span class=\"title function_\">target</span>(args);</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 function_\">validateStudent</span>(&#123; <span class=\"attr\">age</span>: <span class=\"number\">7</span> &#125;),<span class=\"title function_\">validateStudent</span>(&#123; <span class=\"attr\">age</span>: <span class=\"number\">8</span> &#125;));</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h2><p>Proxy还有<code>has</code>，<code>construct</code>等拦截，先知道有这些东西，用的时候看文档用Proxy实现，而不是自己两眼一抹黑写了半天自己杂乱的代码。</p>\n<p>值得一提的是，很多MVVM框架是用Proxy做数据劫持的，例如Vue3，这样可以监听到对象的变化，从而实现响应式。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/12\">https://github.com/taoliujun/blog/issues/12</a></p>\n<!--hexo\n---\nurl: es6-proxy\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>Proxy拦截对象的操作，这些操作有13种：get、set、apply等。</p>\n<h2 id=\"get、set\"><a href=\"#get、set\" class=\"headerlink\" title=\"get、set\"></a>get、set</h2><p>拦截对象的读取和赋值操作。如下场景，如果用户角色是管理员，那么期望在读取姓名的时候，补充上“管理员”角色名称，并且管理员的姓名不允许被修改。</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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> user = &#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\">sex</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\">const</span> admin = <span class=\"keyword\">new</span> <span class=\"title class_\">Proxy</span>(</span><br><span class=\"line\">  &#123; ...user &#125;,</span><br><span class=\"line\">  &#123;</span><br><span class=\"line\">    <span class=\"attr\">get</span>: <span class=\"function\">(<span class=\"params\">target, key</span>) =&gt;</span> &#123;</span><br><span class=\"line\">      <span class=\"keyword\">if</span> (key === <span class=\"string\">&quot;name&quot;</span>) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> <span class=\"string\">`管理员：<span class=\"subst\">$&#123;target[key]&#125;</span>`</span>;</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">      <span class=\"keyword\">return</span> target[key];</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">set</span>: <span class=\"function\">(<span class=\"params\">target, key, value</span>) =&gt;</span> &#123;</span><br><span class=\"line\">      <span class=\"keyword\">if</span> (key === <span class=\"string\">&quot;name&quot;</span>) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">throw</span> <span class=\"keyword\">new</span> <span class=\"title class_\">Error</span>(<span class=\"string\">&quot;不能修改管理员姓名&quot;</span>);</span><br><span class=\"line\">      &#125;</span><br><span class=\"line\">      target[key] = value;</span><br><span class=\"line\">      <span class=\"keyword\">return</span> <span class=\"literal\">true</span>;</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=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;admin信息1：&quot;</span>, admin.<span class=\"property\">name</span>, admin.<span class=\"property\">sex</span>);</span><br><span class=\"line\">admin.<span class=\"property\">sex</span> = <span class=\"string\">&quot;女&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">try</span> &#123;</span><br><span class=\"line\">  admin.<span class=\"property\">name</span> = <span class=\"string\">&quot;李四&quot;</span>;</span><br><span class=\"line\">&#125; <span class=\"keyword\">catch</span> (e) &#123;</span><br><span class=\"line\">  <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(e);</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\">&quot;admin信息2：&quot;</span>, admin.<span class=\"property\">name</span>, admin.<span class=\"property\">sex</span>);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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\">admin信息1： 管理员：张三 男</span><br><span class=\"line\">Error: 不能修改管理员姓名</span><br><span class=\"line\">    at Object.set (/Users/stao2/www/learn/something/1.ts:18:15)</span><br><span class=\"line\">    at Object.&lt;anonymous&gt; (/Users/stao2/www/learn/something/1.ts:29:14)</span><br><span class=\"line\">    at Module._compile (node:internal/modules/cjs/loader:1254:14)</span><br><span class=\"line\">    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)</span><br><span class=\"line\">    at Module.load (node:internal/modules/cjs/loader:1117:32)</span><br><span class=\"line\">    at Module._load (node:internal/modules/cjs/loader:958:12)</span><br><span class=\"line\">    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)</span><br><span class=\"line\">    at node:internal/main/run_main_module:23:47</span><br><span class=\"line\">admin信息2： 管理员：张三 女</span><br></pre></td></tr></table></figure>\n\n<p>利用这个规则，可以方便的给对象做一层扩展，而不用修改原来的对象逻辑。</p>\n<h2 id=\"apply\"><a href=\"#apply\" class=\"headerlink\" title=\"apply\"></a>apply</h2><p>apply可以拦截函数的调用，对用户的年龄，但是对不同的角色，校验规则不一样，而且校验代码挺多，函数里的校验就耦合了。例如：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">function</span> <span class=\"title function_\">validate</span>(<span class=\"params\">role, age</span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (role === <span class=\"string\">&quot;student&quot;</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (age &lt; <span class=\"number\">7</span>) &#123;</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\">  <span class=\"keyword\">if</span> (role === <span class=\"string\">&quot;teacher&quot;</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (age &lt; <span class=\"number\">24</span> || age &gt; <span class=\"number\">60</span>) &#123;</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\">  <span class=\"comment\">// ...其他公用的代码</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"string\">&quot;validate success&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=\"title function_\">validate</span>(<span class=\"string\">&quot;student&quot;</span>, <span class=\"number\">4</span>), <span class=\"title function_\">validate</span>(<span class=\"string\">&quot;teacher&quot;</span>, <span class=\"number\">123</span>));</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">不满足学生年龄 不满足教室年龄</span><br></pre></td></tr></table></figure>\n\n<p>但是利用Proxy，可以这样做：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">function</span> <span class=\"title function_\">validate</span>(<span class=\"params\">user</span>) &#123;</span><br><span class=\"line\">  <span class=\"comment\">// ...其他公用的代码</span></span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"string\">&quot;validate success&quot;</span>;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> validateStudent = <span class=\"keyword\">new</span> <span class=\"title class_\">Proxy</span>(validate, &#123;</span><br><span class=\"line\">  <span class=\"attr\">apply</span>: <span class=\"function\">(<span class=\"params\">target, thisArg, args</span>) =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [user] = args;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (user.<span class=\"property\">age</span> &lt; <span class=\"number\">7</span>) &#123;</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\">    <span class=\"keyword\">return</span> <span class=\"title function_\">target</span>(args);</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 function_\">validateStudent</span>(&#123; <span class=\"attr\">age</span>: <span class=\"number\">7</span> &#125;),<span class=\"title function_\">validateStudent</span>(&#123; <span class=\"attr\">age</span>: <span class=\"number\">8</span> &#125;));</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h2><p>Proxy还有<code>has</code>，<code>construct</code>等拦截，先知道有这些东西，用的时候看文档用Proxy实现，而不是自己两眼一抹黑写了半天自己杂乱的代码。</p>\n<p>值得一提的是，很多MVVM框架是用Proxy做数据劫持的，例如Vue3，这样可以监听到对象的变化，从而实现响应式。</p>\n"},{"title":"整理ES6：Reflect和Object的关系","date":"2023-07-05T22:32:57.000Z","url":"es6-reflect","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/11](https://github.com/taoliujun/blog/issues/11)\n\n<!--hexo\n---\nurl: es6-reflect\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## Reflect是什么\n\n在我若干年前阅读Reflect文档的那几天，我常闷被里自问，这是个什么玩意？随着时间的推移，我对它的理解越来越深刻，也越来越喜欢它。我想，这是一个值得深入研究的东西。(这句话是Copilot补充的，我觉得很有道理，就留下来了)\n\nReflect是操作对象用的，我觉得Reflect最大的用处有两个。\n\n一是将Object的命令式、函数式混用行为，统一成函数式行为。比如`delete obj.key`，`key in obj`对应为`Reflect.deleteProperty(obj, key)`和`Reflect.has(obj, key)`。\n\n二是Reflect的方法和Proxy的拦截器一一对应，这样就可以用Reflect来实现Proxy的拦截器，而不用再写一遍拦截器的逻辑。比如`Reflect.get(obj, key)`对应为`get`拦截器，`Reflect.set(obj, key, value)`对应为`set`拦截器。\n\n**它拥有的静态方法和Proxy一样多**\n\n## get\n\n```ts\nconst user = {\n  name: \"张三\",\n  age: 20,\n};\n// user.age\nconsole.log(Reflect.get(user, \"age\"));\n```\n\n```shell\n20\n```\n\n代码很好理解，不一一表述了。\n\n## set\n\n```ts\nconst user = {\n  name: \"张三\",\n  age: 20,\n};\n// user.name = '李四'\nReflect.set(user, \"name\", \"李四\");\nconsole.log(user);\n```\n\n```shell\n{ name: '李四', age: 20 }\n```\n\n## delete\n\n```ts\nconst user = {\n  name: \"张三\",\n  age: 20,\n};\n\nReflect.deleteProperty(user, \"name\");\nconsole.log(user);\n```\n\n```shell\n{ age: 20 }\n```\n\n更多的方法见MDN即可。\n\n\n\n","source":"_posts/es6-reflect.md","raw":"---\ntitle: \"整理ES6：Reflect和Object的关系\"\ndate: \"2023-07-06T06:32:57Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-reflect\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/11](https://github.com/taoliujun/blog/issues/11)\n\n<!--hexo\n---\nurl: es6-reflect\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## Reflect是什么\n\n在我若干年前阅读Reflect文档的那几天，我常闷被里自问，这是个什么玩意？随着时间的推移，我对它的理解越来越深刻，也越来越喜欢它。我想，这是一个值得深入研究的东西。(这句话是Copilot补充的，我觉得很有道理，就留下来了)\n\nReflect是操作对象用的，我觉得Reflect最大的用处有两个。\n\n一是将Object的命令式、函数式混用行为，统一成函数式行为。比如`delete obj.key`，`key in obj`对应为`Reflect.deleteProperty(obj, key)`和`Reflect.has(obj, key)`。\n\n二是Reflect的方法和Proxy的拦截器一一对应，这样就可以用Reflect来实现Proxy的拦截器，而不用再写一遍拦截器的逻辑。比如`Reflect.get(obj, key)`对应为`get`拦截器，`Reflect.set(obj, key, value)`对应为`set`拦截器。\n\n**它拥有的静态方法和Proxy一样多**\n\n## get\n\n```ts\nconst user = {\n  name: \"张三\",\n  age: 20,\n};\n// user.age\nconsole.log(Reflect.get(user, \"age\"));\n```\n\n```shell\n20\n```\n\n代码很好理解，不一一表述了。\n\n## set\n\n```ts\nconst user = {\n  name: \"张三\",\n  age: 20,\n};\n// user.name = '李四'\nReflect.set(user, \"name\", \"李四\");\nconsole.log(user);\n```\n\n```shell\n{ name: '李四', age: 20 }\n```\n\n## delete\n\n```ts\nconst user = {\n  name: \"张三\",\n  age: 20,\n};\n\nReflect.deleteProperty(user, \"name\");\nconsole.log(user);\n```\n\n```shell\n{ age: 20 }\n```\n\n更多的方法见MDN即可。\n\n\n\n","slug":"es6-reflect","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne6s000di8ohhg557c68","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/11\">https://github.com/taoliujun/blog/issues/11</a></p>\n<!--hexo\n---\nurl: es6-reflect\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"Reflect是什么\"><a href=\"#Reflect是什么\" class=\"headerlink\" title=\"Reflect是什么\"></a>Reflect是什么</h2><p>在我若干年前阅读Reflect文档的那几天，我常闷被里自问，这是个什么玩意？随着时间的推移，我对它的理解越来越深刻，也越来越喜欢它。我想，这是一个值得深入研究的东西。(这句话是Copilot补充的，我觉得很有道理，就留下来了)</p>\n<p>Reflect是操作对象用的，我觉得Reflect最大的用处有两个。</p>\n<p>一是将Object的命令式、函数式混用行为，统一成函数式行为。比如<code>delete obj.key</code>，<code>key in obj</code>对应为<code>Reflect.deleteProperty(obj, key)</code>和<code>Reflect.has(obj, key)</code>。</p>\n<p>二是Reflect的方法和Proxy的拦截器一一对应，这样就可以用Reflect来实现Proxy的拦截器，而不用再写一遍拦截器的逻辑。比如<code>Reflect.get(obj, key)</code>对应为<code>get</code>拦截器，<code>Reflect.set(obj, key, value)</code>对应为<code>set</code>拦截器。</p>\n<p><strong>它拥有的静态方法和Proxy一样多</strong></p>\n<h2 id=\"get\"><a href=\"#get\" class=\"headerlink\" title=\"get\"></a>get</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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> user = &#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\">// user.age</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_\">get</span>(user, <span class=\"string\">&quot;age&quot;</span>));</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">20</span><br></pre></td></tr></table></figure>\n\n<p>代码很好理解，不一一表述了。</p>\n<h2 id=\"set\"><a href=\"#set\" class=\"headerlink\" title=\"set\"></a>set</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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> user = &#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\">// user.name = &#x27;李四&#x27;</span></span><br><span class=\"line\"><span class=\"title class_\">Reflect</span>.<span class=\"title function_\">set</span>(user, <span class=\"string\">&quot;name&quot;</span>, <span class=\"string\">&quot;李四&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(user);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">&#123; name: &#x27;李四&#x27;, age: 20 &#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"delete\"><a href=\"#delete\" class=\"headerlink\" title=\"delete\"></a>delete</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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> user = &#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><br><span class=\"line\"><span class=\"title class_\">Reflect</span>.<span class=\"title function_\">deleteProperty</span>(user, <span class=\"string\">&quot;name&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(user);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">&#123; age: 20 &#125;</span><br></pre></td></tr></table></figure>\n\n<p>更多的方法见MDN即可。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/11\">https://github.com/taoliujun/blog/issues/11</a></p>\n<!--hexo\n---\nurl: es6-reflect\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"Reflect是什么\"><a href=\"#Reflect是什么\" class=\"headerlink\" title=\"Reflect是什么\"></a>Reflect是什么</h2><p>在我若干年前阅读Reflect文档的那几天，我常闷被里自问，这是个什么玩意？随着时间的推移，我对它的理解越来越深刻，也越来越喜欢它。我想，这是一个值得深入研究的东西。(这句话是Copilot补充的，我觉得很有道理，就留下来了)</p>\n<p>Reflect是操作对象用的，我觉得Reflect最大的用处有两个。</p>\n<p>一是将Object的命令式、函数式混用行为，统一成函数式行为。比如<code>delete obj.key</code>，<code>key in obj</code>对应为<code>Reflect.deleteProperty(obj, key)</code>和<code>Reflect.has(obj, key)</code>。</p>\n<p>二是Reflect的方法和Proxy的拦截器一一对应，这样就可以用Reflect来实现Proxy的拦截器，而不用再写一遍拦截器的逻辑。比如<code>Reflect.get(obj, key)</code>对应为<code>get</code>拦截器，<code>Reflect.set(obj, key, value)</code>对应为<code>set</code>拦截器。</p>\n<p><strong>它拥有的静态方法和Proxy一样多</strong></p>\n<h2 id=\"get\"><a href=\"#get\" class=\"headerlink\" title=\"get\"></a>get</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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> user = &#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\">// user.age</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_\">get</span>(user, <span class=\"string\">&quot;age&quot;</span>));</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">20</span><br></pre></td></tr></table></figure>\n\n<p>代码很好理解，不一一表述了。</p>\n<h2 id=\"set\"><a href=\"#set\" class=\"headerlink\" title=\"set\"></a>set</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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> user = &#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\">// user.name = &#x27;李四&#x27;</span></span><br><span class=\"line\"><span class=\"title class_\">Reflect</span>.<span class=\"title function_\">set</span>(user, <span class=\"string\">&quot;name&quot;</span>, <span class=\"string\">&quot;李四&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(user);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">&#123; name: &#x27;李四&#x27;, age: 20 &#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"delete\"><a href=\"#delete\" class=\"headerlink\" title=\"delete\"></a>delete</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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> user = &#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><br><span class=\"line\"><span class=\"title class_\">Reflect</span>.<span class=\"title function_\">deleteProperty</span>(user, <span class=\"string\">&quot;name&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(user);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">&#123; age: 20 &#125;</span><br></pre></td></tr></table></figure>\n\n<p>更多的方法见MDN即可。</p>\n"},{"title":"整理ES6：Set真的挺好的","date":"2023-07-05T22:34:36.000Z","url":"es6-set","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/14](https://github.com/taoliujun/blog/issues/14)\n\n<!--hexo\n---\nurl: es6-set\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## 为什么用Set\n\n\n```ts\n// Array\nlet arr1 = [\"a\", \"b\", \"c\", \"d\"];\n\narr1 = arr1.filter((element) => element !== \"d\");\narr1.filter((element) => element !== \"e\").push(\"e\");\nconsole.log(arr1.includes(\"b\"));\n\n// Object\nlet obj1 = { a: true, b: true, c: true, d: true };\n\ndelete obj1.d;\nobj1.e = true;\nconsole.log(\"b\" in obj1);\n\n// Set\nlet set1 = new Set([\"a\", \"b\", \"c\"]);\n\nset1.delete(\"d\");\nset1.add(\"e\");\nconsole.log(set1.has(\"b\"));\n```\n\n如上演示了Array、Object、Set三种数据结构的基本操作，Set提供了更为便捷的方式：\n\n1. 相比Array有更简单的语法，在运算复杂度上有很大提升。\n1. 相比Object的命令式操作，Set提供了方法式的操作。\n\n\n## 唯一特性\n\n在工作中，要用到集合唯一特性的场景有很多，用Array实现的时候，需要自己写很多代码来保证唯一性，而用Object实现，又不能保证元素的访问顺序。\n\n举几个例子。\n\n```ts\n// 历史搜索记录唯一\nconst s1 = new Set();\n\ns1.add(\"长江\");\ns1.add(\"黄河\");\ns1.add(\"故宫\");\ns1.add(\"长江\");\ns1.add(\"圆明园\");\n\nconsole.log(s1);\n```\n\n```ts\n// 移除输入的重复数据ID\nconst a = [23, 58, 23, 19, 96];\nconst s1 = new Set(a);\n\nconsole.log(Array.from(s1));\n```\n\n\n## 注意点\n\n* Set为了保持元素的唯一，内部使用了`SameValueZero`算法，这意味着`NaN`和`NaN`是相等的，`+0`和`-0`是相等的。\n\n\n\n","source":"_posts/es6-set.md","raw":"---\ntitle: \"整理ES6：Set真的挺好的\"\ndate: \"2023-07-06T06:34:36Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-set\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/14](https://github.com/taoliujun/blog/issues/14)\n\n<!--hexo\n---\nurl: es6-set\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## 为什么用Set\n\n\n```ts\n// Array\nlet arr1 = [\"a\", \"b\", \"c\", \"d\"];\n\narr1 = arr1.filter((element) => element !== \"d\");\narr1.filter((element) => element !== \"e\").push(\"e\");\nconsole.log(arr1.includes(\"b\"));\n\n// Object\nlet obj1 = { a: true, b: true, c: true, d: true };\n\ndelete obj1.d;\nobj1.e = true;\nconsole.log(\"b\" in obj1);\n\n// Set\nlet set1 = new Set([\"a\", \"b\", \"c\"]);\n\nset1.delete(\"d\");\nset1.add(\"e\");\nconsole.log(set1.has(\"b\"));\n```\n\n如上演示了Array、Object、Set三种数据结构的基本操作，Set提供了更为便捷的方式：\n\n1. 相比Array有更简单的语法，在运算复杂度上有很大提升。\n1. 相比Object的命令式操作，Set提供了方法式的操作。\n\n\n## 唯一特性\n\n在工作中，要用到集合唯一特性的场景有很多，用Array实现的时候，需要自己写很多代码来保证唯一性，而用Object实现，又不能保证元素的访问顺序。\n\n举几个例子。\n\n```ts\n// 历史搜索记录唯一\nconst s1 = new Set();\n\ns1.add(\"长江\");\ns1.add(\"黄河\");\ns1.add(\"故宫\");\ns1.add(\"长江\");\ns1.add(\"圆明园\");\n\nconsole.log(s1);\n```\n\n```ts\n// 移除输入的重复数据ID\nconst a = [23, 58, 23, 19, 96];\nconst s1 = new Set(a);\n\nconsole.log(Array.from(s1));\n```\n\n\n## 注意点\n\n* Set为了保持元素的唯一，内部使用了`SameValueZero`算法，这意味着`NaN`和`NaN`是相等的，`+0`和`-0`是相等的。\n\n\n\n","slug":"es6-set","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne6t000gi8ohfc7n582s","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/14\">https://github.com/taoliujun/blog/issues/14</a></p>\n<!--hexo\n---\nurl: es6-set\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"为什么用Set\"><a href=\"#为什么用Set\" class=\"headerlink\" title=\"为什么用Set\"></a>为什么用Set</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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\">// Array</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> arr1 = [<span class=\"string\">&quot;a&quot;</span>, <span class=\"string\">&quot;b&quot;</span>, <span class=\"string\">&quot;c&quot;</span>, <span class=\"string\">&quot;d&quot;</span>];</span><br><span class=\"line\"></span><br><span class=\"line\">arr1 = arr1.<span class=\"title function_\">filter</span>(<span class=\"function\">(<span class=\"params\">element</span>) =&gt;</span> element !== <span class=\"string\">&quot;d&quot;</span>);</span><br><span class=\"line\">arr1.<span class=\"title function_\">filter</span>(<span class=\"function\">(<span class=\"params\">element</span>) =&gt;</span> element !== <span class=\"string\">&quot;e&quot;</span>).<span class=\"title function_\">push</span>(<span class=\"string\">&quot;e&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(arr1.<span class=\"title function_\">includes</span>(<span class=\"string\">&quot;b&quot;</span>));</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// Object</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> obj1 = &#123; <span class=\"attr\">a</span>: <span class=\"literal\">true</span>, <span class=\"attr\">b</span>: <span class=\"literal\">true</span>, <span class=\"attr\">c</span>: <span class=\"literal\">true</span>, <span class=\"attr\">d</span>: <span class=\"literal\">true</span> &#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">delete</span> obj1.<span class=\"property\">d</span>;</span><br><span class=\"line\">obj1.<span class=\"property\">e</span> = <span class=\"literal\">true</span>;</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;b&quot;</span> <span class=\"keyword\">in</span> obj1);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// Set</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> set1 = <span class=\"keyword\">new</span> <span class=\"title class_\">Set</span>([<span class=\"string\">&quot;a&quot;</span>, <span class=\"string\">&quot;b&quot;</span>, <span class=\"string\">&quot;c&quot;</span>]);</span><br><span class=\"line\"></span><br><span class=\"line\">set1.<span class=\"title function_\">delete</span>(<span class=\"string\">&quot;d&quot;</span>);</span><br><span class=\"line\">set1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;e&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(set1.<span class=\"title function_\">has</span>(<span class=\"string\">&quot;b&quot;</span>));</span><br></pre></td></tr></table></figure>\n\n<p>如上演示了Array、Object、Set三种数据结构的基本操作，Set提供了更为便捷的方式：</p>\n<ol>\n<li>相比Array有更简单的语法，在运算复杂度上有很大提升。</li>\n<li>相比Object的命令式操作，Set提供了方法式的操作。</li>\n</ol>\n<h2 id=\"唯一特性\"><a href=\"#唯一特性\" class=\"headerlink\" title=\"唯一特性\"></a>唯一特性</h2><p>在工作中，要用到集合唯一特性的场景有很多，用Array实现的时候，需要自己写很多代码来保证唯一性，而用Object实现，又不能保证元素的访问顺序。</p>\n<p>举几个例子。</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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> s1 = <span class=\"keyword\">new</span> <span class=\"title class_\">Set</span>();</span><br><span class=\"line\"></span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;长江&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;黄河&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;故宫&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;长江&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;圆明园&quot;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(s1);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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\">// 移除输入的重复数据ID</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> a = [<span class=\"number\">23</span>, <span class=\"number\">58</span>, <span class=\"number\">23</span>, <span class=\"number\">19</span>, <span class=\"number\">96</span>];</span><br><span class=\"line\"><span class=\"keyword\">const</span> s1 = <span class=\"keyword\">new</span> <span class=\"title class_\">Set</span>(a);</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_\">Array</span>.<span class=\"title function_\">from</span>(s1));</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"注意点\"><a href=\"#注意点\" class=\"headerlink\" title=\"注意点\"></a>注意点</h2><ul>\n<li>Set为了保持元素的唯一，内部使用了<code>SameValueZero</code>算法，这意味着<code>NaN</code>和<code>NaN</code>是相等的，<code>+0</code>和<code>-0</code>是相等的。</li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/14\">https://github.com/taoliujun/blog/issues/14</a></p>\n<!--hexo\n---\nurl: es6-set\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"为什么用Set\"><a href=\"#为什么用Set\" class=\"headerlink\" title=\"为什么用Set\"></a>为什么用Set</h2><figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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\">// Array</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> arr1 = [<span class=\"string\">&quot;a&quot;</span>, <span class=\"string\">&quot;b&quot;</span>, <span class=\"string\">&quot;c&quot;</span>, <span class=\"string\">&quot;d&quot;</span>];</span><br><span class=\"line\"></span><br><span class=\"line\">arr1 = arr1.<span class=\"title function_\">filter</span>(<span class=\"function\">(<span class=\"params\">element</span>) =&gt;</span> element !== <span class=\"string\">&quot;d&quot;</span>);</span><br><span class=\"line\">arr1.<span class=\"title function_\">filter</span>(<span class=\"function\">(<span class=\"params\">element</span>) =&gt;</span> element !== <span class=\"string\">&quot;e&quot;</span>).<span class=\"title function_\">push</span>(<span class=\"string\">&quot;e&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(arr1.<span class=\"title function_\">includes</span>(<span class=\"string\">&quot;b&quot;</span>));</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// Object</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> obj1 = &#123; <span class=\"attr\">a</span>: <span class=\"literal\">true</span>, <span class=\"attr\">b</span>: <span class=\"literal\">true</span>, <span class=\"attr\">c</span>: <span class=\"literal\">true</span>, <span class=\"attr\">d</span>: <span class=\"literal\">true</span> &#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">delete</span> obj1.<span class=\"property\">d</span>;</span><br><span class=\"line\">obj1.<span class=\"property\">e</span> = <span class=\"literal\">true</span>;</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;b&quot;</span> <span class=\"keyword\">in</span> obj1);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// Set</span></span><br><span class=\"line\"><span class=\"keyword\">let</span> set1 = <span class=\"keyword\">new</span> <span class=\"title class_\">Set</span>([<span class=\"string\">&quot;a&quot;</span>, <span class=\"string\">&quot;b&quot;</span>, <span class=\"string\">&quot;c&quot;</span>]);</span><br><span class=\"line\"></span><br><span class=\"line\">set1.<span class=\"title function_\">delete</span>(<span class=\"string\">&quot;d&quot;</span>);</span><br><span class=\"line\">set1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;e&quot;</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(set1.<span class=\"title function_\">has</span>(<span class=\"string\">&quot;b&quot;</span>));</span><br></pre></td></tr></table></figure>\n\n<p>如上演示了Array、Object、Set三种数据结构的基本操作，Set提供了更为便捷的方式：</p>\n<ol>\n<li>相比Array有更简单的语法，在运算复杂度上有很大提升。</li>\n<li>相比Object的命令式操作，Set提供了方法式的操作。</li>\n</ol>\n<h2 id=\"唯一特性\"><a href=\"#唯一特性\" class=\"headerlink\" title=\"唯一特性\"></a>唯一特性</h2><p>在工作中，要用到集合唯一特性的场景有很多，用Array实现的时候，需要自己写很多代码来保证唯一性，而用Object实现，又不能保证元素的访问顺序。</p>\n<p>举几个例子。</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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> s1 = <span class=\"keyword\">new</span> <span class=\"title class_\">Set</span>();</span><br><span class=\"line\"></span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;长江&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;黄河&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;故宫&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;长江&quot;</span>);</span><br><span class=\"line\">s1.<span class=\"title function_\">add</span>(<span class=\"string\">&quot;圆明园&quot;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(s1);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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\">// 移除输入的重复数据ID</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> a = [<span class=\"number\">23</span>, <span class=\"number\">58</span>, <span class=\"number\">23</span>, <span class=\"number\">19</span>, <span class=\"number\">96</span>];</span><br><span class=\"line\"><span class=\"keyword\">const</span> s1 = <span class=\"keyword\">new</span> <span class=\"title class_\">Set</span>(a);</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_\">Array</span>.<span class=\"title function_\">from</span>(s1));</span><br></pre></td></tr></table></figure>\n\n\n<h2 id=\"注意点\"><a href=\"#注意点\" class=\"headerlink\" title=\"注意点\"></a>注意点</h2><ul>\n<li>Set为了保持元素的唯一，内部使用了<code>SameValueZero</code>算法，这意味着<code>NaN</code>和<code>NaN</code>是相等的，<code>+0</code>和<code>-0</code>是相等的。</li>\n</ul>\n"},{"title":"整理ES6：聊一聊Symbol ","date":"2023-07-05T22:35:00.000Z","url":"es6-symbol","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/15](https://github.com/taoliujun/blog/issues/15)\n\n<!--hexo\n---\nurl: es6-symbol\ntags:\n  - es6\n  - javascript\n---\n-->\n\n我在5年前看完`Symbol`，就将它抛之脑后，直到最近才重新研究，看看它是什么样的宝藏。\n\n先快速看下它是什么。\n\n## Symbol 基本用法\n\n```typescript\nconst a1 = Symbol();\nconst a2 = Symbol(\"i am a\");\nconst a3 = Symbol(\"i am a\");\n\nconsole.log(\"a1\", a1);\nconsole.log(\"a2\", a2);\nconsole.log(\"a2\", a2.description);\nconsole.log(\"a2 === a3\", a2 === a3);\n```\n\n```shell\na1 Symbol()\na2 Symbol(i am a)\na2 i am a\na2 === a3 false\n```\n\n* 从上可看到，`Symbol`是一个函数，它的返回值是一个`Symbol`类型的值，这个值是**唯一**的，即使传入相同的参数，也不会相等。\n* 入参的目的仅仅是为了描述它的来源。\n* `description`返回`Symbol`实例的描述。\n\n## 让我使用它\n\n假设如下代码：\n\n```typescript\nconst WOMAN = \"woman\";\nconst MAN = \"man\";\n\nfunction getSex(input) {\n  if (input === WOMAN) return 1;\n  if (input === MAN) return 2;\n}\n\nconsole.log(getSex(MAN));\n```\n\n但代码足够复杂，或出于粗心，几个常量的值设置为一样的字符串，怕是难以发现。那么用Symbol可以方便的保证其唯一性。\n\n```typescript\nconst WOMAN = Symbol();\nconst MAN = Symbol();\n// ...more\n```\n\n## Symbol 的全局注册\n\n直接看代码：\n\n```typescript\nfunction fn1() {\n  return Symbol(\"a\");\n}\n\nfunction fn2() {\n  return Symbol.for(\"a\");\n}\n\nconsole.log(\"fn1\", fn1() === fn1());\nconsole.log(\"fn2\", fn2() === fn2());\n```\n\n```shell\nfn1 false\nfn2 true\n```\n\n正如前面说的，`Symbol`函数的返回值肯定是不一样的，所以多次`fn1`的执行结果是不相等的。但是`Symbol.for`的执行结果是相等的，因为它是全局注册的。\n\n\n\n","source":"_posts/es6-symbol.md","raw":"---\ntitle: \"整理ES6：聊一聊Symbol \"\ndate: \"2023-07-06T06:35:00Z\"\ncategories:\n  - [JavaScript]\n\nurl: es6-symbol\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/15](https://github.com/taoliujun/blog/issues/15)\n\n<!--hexo\n---\nurl: es6-symbol\ntags:\n  - es6\n  - javascript\n---\n-->\n\n我在5年前看完`Symbol`，就将它抛之脑后，直到最近才重新研究，看看它是什么样的宝藏。\n\n先快速看下它是什么。\n\n## Symbol 基本用法\n\n```typescript\nconst a1 = Symbol();\nconst a2 = Symbol(\"i am a\");\nconst a3 = Symbol(\"i am a\");\n\nconsole.log(\"a1\", a1);\nconsole.log(\"a2\", a2);\nconsole.log(\"a2\", a2.description);\nconsole.log(\"a2 === a3\", a2 === a3);\n```\n\n```shell\na1 Symbol()\na2 Symbol(i am a)\na2 i am a\na2 === a3 false\n```\n\n* 从上可看到，`Symbol`是一个函数，它的返回值是一个`Symbol`类型的值，这个值是**唯一**的，即使传入相同的参数，也不会相等。\n* 入参的目的仅仅是为了描述它的来源。\n* `description`返回`Symbol`实例的描述。\n\n## 让我使用它\n\n假设如下代码：\n\n```typescript\nconst WOMAN = \"woman\";\nconst MAN = \"man\";\n\nfunction getSex(input) {\n  if (input === WOMAN) return 1;\n  if (input === MAN) return 2;\n}\n\nconsole.log(getSex(MAN));\n```\n\n但代码足够复杂，或出于粗心，几个常量的值设置为一样的字符串，怕是难以发现。那么用Symbol可以方便的保证其唯一性。\n\n```typescript\nconst WOMAN = Symbol();\nconst MAN = Symbol();\n// ...more\n```\n\n## Symbol 的全局注册\n\n直接看代码：\n\n```typescript\nfunction fn1() {\n  return Symbol(\"a\");\n}\n\nfunction fn2() {\n  return Symbol.for(\"a\");\n}\n\nconsole.log(\"fn1\", fn1() === fn1());\nconsole.log(\"fn2\", fn2() === fn2());\n```\n\n```shell\nfn1 false\nfn2 true\n```\n\n正如前面说的，`Symbol`函数的返回值肯定是不一样的，所以多次`fn1`的执行结果是不相等的。但是`Symbol.for`的执行结果是相等的，因为它是全局注册的。\n\n\n\n","slug":"es6-symbol","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne6u000ki8ohhd0t9mcp","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/15\">https://github.com/taoliujun/blog/issues/15</a></p>\n<!--hexo\n---\nurl: es6-symbol\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>我在5年前看完<code>Symbol</code>，就将它抛之脑后，直到最近才重新研究，看看它是什么样的宝藏。</p>\n<p>先快速看下它是什么。</p>\n<h2 id=\"Symbol-基本用法\"><a href=\"#Symbol-基本用法\" class=\"headerlink\" title=\"Symbol 基本用法\"></a>Symbol 基本用法</h2><figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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> a1 = <span class=\"title class_\">Symbol</span>();</span><br><span class=\"line\"><span class=\"keyword\">const</span> a2 = <span class=\"title class_\">Symbol</span>(<span class=\"string\">&quot;i am a&quot;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> a3 = <span class=\"title class_\">Symbol</span>(<span class=\"string\">&quot;i am a&quot;</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=\"string\">&quot;a1&quot;</span>, a1);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;a2&quot;</span>, a2);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;a2&quot;</span>, a2.<span class=\"property\">description</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;a2 === a3&quot;</span>, a2 === a3);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><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\">a1 Symbol()</span><br><span class=\"line\">a2 Symbol(i am a)</span><br><span class=\"line\">a2 i am a</span><br><span class=\"line\">a2 === a3 false</span><br></pre></td></tr></table></figure>\n\n<ul>\n<li>从上可看到，<code>Symbol</code>是一个函数，它的返回值是一个<code>Symbol</code>类型的值，这个值是<strong>唯一</strong>的，即使传入相同的参数，也不会相等。</li>\n<li>入参的目的仅仅是为了描述它的来源。</li>\n<li><code>description</code>返回<code>Symbol</code>实例的描述。</li>\n</ul>\n<h2 id=\"让我使用它\"><a href=\"#让我使用它\" class=\"headerlink\" title=\"让我使用它\"></a>让我使用它</h2><p>假设如下代码：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><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=\"variable constant_\">WOMAN</span> = <span class=\"string\">&quot;woman&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"variable constant_\">MAN</span> = <span class=\"string\">&quot;man&quot;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">getSex</span>(<span class=\"params\">input</span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (input === <span class=\"variable constant_\">WOMAN</span>) <span class=\"keyword\">return</span> <span class=\"number\">1</span>;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (input === <span class=\"variable constant_\">MAN</span>) <span class=\"keyword\">return</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 function_\">getSex</span>(<span class=\"variable constant_\">MAN</span>));</span><br></pre></td></tr></table></figure>\n\n<p>但代码足够复杂，或出于粗心，几个常量的值设置为一样的字符串，怕是难以发现。那么用Symbol可以方便的保证其唯一性。</p>\n<figure class=\"highlight typescript\"><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> <span class=\"variable constant_\">WOMAN</span> = <span class=\"title class_\">Symbol</span>();</span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"variable constant_\">MAN</span> = <span class=\"title class_\">Symbol</span>();</span><br><span class=\"line\"><span class=\"comment\">// ...more</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Symbol-的全局注册\"><a href=\"#Symbol-的全局注册\" class=\"headerlink\" title=\"Symbol 的全局注册\"></a>Symbol 的全局注册</h2><p>直接看代码：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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_\">fn1</span>(<span class=\"params\"></span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"title class_\">Symbol</span>(<span class=\"string\">&quot;a&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_\">fn2</span>(<span class=\"params\"></span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"title class_\">Symbol</span>.<span class=\"title function_\">for</span>(<span class=\"string\">&quot;a&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;fn1&quot;</span>, <span class=\"title function_\">fn1</span>() === <span class=\"title function_\">fn1</span>());</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;fn2&quot;</span>, <span class=\"title function_\">fn2</span>() === <span class=\"title function_\">fn2</span>());</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><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\">fn1 false</span><br><span class=\"line\">fn2 true</span><br></pre></td></tr></table></figure>\n\n<p>正如前面说的，<code>Symbol</code>函数的返回值肯定是不一样的，所以多次<code>fn1</code>的执行结果是不相等的。但是<code>Symbol.for</code>的执行结果是相等的，因为它是全局注册的。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/15\">https://github.com/taoliujun/blog/issues/15</a></p>\n<!--hexo\n---\nurl: es6-symbol\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<p>我在5年前看完<code>Symbol</code>，就将它抛之脑后，直到最近才重新研究，看看它是什么样的宝藏。</p>\n<p>先快速看下它是什么。</p>\n<h2 id=\"Symbol-基本用法\"><a href=\"#Symbol-基本用法\" class=\"headerlink\" title=\"Symbol 基本用法\"></a>Symbol 基本用法</h2><figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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> a1 = <span class=\"title class_\">Symbol</span>();</span><br><span class=\"line\"><span class=\"keyword\">const</span> a2 = <span class=\"title class_\">Symbol</span>(<span class=\"string\">&quot;i am a&quot;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> a3 = <span class=\"title class_\">Symbol</span>(<span class=\"string\">&quot;i am a&quot;</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=\"string\">&quot;a1&quot;</span>, a1);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;a2&quot;</span>, a2);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;a2&quot;</span>, a2.<span class=\"property\">description</span>);</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;a2 === a3&quot;</span>, a2 === a3);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><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\">a1 Symbol()</span><br><span class=\"line\">a2 Symbol(i am a)</span><br><span class=\"line\">a2 i am a</span><br><span class=\"line\">a2 === a3 false</span><br></pre></td></tr></table></figure>\n\n<ul>\n<li>从上可看到，<code>Symbol</code>是一个函数，它的返回值是一个<code>Symbol</code>类型的值，这个值是<strong>唯一</strong>的，即使传入相同的参数，也不会相等。</li>\n<li>入参的目的仅仅是为了描述它的来源。</li>\n<li><code>description</code>返回<code>Symbol</code>实例的描述。</li>\n</ul>\n<h2 id=\"让我使用它\"><a href=\"#让我使用它\" class=\"headerlink\" title=\"让我使用它\"></a>让我使用它</h2><p>假设如下代码：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><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=\"variable constant_\">WOMAN</span> = <span class=\"string\">&quot;woman&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"variable constant_\">MAN</span> = <span class=\"string\">&quot;man&quot;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">getSex</span>(<span class=\"params\">input</span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (input === <span class=\"variable constant_\">WOMAN</span>) <span class=\"keyword\">return</span> <span class=\"number\">1</span>;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (input === <span class=\"variable constant_\">MAN</span>) <span class=\"keyword\">return</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 function_\">getSex</span>(<span class=\"variable constant_\">MAN</span>));</span><br></pre></td></tr></table></figure>\n\n<p>但代码足够复杂，或出于粗心，几个常量的值设置为一样的字符串，怕是难以发现。那么用Symbol可以方便的保证其唯一性。</p>\n<figure class=\"highlight typescript\"><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> <span class=\"variable constant_\">WOMAN</span> = <span class=\"title class_\">Symbol</span>();</span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"variable constant_\">MAN</span> = <span class=\"title class_\">Symbol</span>();</span><br><span class=\"line\"><span class=\"comment\">// ...more</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"Symbol-的全局注册\"><a href=\"#Symbol-的全局注册\" class=\"headerlink\" title=\"Symbol 的全局注册\"></a>Symbol 的全局注册</h2><p>直接看代码：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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_\">fn1</span>(<span class=\"params\"></span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"title class_\">Symbol</span>(<span class=\"string\">&quot;a&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_\">fn2</span>(<span class=\"params\"></span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"title class_\">Symbol</span>.<span class=\"title function_\">for</span>(<span class=\"string\">&quot;a&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;fn1&quot;</span>, <span class=\"title function_\">fn1</span>() === <span class=\"title function_\">fn1</span>());</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;fn2&quot;</span>, <span class=\"title function_\">fn2</span>() === <span class=\"title function_\">fn2</span>());</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight shell\"><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\">fn1 false</span><br><span class=\"line\">fn2 true</span><br></pre></td></tr></table></figure>\n\n<p>正如前面说的，<code>Symbol</code>函数的返回值肯定是不一样的，所以多次<code>fn1</code>的执行结果是不相等的。但是<code>Symbol.for</code>的执行结果是相等的，因为它是全局注册的。</p>\n"},{"title":"3. GitHub Actions - Examples","date":"2023-07-05T22:30:34.000Z","url":"github-actions-examples","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/7](https://github.com/taoliujun/blog/issues/7)\n\n<!--hexo\n---\nurl: github-actions-examples\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/examples/using-scripts-to-test-your-code-on-a-runner\n\n官方描述了3个例子，用来检测文件中的broken，我读书少，就依葫芦画瓢写一个eslint检测增量文件的功能，完成以下功能：\n\n* pull_request触发workflow。\n* 使用eslint检查pull request的增量文件。\n* 在pull request中回复检测结果。\n\n代码见：https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml\n\n\n\n","source":"_posts/github-actions-examples.md","raw":"---\ntitle: \"3. GitHub Actions - Examples\"\ndate: \"2023-07-06T06:30:34Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-examples\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/7](https://github.com/taoliujun/blog/issues/7)\n\n<!--hexo\n---\nurl: github-actions-examples\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/examples/using-scripts-to-test-your-code-on-a-runner\n\n官方描述了3个例子，用来检测文件中的broken，我读书少，就依葫芦画瓢写一个eslint检测增量文件的功能，完成以下功能：\n\n* pull_request触发workflow。\n* 使用eslint检查pull request的增量文件。\n* 在pull request中回复检测结果。\n\n代码见：https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml\n\n\n\n","slug":"github-actions-examples","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne6w000ni8oh3793hs4v","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/7\">https://github.com/taoliujun/blog/issues/7</a></p>\n<!--hexo\n---\nurl: github-actions-examples\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/examples/using-scripts-to-test-your-code-on-a-runner\">https://docs.github.com/en/actions/examples/using-scripts-to-test-your-code-on-a-runner</a></p>\n<p>官方描述了3个例子，用来检测文件中的broken，我读书少，就依葫芦画瓢写一个eslint检测增量文件的功能，完成以下功能：</p>\n<ul>\n<li>pull_request触发workflow。</li>\n<li>使用eslint检查pull request的增量文件。</li>\n<li>在pull request中回复检测结果。</li>\n</ul>\n<p>代码见：<a href=\"https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml\">https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/7\">https://github.com/taoliujun/blog/issues/7</a></p>\n<!--hexo\n---\nurl: github-actions-examples\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/examples/using-scripts-to-test-your-code-on-a-runner\">https://docs.github.com/en/actions/examples/using-scripts-to-test-your-code-on-a-runner</a></p>\n<p>官方描述了3个例子，用来检测文件中的broken，我读书少，就依葫芦画瓢写一个eslint检测增量文件的功能，完成以下功能：</p>\n<ul>\n<li>pull_request触发workflow。</li>\n<li>使用eslint检查pull request的增量文件。</li>\n<li>在pull request中回复检测结果。</li>\n</ul>\n<p>代码见：<a href=\"https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml\">https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml</a></p>\n"},{"title":"0. GitHub Actions - Intro","date":"2023-07-05T22:27:24.000Z","url":"github-actions-intro","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/4](https://github.com/taoliujun/blog/issues/4)\n\n<!--hexo\n---\nurl: github-actions-intro\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions\n\n之前依葫芦画瓢使用了CI，并未对此做系统的了解，近期通读了一遍Github Actions文档，本系列文章是个人在 https://docs.github.com/en/actions 学习过程的杂乱记录，它是这样的：\n\n* 本文章系列不同于官方文档的中文翻译，只是加入个人理解的学习日记，内容不会完全覆盖。\n* 时间背景是 2023年12月份。\n* 按照官方文档的顺序做了笔记，但忽略了个人认为不重要的部分。\n* 都是经验主义的理解，并且由于本人英文水平有限，会有理解出错的地方。\n* 部分理解也未基于代码实际运行结果，纯属经验和猜测。\n* 因为文档术语翻译往往词不达意，所以会有很多中英参杂。\n\n## 是什么？\n\n既然你搜索到本文，想必是知道它是干什么的。我概括为：\n\n> GitHub Actions允许你在某些行为（比如push master分支）后，利用特定机器，执行脚本（比如eslint check），并反馈结果形成一个job。job可以串起来，以完成更复杂的自动化操作。\n\n## 和CI的关系\n\nCI/CD是执行自动化工作流的持续发布策略，它存在于gitlab、github、jekins，甚至你在服务器上写了一个简单的计划任务拉取仓库代码后进行打包的脚本，也可以称之为CI。\n\n在github.com上的CI就是GitHub Actions，它提供了一组特定的环境变量、上下文、宿主机器。\n\n\n\n\n","source":"_posts/github-actions-intro.md","raw":"---\ntitle: \"0. GitHub Actions - Intro\"\ndate: \"2023-07-06T06:27:24Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-intro\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/4](https://github.com/taoliujun/blog/issues/4)\n\n<!--hexo\n---\nurl: github-actions-intro\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions\n\n之前依葫芦画瓢使用了CI，并未对此做系统的了解，近期通读了一遍Github Actions文档，本系列文章是个人在 https://docs.github.com/en/actions 学习过程的杂乱记录，它是这样的：\n\n* 本文章系列不同于官方文档的中文翻译，只是加入个人理解的学习日记，内容不会完全覆盖。\n* 时间背景是 2023年12月份。\n* 按照官方文档的顺序做了笔记，但忽略了个人认为不重要的部分。\n* 都是经验主义的理解，并且由于本人英文水平有限，会有理解出错的地方。\n* 部分理解也未基于代码实际运行结果，纯属经验和猜测。\n* 因为文档术语翻译往往词不达意，所以会有很多中英参杂。\n\n## 是什么？\n\n既然你搜索到本文，想必是知道它是干什么的。我概括为：\n\n> GitHub Actions允许你在某些行为（比如push master分支）后，利用特定机器，执行脚本（比如eslint check），并反馈结果形成一个job。job可以串起来，以完成更复杂的自动化操作。\n\n## 和CI的关系\n\nCI/CD是执行自动化工作流的持续发布策略，它存在于gitlab、github、jekins，甚至你在服务器上写了一个简单的计划任务拉取仓库代码后进行打包的脚本，也可以称之为CI。\n\n在github.com上的CI就是GitHub Actions，它提供了一组特定的环境变量、上下文、宿主机器。\n\n\n\n\n","slug":"github-actions-intro","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne6x000qi8ohhrsiazvn","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/4\">https://github.com/taoliujun/blog/issues/4</a></p>\n<!--hexo\n---\nurl: github-actions-intro\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions\">https://docs.github.com/en/actions</a></p>\n<p>之前依葫芦画瓢使用了CI，并未对此做系统的了解，近期通读了一遍Github Actions文档，本系列文章是个人在 <a href=\"https://docs.github.com/en/actions\">https://docs.github.com/en/actions</a> 学习过程的杂乱记录，它是这样的：</p>\n<ul>\n<li>本文章系列不同于官方文档的中文翻译，只是加入个人理解的学习日记，内容不会完全覆盖。</li>\n<li>时间背景是 2023年12月份。</li>\n<li>按照官方文档的顺序做了笔记，但忽略了个人认为不重要的部分。</li>\n<li>都是经验主义的理解，并且由于本人英文水平有限，会有理解出错的地方。</li>\n<li>部分理解也未基于代码实际运行结果，纯属经验和猜测。</li>\n<li>因为文档术语翻译往往词不达意，所以会有很多中英参杂。</li>\n</ul>\n<h2 id=\"是什么？\"><a href=\"#是什么？\" class=\"headerlink\" title=\"是什么？\"></a>是什么？</h2><p>既然你搜索到本文，想必是知道它是干什么的。我概括为：</p>\n<blockquote>\n<p>GitHub Actions允许你在某些行为（比如push master分支）后，利用特定机器，执行脚本（比如eslint check），并反馈结果形成一个job。job可以串起来，以完成更复杂的自动化操作。</p>\n</blockquote>\n<h2 id=\"和CI的关系\"><a href=\"#和CI的关系\" class=\"headerlink\" title=\"和CI的关系\"></a>和CI的关系</h2><p>CI&#x2F;CD是执行自动化工作流的持续发布策略，它存在于gitlab、github、jekins，甚至你在服务器上写了一个简单的计划任务拉取仓库代码后进行打包的脚本，也可以称之为CI。</p>\n<p>在github.com上的CI就是GitHub Actions，它提供了一组特定的环境变量、上下文、宿主机器。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/4\">https://github.com/taoliujun/blog/issues/4</a></p>\n<!--hexo\n---\nurl: github-actions-intro\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions\">https://docs.github.com/en/actions</a></p>\n<p>之前依葫芦画瓢使用了CI，并未对此做系统的了解，近期通读了一遍Github Actions文档，本系列文章是个人在 <a href=\"https://docs.github.com/en/actions\">https://docs.github.com/en/actions</a> 学习过程的杂乱记录，它是这样的：</p>\n<ul>\n<li>本文章系列不同于官方文档的中文翻译，只是加入个人理解的学习日记，内容不会完全覆盖。</li>\n<li>时间背景是 2023年12月份。</li>\n<li>按照官方文档的顺序做了笔记，但忽略了个人认为不重要的部分。</li>\n<li>都是经验主义的理解，并且由于本人英文水平有限，会有理解出错的地方。</li>\n<li>部分理解也未基于代码实际运行结果，纯属经验和猜测。</li>\n<li>因为文档术语翻译往往词不达意，所以会有很多中英参杂。</li>\n</ul>\n<h2 id=\"是什么？\"><a href=\"#是什么？\" class=\"headerlink\" title=\"是什么？\"></a>是什么？</h2><p>既然你搜索到本文，想必是知道它是干什么的。我概括为：</p>\n<blockquote>\n<p>GitHub Actions允许你在某些行为（比如push master分支）后，利用特定机器，执行脚本（比如eslint check），并反馈结果形成一个job。job可以串起来，以完成更复杂的自动化操作。</p>\n</blockquote>\n<h2 id=\"和CI的关系\"><a href=\"#和CI的关系\" class=\"headerlink\" title=\"和CI的关系\"></a>和CI的关系</h2><p>CI&#x2F;CD是执行自动化工作流的持续发布策略，它存在于gitlab、github、jekins，甚至你在服务器上写了一个简单的计划任务拉取仓库代码后进行打包的脚本，也可以称之为CI。</p>\n<p>在github.com上的CI就是GitHub Actions，它提供了一组特定的环境变量、上下文、宿主机器。</p>\n"},{"title":"5. GitHub Actions - Using jobs","date":"2023-07-05T22:31:40.000Z","url":"github-actions-jobs","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/9](https://github.com/taoliujun/blog/issues/9)\n\n<!--hexo\n---\nurl: github-actions-jobs\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/using-jobs/using-jobs-in-a-workflow\n\n## 使用jobs\n\n* jobs组成workflow，jobs默认并行执行，使用needs管理依赖执行。\n* job id命名要唯一，由字母、数字、-、_组成。\n\n## 使用runner\n\n可以使用github提供的机器，也可以自建机器，没啥其他重要的。\n\n## 执行条件\n\n执行if表达式的结果，决定是否执行本job。举例：\n\n```yaml\nname: example-workflow\non: [push]\njobs:\n  production-deploy:\n    if: github.repository == 'octo-org/octo-repo-prod'\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: '14'\n      - run: npm install -g bats\n```\n\n## 矩阵\n晦涩的词语，理解为遍历变量创建重复执行的job，如下，该job将执行6次，在两个runner上分别执行3种node版本的job。\n\n```yaml\njobs:\n  example_matrix:\n    strategy:\n      matrix:\n        os: [ubuntu-22.04, ubuntu-20.04]\n        version: [10, 12, 14]\n    runs-on: ${{ matrix.os }}\n    steps:\n      - uses: actions/setup-node@v3\n        with:\n          node-version: ${{ matrix.version }}\n```\n\n也可以使用上下文创建matrix变量。\n\nmatrix还支持自身简单的覆盖扩展，参考文档即可。\n\n## 并发策略\n\n同时只能运行一个符合策略的job或workflow，并决定是否终止同组的job或workflow。\n\n## 环境\n\n无\n\n## 容器\n\n暂时用不到，无\n\n## 默认值\n\n可以在workflow和job级别分别设置默认值，目前支持设置`shell`、`working-directory`。\n\n\n\n","source":"_posts/github-actions-jobs.md","raw":"---\ntitle: \"5. GitHub Actions - Using jobs\"\ndate: \"2023-07-06T06:31:40Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-jobs\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/9](https://github.com/taoliujun/blog/issues/9)\n\n<!--hexo\n---\nurl: github-actions-jobs\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/using-jobs/using-jobs-in-a-workflow\n\n## 使用jobs\n\n* jobs组成workflow，jobs默认并行执行，使用needs管理依赖执行。\n* job id命名要唯一，由字母、数字、-、_组成。\n\n## 使用runner\n\n可以使用github提供的机器，也可以自建机器，没啥其他重要的。\n\n## 执行条件\n\n执行if表达式的结果，决定是否执行本job。举例：\n\n```yaml\nname: example-workflow\non: [push]\njobs:\n  production-deploy:\n    if: github.repository == 'octo-org/octo-repo-prod'\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: '14'\n      - run: npm install -g bats\n```\n\n## 矩阵\n晦涩的词语，理解为遍历变量创建重复执行的job，如下，该job将执行6次，在两个runner上分别执行3种node版本的job。\n\n```yaml\njobs:\n  example_matrix:\n    strategy:\n      matrix:\n        os: [ubuntu-22.04, ubuntu-20.04]\n        version: [10, 12, 14]\n    runs-on: ${{ matrix.os }}\n    steps:\n      - uses: actions/setup-node@v3\n        with:\n          node-version: ${{ matrix.version }}\n```\n\n也可以使用上下文创建matrix变量。\n\nmatrix还支持自身简单的覆盖扩展，参考文档即可。\n\n## 并发策略\n\n同时只能运行一个符合策略的job或workflow，并决定是否终止同组的job或workflow。\n\n## 环境\n\n无\n\n## 容器\n\n暂时用不到，无\n\n## 默认值\n\n可以在workflow和job级别分别设置默认值，目前支持设置`shell`、`working-directory`。\n\n\n\n","slug":"github-actions-jobs","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne6y000si8oh4dkm54lp","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/9\">https://github.com/taoliujun/blog/issues/9</a></p>\n<!--hexo\n---\nurl: github-actions-jobs\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/using-jobs/using-jobs-in-a-workflow\">https://docs.github.com/en/actions/using-jobs/using-jobs-in-a-workflow</a></p>\n<h2 id=\"使用jobs\"><a href=\"#使用jobs\" class=\"headerlink\" title=\"使用jobs\"></a>使用jobs</h2><ul>\n<li>jobs组成workflow，jobs默认并行执行，使用needs管理依赖执行。</li>\n<li>job id命名要唯一，由字母、数字、-、_组成。</li>\n</ul>\n<h2 id=\"使用runner\"><a href=\"#使用runner\" class=\"headerlink\" title=\"使用runner\"></a>使用runner</h2><p>可以使用github提供的机器，也可以自建机器，没啥其他重要的。</p>\n<h2 id=\"执行条件\"><a href=\"#执行条件\" class=\"headerlink\" title=\"执行条件\"></a>执行条件</h2><p>执行if表达式的结果，决定是否执行本job。举例：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><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=\"attr\">name:</span> <span class=\"string\">example-workflow</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">production-deploy:</span></span><br><span class=\"line\">    <span class=\"attr\">if:</span> <span class=\"string\">github.repository</span> <span class=\"string\">==</span> <span class=\"string\">&#x27;octo-org/octo-repo-prod&#x27;</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3</span></span><br><span class=\"line\">        <span class=\"attr\">with:</span></span><br><span class=\"line\">          <span class=\"attr\">node-version:</span> <span class=\"string\">&#x27;14&#x27;</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">npm</span> <span class=\"string\">install</span> <span class=\"string\">-g</span> <span class=\"string\">bats</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"矩阵\"><a href=\"#矩阵\" class=\"headerlink\" title=\"矩阵\"></a>矩阵</h2><p>晦涩的词语，理解为遍历变量创建重复执行的job，如下，该job将执行6次，在两个runner上分别执行3种node版本的job。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">example_matrix:</span></span><br><span class=\"line\">    <span class=\"attr\">strategy:</span></span><br><span class=\"line\">      <span class=\"attr\">matrix:</span></span><br><span class=\"line\">        <span class=\"attr\">os:</span> [<span class=\"string\">ubuntu-22.04</span>, <span class=\"string\">ubuntu-20.04</span>]</span><br><span class=\"line\">        <span class=\"attr\">version:</span> [<span class=\"number\">10</span>, <span class=\"number\">12</span>, <span class=\"number\">14</span>]</span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">matrix.os</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3</span></span><br><span class=\"line\">        <span class=\"attr\">with:</span></span><br><span class=\"line\">          <span class=\"attr\">node-version:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">matrix.version</span> <span class=\"string\">&#125;&#125;</span></span><br></pre></td></tr></table></figure>\n\n<p>也可以使用上下文创建matrix变量。</p>\n<p>matrix还支持自身简单的覆盖扩展，参考文档即可。</p>\n<h2 id=\"并发策略\"><a href=\"#并发策略\" class=\"headerlink\" title=\"并发策略\"></a>并发策略</h2><p>同时只能运行一个符合策略的job或workflow，并决定是否终止同组的job或workflow。</p>\n<h2 id=\"环境\"><a href=\"#环境\" class=\"headerlink\" title=\"环境\"></a>环境</h2><p>无</p>\n<h2 id=\"容器\"><a href=\"#容器\" class=\"headerlink\" title=\"容器\"></a>容器</h2><p>暂时用不到，无</p>\n<h2 id=\"默认值\"><a href=\"#默认值\" class=\"headerlink\" title=\"默认值\"></a>默认值</h2><p>可以在workflow和job级别分别设置默认值，目前支持设置<code>shell</code>、<code>working-directory</code>。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/9\">https://github.com/taoliujun/blog/issues/9</a></p>\n<!--hexo\n---\nurl: github-actions-jobs\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/using-jobs/using-jobs-in-a-workflow\">https://docs.github.com/en/actions/using-jobs/using-jobs-in-a-workflow</a></p>\n<h2 id=\"使用jobs\"><a href=\"#使用jobs\" class=\"headerlink\" title=\"使用jobs\"></a>使用jobs</h2><ul>\n<li>jobs组成workflow，jobs默认并行执行，使用needs管理依赖执行。</li>\n<li>job id命名要唯一，由字母、数字、-、_组成。</li>\n</ul>\n<h2 id=\"使用runner\"><a href=\"#使用runner\" class=\"headerlink\" title=\"使用runner\"></a>使用runner</h2><p>可以使用github提供的机器，也可以自建机器，没啥其他重要的。</p>\n<h2 id=\"执行条件\"><a href=\"#执行条件\" class=\"headerlink\" title=\"执行条件\"></a>执行条件</h2><p>执行if表达式的结果，决定是否执行本job。举例：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><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=\"attr\">name:</span> <span class=\"string\">example-workflow</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">production-deploy:</span></span><br><span class=\"line\">    <span class=\"attr\">if:</span> <span class=\"string\">github.repository</span> <span class=\"string\">==</span> <span class=\"string\">&#x27;octo-org/octo-repo-prod&#x27;</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3</span></span><br><span class=\"line\">        <span class=\"attr\">with:</span></span><br><span class=\"line\">          <span class=\"attr\">node-version:</span> <span class=\"string\">&#x27;14&#x27;</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">npm</span> <span class=\"string\">install</span> <span class=\"string\">-g</span> <span class=\"string\">bats</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"矩阵\"><a href=\"#矩阵\" class=\"headerlink\" title=\"矩阵\"></a>矩阵</h2><p>晦涩的词语，理解为遍历变量创建重复执行的job，如下，该job将执行6次，在两个runner上分别执行3种node版本的job。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">example_matrix:</span></span><br><span class=\"line\">    <span class=\"attr\">strategy:</span></span><br><span class=\"line\">      <span class=\"attr\">matrix:</span></span><br><span class=\"line\">        <span class=\"attr\">os:</span> [<span class=\"string\">ubuntu-22.04</span>, <span class=\"string\">ubuntu-20.04</span>]</span><br><span class=\"line\">        <span class=\"attr\">version:</span> [<span class=\"number\">10</span>, <span class=\"number\">12</span>, <span class=\"number\">14</span>]</span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">matrix.os</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3</span></span><br><span class=\"line\">        <span class=\"attr\">with:</span></span><br><span class=\"line\">          <span class=\"attr\">node-version:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">matrix.version</span> <span class=\"string\">&#125;&#125;</span></span><br></pre></td></tr></table></figure>\n\n<p>也可以使用上下文创建matrix变量。</p>\n<p>matrix还支持自身简单的覆盖扩展，参考文档即可。</p>\n<h2 id=\"并发策略\"><a href=\"#并发策略\" class=\"headerlink\" title=\"并发策略\"></a>并发策略</h2><p>同时只能运行一个符合策略的job或workflow，并决定是否终止同组的job或workflow。</p>\n<h2 id=\"环境\"><a href=\"#环境\" class=\"headerlink\" title=\"环境\"></a>环境</h2><p>无</p>\n<h2 id=\"容器\"><a href=\"#容器\" class=\"headerlink\" title=\"容器\"></a>容器</h2><p>暂时用不到，无</p>\n<h2 id=\"默认值\"><a href=\"#默认值\" class=\"headerlink\" title=\"默认值\"></a>默认值</h2><p>可以在workflow和job级别分别设置默认值，目前支持设置<code>shell</code>、<code>working-directory</code>。</p>\n"},{"title":"2. GitHub Actions - Learn GitHub Actions","date":"2023-07-05T22:29:53.000Z","url":"github-actions-learn","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/6](https://github.com/taoliujun/blog/issues/6)\n\n<!--hexo\n---\nurl: github-actions-learn\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions\n\n官方文档有点长，阅读了两天，容易让人阅读瞌睡，除了要熟知术语部分，其他部分看一遍知道有这些东西就行了，回头使用的时候翻看官方文档即可。\n\n## 理解GitHub Actions和术语\n\nGitHub Actions就是通过事件触发工作流，在特定机器中执行一连串工作，每个工作中执行若干个步骤的脚本。\n\n使用人类行为来举例，我说：“老婆，你去炒个青椒炒肉丝吧。”\n\n* 口头说话（Events）会触发老婆的工作流（Workflows）：炒青椒肉丝。\n* 工作流包含了两个工作（Jobs）：配菜、炒菜。\n* 配菜工作包含多个步骤（Steps）：清洗青椒、切青椒丝、清洗猪肉、切猪肉丝。\n* 老婆有一个绞肉机（Actions），它可以完成切猪肉丝的工作而不需要关注细节。\n\n它包含了下面几个重要的术语。\n\n### Workflows（工作流）\n\n项目有若干个工作流，它们在不同的事件时机触发。比如，口头说话触发炒青椒肉丝。\n\n工作流还可以互相引用。比如，做一顿晚饭工作流，包含了炒青椒肉丝工作流。\n\n### Events（事件）\n\nGithub提供了一系列触发工作流的事件，比如发起了pull request，create issue，push commit。\n\n它还包括两种特殊的事件：\n\n* 手动触发，比如你想执行工作流看看全量eslint检测结果。\n* 计划任务，比如你想每月30号看看全量eslint检测结果。\n\n### Jobs（工作）\n\nWorkflows由多个Jobs组成。\n\n每个Job运行在**同一机器上**，执行很多步骤的脚本，脚本可以是自定义的shell（比如自己切肉丝，要关注细节：使用什么刀，每个肉丝有多细），也可以是封装好的Actions（比如绞肉机）。\n\n**步骤按顺序执行**，可以共享数据，比如切青椒的步骤，可以读取到青椒清洗的农药残留数据。\n\n**工作还可以依赖**，默认情况下，工作并行执行，但有些场景工作是依赖的，比如炒菜工作，要依赖于配菜工作的完成。\n\n### Actions（脚本动作封装）\n\n顾名思义，就是将通用的动作封装起来，方便整个宇宙的程序员去使用。比如绞肉机就是将切肉丝的动作封装了起来。\n\n可以在Github Marketplace中找到和分享Actions.\n\n### Runners（运行的机器）\n\n工作流不能凭空执行，它也是运行在机器上的，它可以是虚拟机、docker容器。Github提供了 Ubuntu Linux、Microsoft Windows、MacOS这几种机器来执行工作流，注意一个限制：**一个机器同时只能执行一个Job**。\n\n如果官方的机器不能满足你，也可以自动自己的机器来跑工作流，后续会讲到。\n\n## 使用Actions\n\n上面说到Actions是脚本的封装，它可以是社区市场中的Actions，也可以是自定义Actions，甚至是一个Docker镜像。\n\n### Marketplace方式\n\nGithub提供了界面操作，让我们可以方便的在工作流中维护Actions，只要我们在浏览器中编辑yml文件，右侧就出现了Actions市场，可以点开某个Actions，查看它的详细配置。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281126235.png)\n​\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127958.png)\n\n对照着Actions的文档，我在Workflow中插入node。现在，我的配置文件长这样：\n\n```yaml\nname: lint\non: [push]\njobs:\n    eslint:\n        runs-on: ubuntu-latest\n        steps:\n            - name: Check out repository code\n              uses: actions/checkout@v3\n            - name: use node\n              uses: actions/setup-node@v3.3.0\n              with:\n                  node-version: latest\n            - run: node -v\n```\n\n然后，查看执行结果。\n​\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127692.png)\n\n### 自己的Actions\n\n还可以在自己的仓库里添加Actions，这里就贴官方原例子了。\n\n```shell\n|-- root (repository)\n|   |__ .github\n|       └── workflows\n|           └── my-first-workflow.yml\n|       └── actions\n|           |__ hello-world-action\n|               └── action.yml\n```\n\nExample workflow file:\n\n```yaml\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      # This step checks out a copy of your repository.\n      - uses: actions/checkout@v3\n      # This step references the directory that contains the action.\n      - uses: ./.github/actions/hello-world-action\n```\n\n### 公共的Actions\n\n```yaml\nuses: actions/setup-node@v3\n```\n\n使用其他Github仓库的Actions就是如此简单，我们常使用的actions/***，其实也属于公共仓库，它们是由官方维护的一组Actions，比较稳定。点击此处可以看到官方的Actions。\n\n### Docker镜像\n\n如果Runners和开源Actions都不能满足你，可以搞docker来执行Workflows。\n\n因本人的docker水平属于“哇，我能启动docker，我真厉害”，就不展开讲了。\n\n### 不同版本的Actions\n\nActions本质上是仓库里的文件，它会有版本区分，我们有好几种方法使用它：\n\n```yaml\n# 使用tag\nuses: actions/javascript-action@v1.0.1\n# 使用commitID\nuses: actions/javascript-action@172239021f7ba04fe7327647b213799853a9eb89\n# 使用branch\nuses: actions/javascript-action@main\n```\n\n## 基本特性\n\n这部分文档看的云里雾里的，讲了一些如何使用变量，如何在Jobs里共享数据，不知道这些内容出现在这里的目的是什么，略过。\n\n## 表达式\n\n支持在配置中使用表达式，我简单的记录了下，实际使用需要参照官方文档，它包含了以下。\n\n### 变量\n支持`boolean`，`null`，`number`，`string` 类型。如下：\n\n```yaml\nenv:\n  myNull: ${{ null }}\n  myBoolean: ${{ false }}\n  myIntegerNumber: ${{ 711 }}\n  myString: Mona the Octocat\n  myStringInBraces: ${{ 'It''s open source!' }}\n```\n\n### 操作符\n\n一些如值比较、逻辑与、逻辑或的操作，不一一列举了。\n\n注意不是强类型的比较，有一些值转换的逻辑。\n\n### 内置方法\n\n提供了一些内置方法辅助表达式，比如 `contains` 判断是否包含某个字符，不一一列举了。\n\n### 状态处理\n\nJobs的每个步骤会按顺序执行，我们可以在某个步骤中加入对“已经执行的步骤”的状态判断，来决定是否要执行当前步骤。比如，只有青椒清洗步骤成功了，才执行青椒切丝步骤。举例：\n\n```yaml\nsteps:\n  ...\n  # 前面的步骤都执行成功了，再执行该步骤\n  - name: The job has succeeded\n    if: ${{ success() }}\n```\n\n它还有以下几种状态结果：\n\n* **always**，只要执行了\n* **success**，执行成功了\n* **cancelled**，执行取消了\n* **failure**，执行失败了\n\n## 上下文（重要）\n\n上下文指工作流运行中可以访问的属性，你可以在**表达式中**访问上下文，比如访问当前仓库的地址`github.repositoryUrl`。它是**job串起来的重要保障**。\n\n它提供了一组模块的上下文：github、env、job、steps、runner、needs等等。\n\n如下演示了一个简单的上下文访问：\n\n```yaml\nname: CI\non: push\njobs:\n  prod-check:\n    if: ${{ github.ref == 'refs/heads/main' }}\n    runs-on: ubuntu-latest\n    steps:\n      - run: echo \"hello ${{ github.actor }}, branch is $GITHUB_REF\"\n```\n\n重要点：\n\n* 在不同的节点，上下文的可访问性有所不同，文档贴出了表格，这在使用的时候要注意。\n* env由内往外覆盖\n\n## 环境变量\n\n还可以在Workflows、Jobs、Steps中设置和访问环境变量。\n\n```yaml\nname: lint\non: [push]\nenv:\n    YOUR_NAME: wang\njobs:\n    eslint:\n        runs-on: ubuntu-latest\n        env:\n            YOUR_SEX: boy\n        steps:\n            - name: test\n              env:\n                  YOUR_AGE: 18\n              run: echo \"Hello, ${{ env.YOUR_NAME }}, your sex is $YOUR_SEX, your age is $YOUR_AGE\"\n```\n\n也提供一系列系统环境变量供访问，注意避开同名。\n\n## 收费和限制\n\n略\n\n\n\n\n","source":"_posts/github-actions-learn.md","raw":"---\ntitle: \"2. GitHub Actions - Learn GitHub Actions\"\ndate: \"2023-07-06T06:29:53Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-learn\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/6](https://github.com/taoliujun/blog/issues/6)\n\n<!--hexo\n---\nurl: github-actions-learn\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions\n\n官方文档有点长，阅读了两天，容易让人阅读瞌睡，除了要熟知术语部分，其他部分看一遍知道有这些东西就行了，回头使用的时候翻看官方文档即可。\n\n## 理解GitHub Actions和术语\n\nGitHub Actions就是通过事件触发工作流，在特定机器中执行一连串工作，每个工作中执行若干个步骤的脚本。\n\n使用人类行为来举例，我说：“老婆，你去炒个青椒炒肉丝吧。”\n\n* 口头说话（Events）会触发老婆的工作流（Workflows）：炒青椒肉丝。\n* 工作流包含了两个工作（Jobs）：配菜、炒菜。\n* 配菜工作包含多个步骤（Steps）：清洗青椒、切青椒丝、清洗猪肉、切猪肉丝。\n* 老婆有一个绞肉机（Actions），它可以完成切猪肉丝的工作而不需要关注细节。\n\n它包含了下面几个重要的术语。\n\n### Workflows（工作流）\n\n项目有若干个工作流，它们在不同的事件时机触发。比如，口头说话触发炒青椒肉丝。\n\n工作流还可以互相引用。比如，做一顿晚饭工作流，包含了炒青椒肉丝工作流。\n\n### Events（事件）\n\nGithub提供了一系列触发工作流的事件，比如发起了pull request，create issue，push commit。\n\n它还包括两种特殊的事件：\n\n* 手动触发，比如你想执行工作流看看全量eslint检测结果。\n* 计划任务，比如你想每月30号看看全量eslint检测结果。\n\n### Jobs（工作）\n\nWorkflows由多个Jobs组成。\n\n每个Job运行在**同一机器上**，执行很多步骤的脚本，脚本可以是自定义的shell（比如自己切肉丝，要关注细节：使用什么刀，每个肉丝有多细），也可以是封装好的Actions（比如绞肉机）。\n\n**步骤按顺序执行**，可以共享数据，比如切青椒的步骤，可以读取到青椒清洗的农药残留数据。\n\n**工作还可以依赖**，默认情况下，工作并行执行，但有些场景工作是依赖的，比如炒菜工作，要依赖于配菜工作的完成。\n\n### Actions（脚本动作封装）\n\n顾名思义，就是将通用的动作封装起来，方便整个宇宙的程序员去使用。比如绞肉机就是将切肉丝的动作封装了起来。\n\n可以在Github Marketplace中找到和分享Actions.\n\n### Runners（运行的机器）\n\n工作流不能凭空执行，它也是运行在机器上的，它可以是虚拟机、docker容器。Github提供了 Ubuntu Linux、Microsoft Windows、MacOS这几种机器来执行工作流，注意一个限制：**一个机器同时只能执行一个Job**。\n\n如果官方的机器不能满足你，也可以自动自己的机器来跑工作流，后续会讲到。\n\n## 使用Actions\n\n上面说到Actions是脚本的封装，它可以是社区市场中的Actions，也可以是自定义Actions，甚至是一个Docker镜像。\n\n### Marketplace方式\n\nGithub提供了界面操作，让我们可以方便的在工作流中维护Actions，只要我们在浏览器中编辑yml文件，右侧就出现了Actions市场，可以点开某个Actions，查看它的详细配置。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281126235.png)\n​\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127958.png)\n\n对照着Actions的文档，我在Workflow中插入node。现在，我的配置文件长这样：\n\n```yaml\nname: lint\non: [push]\njobs:\n    eslint:\n        runs-on: ubuntu-latest\n        steps:\n            - name: Check out repository code\n              uses: actions/checkout@v3\n            - name: use node\n              uses: actions/setup-node@v3.3.0\n              with:\n                  node-version: latest\n            - run: node -v\n```\n\n然后，查看执行结果。\n​\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127692.png)\n\n### 自己的Actions\n\n还可以在自己的仓库里添加Actions，这里就贴官方原例子了。\n\n```shell\n|-- root (repository)\n|   |__ .github\n|       └── workflows\n|           └── my-first-workflow.yml\n|       └── actions\n|           |__ hello-world-action\n|               └── action.yml\n```\n\nExample workflow file:\n\n```yaml\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      # This step checks out a copy of your repository.\n      - uses: actions/checkout@v3\n      # This step references the directory that contains the action.\n      - uses: ./.github/actions/hello-world-action\n```\n\n### 公共的Actions\n\n```yaml\nuses: actions/setup-node@v3\n```\n\n使用其他Github仓库的Actions就是如此简单，我们常使用的actions/***，其实也属于公共仓库，它们是由官方维护的一组Actions，比较稳定。点击此处可以看到官方的Actions。\n\n### Docker镜像\n\n如果Runners和开源Actions都不能满足你，可以搞docker来执行Workflows。\n\n因本人的docker水平属于“哇，我能启动docker，我真厉害”，就不展开讲了。\n\n### 不同版本的Actions\n\nActions本质上是仓库里的文件，它会有版本区分，我们有好几种方法使用它：\n\n```yaml\n# 使用tag\nuses: actions/javascript-action@v1.0.1\n# 使用commitID\nuses: actions/javascript-action@172239021f7ba04fe7327647b213799853a9eb89\n# 使用branch\nuses: actions/javascript-action@main\n```\n\n## 基本特性\n\n这部分文档看的云里雾里的，讲了一些如何使用变量，如何在Jobs里共享数据，不知道这些内容出现在这里的目的是什么，略过。\n\n## 表达式\n\n支持在配置中使用表达式，我简单的记录了下，实际使用需要参照官方文档，它包含了以下。\n\n### 变量\n支持`boolean`，`null`，`number`，`string` 类型。如下：\n\n```yaml\nenv:\n  myNull: ${{ null }}\n  myBoolean: ${{ false }}\n  myIntegerNumber: ${{ 711 }}\n  myString: Mona the Octocat\n  myStringInBraces: ${{ 'It''s open source!' }}\n```\n\n### 操作符\n\n一些如值比较、逻辑与、逻辑或的操作，不一一列举了。\n\n注意不是强类型的比较，有一些值转换的逻辑。\n\n### 内置方法\n\n提供了一些内置方法辅助表达式，比如 `contains` 判断是否包含某个字符，不一一列举了。\n\n### 状态处理\n\nJobs的每个步骤会按顺序执行，我们可以在某个步骤中加入对“已经执行的步骤”的状态判断，来决定是否要执行当前步骤。比如，只有青椒清洗步骤成功了，才执行青椒切丝步骤。举例：\n\n```yaml\nsteps:\n  ...\n  # 前面的步骤都执行成功了，再执行该步骤\n  - name: The job has succeeded\n    if: ${{ success() }}\n```\n\n它还有以下几种状态结果：\n\n* **always**，只要执行了\n* **success**，执行成功了\n* **cancelled**，执行取消了\n* **failure**，执行失败了\n\n## 上下文（重要）\n\n上下文指工作流运行中可以访问的属性，你可以在**表达式中**访问上下文，比如访问当前仓库的地址`github.repositoryUrl`。它是**job串起来的重要保障**。\n\n它提供了一组模块的上下文：github、env、job、steps、runner、needs等等。\n\n如下演示了一个简单的上下文访问：\n\n```yaml\nname: CI\non: push\njobs:\n  prod-check:\n    if: ${{ github.ref == 'refs/heads/main' }}\n    runs-on: ubuntu-latest\n    steps:\n      - run: echo \"hello ${{ github.actor }}, branch is $GITHUB_REF\"\n```\n\n重要点：\n\n* 在不同的节点，上下文的可访问性有所不同，文档贴出了表格，这在使用的时候要注意。\n* env由内往外覆盖\n\n## 环境变量\n\n还可以在Workflows、Jobs、Steps中设置和访问环境变量。\n\n```yaml\nname: lint\non: [push]\nenv:\n    YOUR_NAME: wang\njobs:\n    eslint:\n        runs-on: ubuntu-latest\n        env:\n            YOUR_SEX: boy\n        steps:\n            - name: test\n              env:\n                  YOUR_AGE: 18\n              run: echo \"Hello, ${{ env.YOUR_NAME }}, your sex is $YOUR_SEX, your age is $YOUR_AGE\"\n```\n\n也提供一系列系统环境变量供访问，注意避开同名。\n\n## 收费和限制\n\n略\n\n\n\n\n","slug":"github-actions-learn","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne6z000ui8ohc8en5vzx","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/6\">https://github.com/taoliujun/blog/issues/6</a></p>\n<!--hexo\n---\nurl: github-actions-learn\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions\">https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions</a></p>\n<p>官方文档有点长，阅读了两天，容易让人阅读瞌睡，除了要熟知术语部分，其他部分看一遍知道有这些东西就行了，回头使用的时候翻看官方文档即可。</p>\n<h2 id=\"理解GitHub-Actions和术语\"><a href=\"#理解GitHub-Actions和术语\" class=\"headerlink\" title=\"理解GitHub Actions和术语\"></a>理解GitHub Actions和术语</h2><p>GitHub Actions就是通过事件触发工作流，在特定机器中执行一连串工作，每个工作中执行若干个步骤的脚本。</p>\n<p>使用人类行为来举例，我说：“老婆，你去炒个青椒炒肉丝吧。”</p>\n<ul>\n<li>口头说话（Events）会触发老婆的工作流（Workflows）：炒青椒肉丝。</li>\n<li>工作流包含了两个工作（Jobs）：配菜、炒菜。</li>\n<li>配菜工作包含多个步骤（Steps）：清洗青椒、切青椒丝、清洗猪肉、切猪肉丝。</li>\n<li>老婆有一个绞肉机（Actions），它可以完成切猪肉丝的工作而不需要关注细节。</li>\n</ul>\n<p>它包含了下面几个重要的术语。</p>\n<h3 id=\"Workflows（工作流）\"><a href=\"#Workflows（工作流）\" class=\"headerlink\" title=\"Workflows（工作流）\"></a>Workflows（工作流）</h3><p>项目有若干个工作流，它们在不同的事件时机触发。比如，口头说话触发炒青椒肉丝。</p>\n<p>工作流还可以互相引用。比如，做一顿晚饭工作流，包含了炒青椒肉丝工作流。</p>\n<h3 id=\"Events（事件）\"><a href=\"#Events（事件）\" class=\"headerlink\" title=\"Events（事件）\"></a>Events（事件）</h3><p>Github提供了一系列触发工作流的事件，比如发起了pull request，create issue，push commit。</p>\n<p>它还包括两种特殊的事件：</p>\n<ul>\n<li>手动触发，比如你想执行工作流看看全量eslint检测结果。</li>\n<li>计划任务，比如你想每月30号看看全量eslint检测结果。</li>\n</ul>\n<h3 id=\"Jobs（工作）\"><a href=\"#Jobs（工作）\" class=\"headerlink\" title=\"Jobs（工作）\"></a>Jobs（工作）</h3><p>Workflows由多个Jobs组成。</p>\n<p>每个Job运行在<strong>同一机器上</strong>，执行很多步骤的脚本，脚本可以是自定义的shell（比如自己切肉丝，要关注细节：使用什么刀，每个肉丝有多细），也可以是封装好的Actions（比如绞肉机）。</p>\n<p><strong>步骤按顺序执行</strong>，可以共享数据，比如切青椒的步骤，可以读取到青椒清洗的农药残留数据。</p>\n<p><strong>工作还可以依赖</strong>，默认情况下，工作并行执行，但有些场景工作是依赖的，比如炒菜工作，要依赖于配菜工作的完成。</p>\n<h3 id=\"Actions（脚本动作封装）\"><a href=\"#Actions（脚本动作封装）\" class=\"headerlink\" title=\"Actions（脚本动作封装）\"></a>Actions（脚本动作封装）</h3><p>顾名思义，就是将通用的动作封装起来，方便整个宇宙的程序员去使用。比如绞肉机就是将切肉丝的动作封装了起来。</p>\n<p>可以在Github Marketplace中找到和分享Actions.</p>\n<h3 id=\"Runners（运行的机器）\"><a href=\"#Runners（运行的机器）\" class=\"headerlink\" title=\"Runners（运行的机器）\"></a>Runners（运行的机器）</h3><p>工作流不能凭空执行，它也是运行在机器上的，它可以是虚拟机、docker容器。Github提供了 Ubuntu Linux、Microsoft Windows、MacOS这几种机器来执行工作流，注意一个限制：<strong>一个机器同时只能执行一个Job</strong>。</p>\n<p>如果官方的机器不能满足你，也可以自动自己的机器来跑工作流，后续会讲到。</p>\n<h2 id=\"使用Actions\"><a href=\"#使用Actions\" class=\"headerlink\" title=\"使用Actions\"></a>使用Actions</h2><p>上面说到Actions是脚本的封装，它可以是社区市场中的Actions，也可以是自定义Actions，甚至是一个Docker镜像。</p>\n<h3 id=\"Marketplace方式\"><a href=\"#Marketplace方式\" class=\"headerlink\" title=\"Marketplace方式\"></a>Marketplace方式</h3><p>Github提供了界面操作，让我们可以方便的在工作流中维护Actions，只要我们在浏览器中编辑yml文件，右侧就出现了Actions市场，可以点开某个Actions，查看它的详细配置。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281126235.png\"><br>​<br><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127958.png\"></p>\n<p>对照着Actions的文档，我在Workflow中插入node。现在，我的配置文件长这样：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><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=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Check</span> <span class=\"string\">out</span> <span class=\"string\">repository</span> <span class=\"string\">code</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">use</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3.3.0</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"string\">latest</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">node</span> <span class=\"string\">-v</span></span><br></pre></td></tr></table></figure>\n\n<p>然后，查看执行结果。<br>​<br><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127692.png\"></p>\n<h3 id=\"自己的Actions\"><a href=\"#自己的Actions\" class=\"headerlink\" title=\"自己的Actions\"></a>自己的Actions</h3><p>还可以在自己的仓库里添加Actions，这里就贴官方原例子了。</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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\">|-- root (repository)</span><br><span class=\"line\">|   |__ .github</span><br><span class=\"line\">|       └── workflows</span><br><span class=\"line\">|           └── my-first-workflow.yml</span><br><span class=\"line\">|       └── actions</span><br><span class=\"line\">|           |__ hello-world-action</span><br><span class=\"line\">|               └── action.yml</span><br></pre></td></tr></table></figure>\n\n<p>Example workflow file:</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">build:</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"comment\"># This step checks out a copy of your repository.</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">      <span class=\"comment\"># This step references the directory that contains the action.</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">./.github/actions/hello-world-action</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"公共的Actions\"><a href=\"#公共的Actions\" class=\"headerlink\" title=\"公共的Actions\"></a>公共的Actions</h3><figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3</span></span><br></pre></td></tr></table></figure>\n\n<p>使用其他Github仓库的Actions就是如此简单，我们常使用的actions&#x2F;***，其实也属于公共仓库，它们是由官方维护的一组Actions，比较稳定。点击此处可以看到官方的Actions。</p>\n<h3 id=\"Docker镜像\"><a href=\"#Docker镜像\" class=\"headerlink\" title=\"Docker镜像\"></a>Docker镜像</h3><p>如果Runners和开源Actions都不能满足你，可以搞docker来执行Workflows。</p>\n<p>因本人的docker水平属于“哇，我能启动docker，我真厉害”，就不展开讲了。</p>\n<h3 id=\"不同版本的Actions\"><a href=\"#不同版本的Actions\" class=\"headerlink\" title=\"不同版本的Actions\"></a>不同版本的Actions</h3><p>Actions本质上是仓库里的文件，它会有版本区分，我们有好几种方法使用它：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\"># 使用tag</span></span><br><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/javascript-action@v1.0.1</span></span><br><span class=\"line\"><span class=\"comment\"># 使用commitID</span></span><br><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/javascript-action@172239021f7ba04fe7327647b213799853a9eb89</span></span><br><span class=\"line\"><span class=\"comment\"># 使用branch</span></span><br><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/javascript-action@main</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"基本特性\"><a href=\"#基本特性\" class=\"headerlink\" title=\"基本特性\"></a>基本特性</h2><p>这部分文档看的云里雾里的，讲了一些如何使用变量，如何在Jobs里共享数据，不知道这些内容出现在这里的目的是什么，略过。</p>\n<h2 id=\"表达式\"><a href=\"#表达式\" class=\"headerlink\" title=\"表达式\"></a>表达式</h2><p>支持在配置中使用表达式，我简单的记录了下，实际使用需要参照官方文档，它包含了以下。</p>\n<h3 id=\"变量\"><a href=\"#变量\" class=\"headerlink\" title=\"变量\"></a>变量</h3><p>支持<code>boolean</code>，<code>null</code>，<code>number</code>，<code>string</code> 类型。如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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=\"attr\">env:</span></span><br><span class=\"line\">  <span class=\"attr\">myNull:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"literal\">null</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">  <span class=\"attr\">myBoolean:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"literal\">false</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">  <span class=\"attr\">myIntegerNumber:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"number\">711</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">  <span class=\"attr\">myString:</span> <span class=\"string\">Mona</span> <span class=\"string\">the</span> <span class=\"string\">Octocat</span></span><br><span class=\"line\">  <span class=\"attr\">myStringInBraces:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">&#x27;It&#x27;</span><span class=\"string\">&#x27;s open source!&#x27;</span> <span class=\"string\">&#125;&#125;</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"操作符\"><a href=\"#操作符\" class=\"headerlink\" title=\"操作符\"></a>操作符</h3><p>一些如值比较、逻辑与、逻辑或的操作，不一一列举了。</p>\n<p>注意不是强类型的比较，有一些值转换的逻辑。</p>\n<h3 id=\"内置方法\"><a href=\"#内置方法\" class=\"headerlink\" title=\"内置方法\"></a>内置方法</h3><p>提供了一些内置方法辅助表达式，比如 <code>contains</code> 判断是否包含某个字符，不一一列举了。</p>\n<h3 id=\"状态处理\"><a href=\"#状态处理\" class=\"headerlink\" title=\"状态处理\"></a>状态处理</h3><p>Jobs的每个步骤会按顺序执行，我们可以在某个步骤中加入对“已经执行的步骤”的状态判断，来决定是否要执行当前步骤。比如，只有青椒清洗步骤成功了，才执行青椒切丝步骤。举例：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"attr\">steps:</span></span><br><span class=\"line\">  <span class=\"string\">...</span></span><br><span class=\"line\">  <span class=\"comment\"># 前面的步骤都执行成功了，再执行该步骤</span></span><br><span class=\"line\">  <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">The</span> <span class=\"string\">job</span> <span class=\"string\">has</span> <span class=\"string\">succeeded</span></span><br><span class=\"line\">    <span class=\"attr\">if:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">success()</span> <span class=\"string\">&#125;&#125;</span></span><br></pre></td></tr></table></figure>\n\n<p>它还有以下几种状态结果：</p>\n<ul>\n<li><strong>always</strong>，只要执行了</li>\n<li><strong>success</strong>，执行成功了</li>\n<li><strong>cancelled</strong>，执行取消了</li>\n<li><strong>failure</strong>，执行失败了</li>\n</ul>\n<h2 id=\"上下文（重要）\"><a href=\"#上下文（重要）\" class=\"headerlink\" title=\"上下文（重要）\"></a>上下文（重要）</h2><p>上下文指工作流运行中可以访问的属性，你可以在<strong>表达式中</strong>访问上下文，比如访问当前仓库的地址<code>github.repositoryUrl</code>。它是<strong>job串起来的重要保障</strong>。</p>\n<p>它提供了一组模块的上下文：github、env、job、steps、runner、needs等等。</p>\n<p>如下演示了一个简单的上下文访问：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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=\"attr\">name:</span> <span class=\"string\">CI</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> <span class=\"string\">push</span></span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">prod-check:</span></span><br><span class=\"line\">    <span class=\"attr\">if:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.ref</span> <span class=\"string\">==</span> <span class=\"string\">&#x27;refs/heads/main&#x27;</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;hello $<span class=\"template-variable\">&#123;&#123; github.actor &#125;&#125;</span>, branch is $GITHUB_REF&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>重要点：</p>\n<ul>\n<li>在不同的节点，上下文的可访问性有所不同，文档贴出了表格，这在使用的时候要注意。</li>\n<li>env由内往外覆盖</li>\n</ul>\n<h2 id=\"环境变量\"><a href=\"#环境变量\" class=\"headerlink\" title=\"环境变量\"></a>环境变量</h2><p>还可以在Workflows、Jobs、Steps中设置和访问环境变量。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">env:</span></span><br><span class=\"line\">    <span class=\"attr\">YOUR_NAME:</span> <span class=\"string\">wang</span></span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">env:</span></span><br><span class=\"line\">            <span class=\"attr\">YOUR_SEX:</span> <span class=\"string\">boy</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">test</span></span><br><span class=\"line\">              <span class=\"attr\">env:</span></span><br><span class=\"line\">                  <span class=\"attr\">YOUR_AGE:</span> <span class=\"number\">18</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;Hello, $<span class=\"template-variable\">&#123;&#123; env.YOUR_NAME &#125;&#125;</span>, your sex is $YOUR_SEX, your age is $YOUR_AGE&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>也提供一系列系统环境变量供访问，注意避开同名。</p>\n<h2 id=\"收费和限制\"><a href=\"#收费和限制\" class=\"headerlink\" title=\"收费和限制\"></a>收费和限制</h2><p>略</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/6\">https://github.com/taoliujun/blog/issues/6</a></p>\n<!--hexo\n---\nurl: github-actions-learn\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions\">https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions</a></p>\n<p>官方文档有点长，阅读了两天，容易让人阅读瞌睡，除了要熟知术语部分，其他部分看一遍知道有这些东西就行了，回头使用的时候翻看官方文档即可。</p>\n<h2 id=\"理解GitHub-Actions和术语\"><a href=\"#理解GitHub-Actions和术语\" class=\"headerlink\" title=\"理解GitHub Actions和术语\"></a>理解GitHub Actions和术语</h2><p>GitHub Actions就是通过事件触发工作流，在特定机器中执行一连串工作，每个工作中执行若干个步骤的脚本。</p>\n<p>使用人类行为来举例，我说：“老婆，你去炒个青椒炒肉丝吧。”</p>\n<ul>\n<li>口头说话（Events）会触发老婆的工作流（Workflows）：炒青椒肉丝。</li>\n<li>工作流包含了两个工作（Jobs）：配菜、炒菜。</li>\n<li>配菜工作包含多个步骤（Steps）：清洗青椒、切青椒丝、清洗猪肉、切猪肉丝。</li>\n<li>老婆有一个绞肉机（Actions），它可以完成切猪肉丝的工作而不需要关注细节。</li>\n</ul>\n<p>它包含了下面几个重要的术语。</p>\n<h3 id=\"Workflows（工作流）\"><a href=\"#Workflows（工作流）\" class=\"headerlink\" title=\"Workflows（工作流）\"></a>Workflows（工作流）</h3><p>项目有若干个工作流，它们在不同的事件时机触发。比如，口头说话触发炒青椒肉丝。</p>\n<p>工作流还可以互相引用。比如，做一顿晚饭工作流，包含了炒青椒肉丝工作流。</p>\n<h3 id=\"Events（事件）\"><a href=\"#Events（事件）\" class=\"headerlink\" title=\"Events（事件）\"></a>Events（事件）</h3><p>Github提供了一系列触发工作流的事件，比如发起了pull request，create issue，push commit。</p>\n<p>它还包括两种特殊的事件：</p>\n<ul>\n<li>手动触发，比如你想执行工作流看看全量eslint检测结果。</li>\n<li>计划任务，比如你想每月30号看看全量eslint检测结果。</li>\n</ul>\n<h3 id=\"Jobs（工作）\"><a href=\"#Jobs（工作）\" class=\"headerlink\" title=\"Jobs（工作）\"></a>Jobs（工作）</h3><p>Workflows由多个Jobs组成。</p>\n<p>每个Job运行在<strong>同一机器上</strong>，执行很多步骤的脚本，脚本可以是自定义的shell（比如自己切肉丝，要关注细节：使用什么刀，每个肉丝有多细），也可以是封装好的Actions（比如绞肉机）。</p>\n<p><strong>步骤按顺序执行</strong>，可以共享数据，比如切青椒的步骤，可以读取到青椒清洗的农药残留数据。</p>\n<p><strong>工作还可以依赖</strong>，默认情况下，工作并行执行，但有些场景工作是依赖的，比如炒菜工作，要依赖于配菜工作的完成。</p>\n<h3 id=\"Actions（脚本动作封装）\"><a href=\"#Actions（脚本动作封装）\" class=\"headerlink\" title=\"Actions（脚本动作封装）\"></a>Actions（脚本动作封装）</h3><p>顾名思义，就是将通用的动作封装起来，方便整个宇宙的程序员去使用。比如绞肉机就是将切肉丝的动作封装了起来。</p>\n<p>可以在Github Marketplace中找到和分享Actions.</p>\n<h3 id=\"Runners（运行的机器）\"><a href=\"#Runners（运行的机器）\" class=\"headerlink\" title=\"Runners（运行的机器）\"></a>Runners（运行的机器）</h3><p>工作流不能凭空执行，它也是运行在机器上的，它可以是虚拟机、docker容器。Github提供了 Ubuntu Linux、Microsoft Windows、MacOS这几种机器来执行工作流，注意一个限制：<strong>一个机器同时只能执行一个Job</strong>。</p>\n<p>如果官方的机器不能满足你，也可以自动自己的机器来跑工作流，后续会讲到。</p>\n<h2 id=\"使用Actions\"><a href=\"#使用Actions\" class=\"headerlink\" title=\"使用Actions\"></a>使用Actions</h2><p>上面说到Actions是脚本的封装，它可以是社区市场中的Actions，也可以是自定义Actions，甚至是一个Docker镜像。</p>\n<h3 id=\"Marketplace方式\"><a href=\"#Marketplace方式\" class=\"headerlink\" title=\"Marketplace方式\"></a>Marketplace方式</h3><p>Github提供了界面操作，让我们可以方便的在工作流中维护Actions，只要我们在浏览器中编辑yml文件，右侧就出现了Actions市场，可以点开某个Actions，查看它的详细配置。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281126235.png\"><br>​<br><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127958.png\"></p>\n<p>对照着Actions的文档，我在Workflow中插入node。现在，我的配置文件长这样：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><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=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Check</span> <span class=\"string\">out</span> <span class=\"string\">repository</span> <span class=\"string\">code</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">use</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3.3.0</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"string\">latest</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">node</span> <span class=\"string\">-v</span></span><br></pre></td></tr></table></figure>\n\n<p>然后，查看执行结果。<br>​<br><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281127692.png\"></p>\n<h3 id=\"自己的Actions\"><a href=\"#自己的Actions\" class=\"headerlink\" title=\"自己的Actions\"></a>自己的Actions</h3><p>还可以在自己的仓库里添加Actions，这里就贴官方原例子了。</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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\">|-- root (repository)</span><br><span class=\"line\">|   |__ .github</span><br><span class=\"line\">|       └── workflows</span><br><span class=\"line\">|           └── my-first-workflow.yml</span><br><span class=\"line\">|       └── actions</span><br><span class=\"line\">|           |__ hello-world-action</span><br><span class=\"line\">|               └── action.yml</span><br></pre></td></tr></table></figure>\n\n<p>Example workflow file:</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">build:</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"comment\"># This step checks out a copy of your repository.</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">      <span class=\"comment\"># This step references the directory that contains the action.</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">uses:</span> <span class=\"string\">./.github/actions/hello-world-action</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"公共的Actions\"><a href=\"#公共的Actions\" class=\"headerlink\" title=\"公共的Actions\"></a>公共的Actions</h3><figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v3</span></span><br></pre></td></tr></table></figure>\n\n<p>使用其他Github仓库的Actions就是如此简单，我们常使用的actions&#x2F;***，其实也属于公共仓库，它们是由官方维护的一组Actions，比较稳定。点击此处可以看到官方的Actions。</p>\n<h3 id=\"Docker镜像\"><a href=\"#Docker镜像\" class=\"headerlink\" title=\"Docker镜像\"></a>Docker镜像</h3><p>如果Runners和开源Actions都不能满足你，可以搞docker来执行Workflows。</p>\n<p>因本人的docker水平属于“哇，我能启动docker，我真厉害”，就不展开讲了。</p>\n<h3 id=\"不同版本的Actions\"><a href=\"#不同版本的Actions\" class=\"headerlink\" title=\"不同版本的Actions\"></a>不同版本的Actions</h3><p>Actions本质上是仓库里的文件，它会有版本区分，我们有好几种方法使用它：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\"># 使用tag</span></span><br><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/javascript-action@v1.0.1</span></span><br><span class=\"line\"><span class=\"comment\"># 使用commitID</span></span><br><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/javascript-action@172239021f7ba04fe7327647b213799853a9eb89</span></span><br><span class=\"line\"><span class=\"comment\"># 使用branch</span></span><br><span class=\"line\"><span class=\"attr\">uses:</span> <span class=\"string\">actions/javascript-action@main</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"基本特性\"><a href=\"#基本特性\" class=\"headerlink\" title=\"基本特性\"></a>基本特性</h2><p>这部分文档看的云里雾里的，讲了一些如何使用变量，如何在Jobs里共享数据，不知道这些内容出现在这里的目的是什么，略过。</p>\n<h2 id=\"表达式\"><a href=\"#表达式\" class=\"headerlink\" title=\"表达式\"></a>表达式</h2><p>支持在配置中使用表达式，我简单的记录了下，实际使用需要参照官方文档，它包含了以下。</p>\n<h3 id=\"变量\"><a href=\"#变量\" class=\"headerlink\" title=\"变量\"></a>变量</h3><p>支持<code>boolean</code>，<code>null</code>，<code>number</code>，<code>string</code> 类型。如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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=\"attr\">env:</span></span><br><span class=\"line\">  <span class=\"attr\">myNull:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"literal\">null</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">  <span class=\"attr\">myBoolean:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"literal\">false</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">  <span class=\"attr\">myIntegerNumber:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"number\">711</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">  <span class=\"attr\">myString:</span> <span class=\"string\">Mona</span> <span class=\"string\">the</span> <span class=\"string\">Octocat</span></span><br><span class=\"line\">  <span class=\"attr\">myStringInBraces:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">&#x27;It&#x27;</span><span class=\"string\">&#x27;s open source!&#x27;</span> <span class=\"string\">&#125;&#125;</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"操作符\"><a href=\"#操作符\" class=\"headerlink\" title=\"操作符\"></a>操作符</h3><p>一些如值比较、逻辑与、逻辑或的操作，不一一列举了。</p>\n<p>注意不是强类型的比较，有一些值转换的逻辑。</p>\n<h3 id=\"内置方法\"><a href=\"#内置方法\" class=\"headerlink\" title=\"内置方法\"></a>内置方法</h3><p>提供了一些内置方法辅助表达式，比如 <code>contains</code> 判断是否包含某个字符，不一一列举了。</p>\n<h3 id=\"状态处理\"><a href=\"#状态处理\" class=\"headerlink\" title=\"状态处理\"></a>状态处理</h3><p>Jobs的每个步骤会按顺序执行，我们可以在某个步骤中加入对“已经执行的步骤”的状态判断，来决定是否要执行当前步骤。比如，只有青椒清洗步骤成功了，才执行青椒切丝步骤。举例：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"attr\">steps:</span></span><br><span class=\"line\">  <span class=\"string\">...</span></span><br><span class=\"line\">  <span class=\"comment\"># 前面的步骤都执行成功了，再执行该步骤</span></span><br><span class=\"line\">  <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">The</span> <span class=\"string\">job</span> <span class=\"string\">has</span> <span class=\"string\">succeeded</span></span><br><span class=\"line\">    <span class=\"attr\">if:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">success()</span> <span class=\"string\">&#125;&#125;</span></span><br></pre></td></tr></table></figure>\n\n<p>它还有以下几种状态结果：</p>\n<ul>\n<li><strong>always</strong>，只要执行了</li>\n<li><strong>success</strong>，执行成功了</li>\n<li><strong>cancelled</strong>，执行取消了</li>\n<li><strong>failure</strong>，执行失败了</li>\n</ul>\n<h2 id=\"上下文（重要）\"><a href=\"#上下文（重要）\" class=\"headerlink\" title=\"上下文（重要）\"></a>上下文（重要）</h2><p>上下文指工作流运行中可以访问的属性，你可以在<strong>表达式中</strong>访问上下文，比如访问当前仓库的地址<code>github.repositoryUrl</code>。它是<strong>job串起来的重要保障</strong>。</p>\n<p>它提供了一组模块的上下文：github、env、job、steps、runner、needs等等。</p>\n<p>如下演示了一个简单的上下文访问：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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=\"attr\">name:</span> <span class=\"string\">CI</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> <span class=\"string\">push</span></span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">  <span class=\"attr\">prod-check:</span></span><br><span class=\"line\">    <span class=\"attr\">if:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.ref</span> <span class=\"string\">==</span> <span class=\"string\">&#x27;refs/heads/main&#x27;</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;hello $<span class=\"template-variable\">&#123;&#123; github.actor &#125;&#125;</span>, branch is $GITHUB_REF&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>重要点：</p>\n<ul>\n<li>在不同的节点，上下文的可访问性有所不同，文档贴出了表格，这在使用的时候要注意。</li>\n<li>env由内往外覆盖</li>\n</ul>\n<h2 id=\"环境变量\"><a href=\"#环境变量\" class=\"headerlink\" title=\"环境变量\"></a>环境变量</h2><p>还可以在Workflows、Jobs、Steps中设置和访问环境变量。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">env:</span></span><br><span class=\"line\">    <span class=\"attr\">YOUR_NAME:</span> <span class=\"string\">wang</span></span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">env:</span></span><br><span class=\"line\">            <span class=\"attr\">YOUR_SEX:</span> <span class=\"string\">boy</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">test</span></span><br><span class=\"line\">              <span class=\"attr\">env:</span></span><br><span class=\"line\">                  <span class=\"attr\">YOUR_AGE:</span> <span class=\"number\">18</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;Hello, $<span class=\"template-variable\">&#123;&#123; env.YOUR_NAME &#125;&#125;</span>, your sex is $YOUR_SEX, your age is $YOUR_AGE&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>也提供一系列系统环境变量供访问，注意避开同名。</p>\n<h2 id=\"收费和限制\"><a href=\"#收费和限制\" class=\"headerlink\" title=\"收费和限制\"></a>收费和限制</h2><p>略</p>\n"},{"title":"1. GitHub Actions - Quickstart","date":"2023-07-05T22:29:06.000Z","url":"github-actions-quickstart","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/5](https://github.com/taoliujun/blog/issues/5)\n\n<!--hexo\n---\nurl: github-actions-quickstart\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/quickstart\n\n本文里，因为还没有讲术语的意思，所以用中文描述了基本的执行过程，后续的文章里会用原术语来表达，以防理解不一。\n\n文档说，只要有仓库，就可以使用Actions。\n\n依葫芦画瓢，在本地创建 `.github/workflows` 目录，在目录里创建任意文件，以.yml结尾，我创建了 `lint.yml`：\n\n```yaml\nname: lint\non: [push]\njobs:\n    eslint:\n        runs-on: ubuntu-latest\n        steps:\n            - run: echo \"The job was automatically triggered by a ${{ github.event_name }} event.\"\n            - name: Check out repository code\n              uses: actions/checkout@v3\n            - name: List files in the repository\n              run: ls ${{ github.workspace }}\n            - run: echo \"  This job's status is ${{ job.status }}.\"\n```\n\n配置文件有很多术语在后面的笔记中讲解，对于上面的配置简单的解释下：\n\n```yaml\n# 这个工作流的名字: lint\nname: lint\n# 在分支push的时候触发\non: [push]\n# 工作列表，例子里只做一个eslint工作\njobs:\n    # 这一步工作名叫做eslint\n    eslint:\n        # 代码执行在ubuntu-latest的宿主里，注：ubuntu-latest是github提供的免费的宿主。\n        runs-on: ubuntu-latest\n        # 执行哪些代码\n        steps:\n            # 执行一个普通的shell脚本，就是 echo '巴拉巴拉巴拉巴拉一段话'，这段话里的${{github.event_name}}\n            # 是一个变量，这个变量由actions上下文提供，望文生义，event_name是事件名称的意思\n            - run: echo \"  The job was automatically triggered by a ${{ github.event_name }} event.\"\n            # 为这一步脚本定一个名字，叫做 巴拉巴拉\n            - name: Check out repository code\n              # 我们使用别人提供的封装好的脚本，这里的意思是使用官方提供的 actions/checkout 的脚本的v3版本\n              uses: actions/checkout@v3\n            # 又定义一个名字，叫做 巴拉巴拉\n            - name: List files in the repository\n              # 再一次运行自定义的脚本，列出目录结构，这儿又使用了一个变量\n              run: ls ${{ github.workspace }}\n            # 最后再执行一个自定义脚本，输出一段话，包含了当前工作的执行状态\n            - run: echo \"  This job's status is ${{ job.status }}.\"\n```\n\n而后，将代码推送到github仓库，我们进入仓库页面，点击 Actions 面板，看到 workflows记录，进入详情看到类似面板。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281119773.png)\n\n这个面板展示了lint.yml这个工作流的执行状态，它列出所有的工作及其状态以及执行时间。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281120264.png)\n\n进入工作流的执行详情，可以看到每个工作的每一步脚本的详细执行过程和输出结果，就不一一表述了，后续会讲到。\n\n\n\n","source":"_posts/github-actions-quickstart.md","raw":"---\ntitle: \"1. GitHub Actions - Quickstart\"\ndate: \"2023-07-06T06:29:06Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-quickstart\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/5](https://github.com/taoliujun/blog/issues/5)\n\n<!--hexo\n---\nurl: github-actions-quickstart\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/quickstart\n\n本文里，因为还没有讲术语的意思，所以用中文描述了基本的执行过程，后续的文章里会用原术语来表达，以防理解不一。\n\n文档说，只要有仓库，就可以使用Actions。\n\n依葫芦画瓢，在本地创建 `.github/workflows` 目录，在目录里创建任意文件，以.yml结尾，我创建了 `lint.yml`：\n\n```yaml\nname: lint\non: [push]\njobs:\n    eslint:\n        runs-on: ubuntu-latest\n        steps:\n            - run: echo \"The job was automatically triggered by a ${{ github.event_name }} event.\"\n            - name: Check out repository code\n              uses: actions/checkout@v3\n            - name: List files in the repository\n              run: ls ${{ github.workspace }}\n            - run: echo \"  This job's status is ${{ job.status }}.\"\n```\n\n配置文件有很多术语在后面的笔记中讲解，对于上面的配置简单的解释下：\n\n```yaml\n# 这个工作流的名字: lint\nname: lint\n# 在分支push的时候触发\non: [push]\n# 工作列表，例子里只做一个eslint工作\njobs:\n    # 这一步工作名叫做eslint\n    eslint:\n        # 代码执行在ubuntu-latest的宿主里，注：ubuntu-latest是github提供的免费的宿主。\n        runs-on: ubuntu-latest\n        # 执行哪些代码\n        steps:\n            # 执行一个普通的shell脚本，就是 echo '巴拉巴拉巴拉巴拉一段话'，这段话里的${{github.event_name}}\n            # 是一个变量，这个变量由actions上下文提供，望文生义，event_name是事件名称的意思\n            - run: echo \"  The job was automatically triggered by a ${{ github.event_name }} event.\"\n            # 为这一步脚本定一个名字，叫做 巴拉巴拉\n            - name: Check out repository code\n              # 我们使用别人提供的封装好的脚本，这里的意思是使用官方提供的 actions/checkout 的脚本的v3版本\n              uses: actions/checkout@v3\n            # 又定义一个名字，叫做 巴拉巴拉\n            - name: List files in the repository\n              # 再一次运行自定义的脚本，列出目录结构，这儿又使用了一个变量\n              run: ls ${{ github.workspace }}\n            # 最后再执行一个自定义脚本，输出一段话，包含了当前工作的执行状态\n            - run: echo \"  This job's status is ${{ job.status }}.\"\n```\n\n而后，将代码推送到github仓库，我们进入仓库页面，点击 Actions 面板，看到 workflows记录，进入详情看到类似面板。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281119773.png)\n\n这个面板展示了lint.yml这个工作流的执行状态，它列出所有的工作及其状态以及执行时间。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281120264.png)\n\n进入工作流的执行详情，可以看到每个工作的每一步脚本的详细执行过程和输出结果，就不一一表述了，后续会讲到。\n\n\n\n","slug":"github-actions-quickstart","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne70000yi8ohfpzzd528","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/5\">https://github.com/taoliujun/blog/issues/5</a></p>\n<!--hexo\n---\nurl: github-actions-quickstart\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/quickstart\">https://docs.github.com/en/actions/quickstart</a></p>\n<p>本文里，因为还没有讲术语的意思，所以用中文描述了基本的执行过程，后续的文章里会用原术语来表达，以防理解不一。</p>\n<p>文档说，只要有仓库，就可以使用Actions。</p>\n<p>依葫芦画瓢，在本地创建 <code>.github/workflows</code> 目录，在目录里创建任意文件，以.yml结尾，我创建了 <code>lint.yml</code>：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><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=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;The job was automatically triggered by a $<span class=\"template-variable\">&#123;&#123; github.event_name &#125;&#125;</span> event.&quot;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Check</span> <span class=\"string\">out</span> <span class=\"string\">repository</span> <span class=\"string\">code</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">List</span> <span class=\"string\">files</span> <span class=\"string\">in</span> <span class=\"string\">the</span> <span class=\"string\">repository</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">ls</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workspace</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;  This job&#x27;s status is $<span class=\"template-variable\">&#123;&#123; job.status &#125;&#125;</span>.&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>配置文件有很多术语在后面的笔记中讲解，对于上面的配置简单的解释下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"comment\"># 这个工作流的名字: lint</span></span><br><span class=\"line\"><span class=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"comment\"># 在分支push的时候触发</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"comment\"># 工作列表，例子里只做一个eslint工作</span></span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"comment\"># 这一步工作名叫做eslint</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"comment\"># 代码执行在ubuntu-latest的宿主里，注：ubuntu-latest是github提供的免费的宿主。</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"comment\"># 执行哪些代码</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"comment\"># 执行一个普通的shell脚本，就是 echo &#x27;巴拉巴拉巴拉巴拉一段话&#x27;，这段话里的$&#123;&#123;github.event_name&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"comment\"># 是一个变量，这个变量由actions上下文提供，望文生义，event_name是事件名称的意思</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;  The job was automatically triggered by a $<span class=\"template-variable\">&#123;&#123; github.event_name &#125;&#125;</span> event.&quot;</span></span><br><span class=\"line\">            <span class=\"comment\"># 为这一步脚本定一个名字，叫做 巴拉巴拉</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Check</span> <span class=\"string\">out</span> <span class=\"string\">repository</span> <span class=\"string\">code</span></span><br><span class=\"line\">              <span class=\"comment\"># 我们使用别人提供的封装好的脚本，这里的意思是使用官方提供的 actions/checkout 的脚本的v3版本</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">            <span class=\"comment\"># 又定义一个名字，叫做 巴拉巴拉</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">List</span> <span class=\"string\">files</span> <span class=\"string\">in</span> <span class=\"string\">the</span> <span class=\"string\">repository</span></span><br><span class=\"line\">              <span class=\"comment\"># 再一次运行自定义的脚本，列出目录结构，这儿又使用了一个变量</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">ls</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workspace</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"comment\"># 最后再执行一个自定义脚本，输出一段话，包含了当前工作的执行状态</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;  This job&#x27;s status is $<span class=\"template-variable\">&#123;&#123; job.status &#125;&#125;</span>.&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>而后，将代码推送到github仓库，我们进入仓库页面，点击 Actions 面板，看到 workflows记录，进入详情看到类似面板。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281119773.png\"></p>\n<p>这个面板展示了lint.yml这个工作流的执行状态，它列出所有的工作及其状态以及执行时间。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281120264.png\"></p>\n<p>进入工作流的执行详情，可以看到每个工作的每一步脚本的详细执行过程和输出结果，就不一一表述了，后续会讲到。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/5\">https://github.com/taoliujun/blog/issues/5</a></p>\n<!--hexo\n---\nurl: github-actions-quickstart\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/quickstart\">https://docs.github.com/en/actions/quickstart</a></p>\n<p>本文里，因为还没有讲术语的意思，所以用中文描述了基本的执行过程，后续的文章里会用原术语来表达，以防理解不一。</p>\n<p>文档说，只要有仓库，就可以使用Actions。</p>\n<p>依葫芦画瓢，在本地创建 <code>.github/workflows</code> 目录，在目录里创建任意文件，以.yml结尾，我创建了 <code>lint.yml</code>：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><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=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;The job was automatically triggered by a $<span class=\"template-variable\">&#123;&#123; github.event_name &#125;&#125;</span> event.&quot;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Check</span> <span class=\"string\">out</span> <span class=\"string\">repository</span> <span class=\"string\">code</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">List</span> <span class=\"string\">files</span> <span class=\"string\">in</span> <span class=\"string\">the</span> <span class=\"string\">repository</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">ls</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workspace</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;  This job&#x27;s status is $<span class=\"template-variable\">&#123;&#123; job.status &#125;&#125;</span>.&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>配置文件有很多术语在后面的笔记中讲解，对于上面的配置简单的解释下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"comment\"># 这个工作流的名字: lint</span></span><br><span class=\"line\"><span class=\"attr\">name:</span> <span class=\"string\">lint</span></span><br><span class=\"line\"><span class=\"comment\"># 在分支push的时候触发</span></span><br><span class=\"line\"><span class=\"attr\">on:</span> [<span class=\"string\">push</span>]</span><br><span class=\"line\"><span class=\"comment\"># 工作列表，例子里只做一个eslint工作</span></span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"comment\"># 这一步工作名叫做eslint</span></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"comment\"># 代码执行在ubuntu-latest的宿主里，注：ubuntu-latest是github提供的免费的宿主。</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"comment\"># 执行哪些代码</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"comment\"># 执行一个普通的shell脚本，就是 echo &#x27;巴拉巴拉巴拉巴拉一段话&#x27;，这段话里的$&#123;&#123;github.event_name&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"comment\"># 是一个变量，这个变量由actions上下文提供，望文生义，event_name是事件名称的意思</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;  The job was automatically triggered by a $<span class=\"template-variable\">&#123;&#123; github.event_name &#125;&#125;</span> event.&quot;</span></span><br><span class=\"line\">            <span class=\"comment\"># 为这一步脚本定一个名字，叫做 巴拉巴拉</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Check</span> <span class=\"string\">out</span> <span class=\"string\">repository</span> <span class=\"string\">code</span></span><br><span class=\"line\">              <span class=\"comment\"># 我们使用别人提供的封装好的脚本，这里的意思是使用官方提供的 actions/checkout 的脚本的v3版本</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v3</span></span><br><span class=\"line\">            <span class=\"comment\"># 又定义一个名字，叫做 巴拉巴拉</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">List</span> <span class=\"string\">files</span> <span class=\"string\">in</span> <span class=\"string\">the</span> <span class=\"string\">repository</span></span><br><span class=\"line\">              <span class=\"comment\"># 再一次运行自定义的脚本，列出目录结构，这儿又使用了一个变量</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">ls</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workspace</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"comment\"># 最后再执行一个自定义脚本，输出一段话，包含了当前工作的执行状态</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;  This job&#x27;s status is $<span class=\"template-variable\">&#123;&#123; job.status &#125;&#125;</span>.&quot;</span></span><br></pre></td></tr></table></figure>\n\n<p>而后，将代码推送到github仓库，我们进入仓库页面，点击 Actions 面板，看到 workflows记录，进入详情看到类似面板。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281119773.png\"></p>\n<p>这个面板展示了lint.yml这个工作流的执行状态，它列出所有的工作及其状态以及执行时间。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306281120264.png\"></p>\n<p>进入工作流的执行详情，可以看到每个工作的每一步脚本的详细执行过程和输出结果，就不一一表述了，后续会讲到。</p>\n"},{"title":"6. GitHub Actions - Managing workflow runs","date":"2023-07-05T22:32:01.000Z","url":"github-actions-runs","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/10](https://github.com/taoliujun/blog/issues/10)\n\n<!--hexo\n---\nurl: github-actions-runs\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/using-workflows/manually-running-a-workflow\n\n## 手动执行\n\n设置`event`包含`workflow_dispatch`，可以手动触发，使用Github CLI、Browser都可以，文档中呈现了一个流程图示例。\n\n## 重复执行\n\n无\n\n## 取消执行\n\n无\n\n## 审批执行\n\n对于pull request，可以设置审批执行以防止浪费actions资源。\n\n## 审查部署\n\n无\n\n## 开关workflow\n\n无\n\n## 跳过workflow\n\n在commit message中加入关键词可以跳过workflow，只对push、pull_request事件有效。关键词有：\n\n* [skip ci]\n* [ci skip]\n* [no ci]\n* [skip actions]\n* [actions skip]\n\n也可以在message后空两行，然后加入关键词：\n\n* skip-checks:true\n* skip-checks: true\n\n## 删除workflow\n\n无\n\n## 下载workflow归档\n\n可以下载90天内的workflow归档，操作参考文档。\n\n\n\n","source":"_posts/github-actions-runs.md","raw":"---\ntitle: \"6. GitHub Actions - Managing workflow runs\"\ndate: \"2023-07-06T06:32:01Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-runs\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/10](https://github.com/taoliujun/blog/issues/10)\n\n<!--hexo\n---\nurl: github-actions-runs\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/using-workflows/manually-running-a-workflow\n\n## 手动执行\n\n设置`event`包含`workflow_dispatch`，可以手动触发，使用Github CLI、Browser都可以，文档中呈现了一个流程图示例。\n\n## 重复执行\n\n无\n\n## 取消执行\n\n无\n\n## 审批执行\n\n对于pull request，可以设置审批执行以防止浪费actions资源。\n\n## 审查部署\n\n无\n\n## 开关workflow\n\n无\n\n## 跳过workflow\n\n在commit message中加入关键词可以跳过workflow，只对push、pull_request事件有效。关键词有：\n\n* [skip ci]\n* [ci skip]\n* [no ci]\n* [skip actions]\n* [actions skip]\n\n也可以在message后空两行，然后加入关键词：\n\n* skip-checks:true\n* skip-checks: true\n\n## 删除workflow\n\n无\n\n## 下载workflow归档\n\n可以下载90天内的workflow归档，操作参考文档。\n\n\n\n","slug":"github-actions-runs","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne710011i8oh7eok4ahc","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/10\">https://github.com/taoliujun/blog/issues/10</a></p>\n<!--hexo\n---\nurl: github-actions-runs\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/using-workflows/manually-running-a-workflow\">https://docs.github.com/en/actions/using-workflows/manually-running-a-workflow</a></p>\n<h2 id=\"手动执行\"><a href=\"#手动执行\" class=\"headerlink\" title=\"手动执行\"></a>手动执行</h2><p>设置<code>event</code>包含<code>workflow_dispatch</code>，可以手动触发，使用Github CLI、Browser都可以，文档中呈现了一个流程图示例。</p>\n<h2 id=\"重复执行\"><a href=\"#重复执行\" class=\"headerlink\" title=\"重复执行\"></a>重复执行</h2><p>无</p>\n<h2 id=\"取消执行\"><a href=\"#取消执行\" class=\"headerlink\" title=\"取消执行\"></a>取消执行</h2><p>无</p>\n<h2 id=\"审批执行\"><a href=\"#审批执行\" class=\"headerlink\" title=\"审批执行\"></a>审批执行</h2><p>对于pull request，可以设置审批执行以防止浪费actions资源。</p>\n<h2 id=\"审查部署\"><a href=\"#审查部署\" class=\"headerlink\" title=\"审查部署\"></a>审查部署</h2><p>无</p>\n<h2 id=\"开关workflow\"><a href=\"#开关workflow\" class=\"headerlink\" title=\"开关workflow\"></a>开关workflow</h2><p>无</p>\n<h2 id=\"跳过workflow\"><a href=\"#跳过workflow\" class=\"headerlink\" title=\"跳过workflow\"></a>跳过workflow</h2><p>在commit message中加入关键词可以跳过workflow，只对push、pull_request事件有效。关键词有：</p>\n<ul>\n<li>[skip ci]</li>\n<li>[ci skip]</li>\n<li>[no ci]</li>\n<li>[skip actions]</li>\n<li>[actions skip]</li>\n</ul>\n<p>也可以在message后空两行，然后加入关键词：</p>\n<ul>\n<li>skip-checks:true</li>\n<li>skip-checks: true</li>\n</ul>\n<h2 id=\"删除workflow\"><a href=\"#删除workflow\" class=\"headerlink\" title=\"删除workflow\"></a>删除workflow</h2><p>无</p>\n<h2 id=\"下载workflow归档\"><a href=\"#下载workflow归档\" class=\"headerlink\" title=\"下载workflow归档\"></a>下载workflow归档</h2><p>可以下载90天内的workflow归档，操作参考文档。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/10\">https://github.com/taoliujun/blog/issues/10</a></p>\n<!--hexo\n---\nurl: github-actions-runs\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/using-workflows/manually-running-a-workflow\">https://docs.github.com/en/actions/using-workflows/manually-running-a-workflow</a></p>\n<h2 id=\"手动执行\"><a href=\"#手动执行\" class=\"headerlink\" title=\"手动执行\"></a>手动执行</h2><p>设置<code>event</code>包含<code>workflow_dispatch</code>，可以手动触发，使用Github CLI、Browser都可以，文档中呈现了一个流程图示例。</p>\n<h2 id=\"重复执行\"><a href=\"#重复执行\" class=\"headerlink\" title=\"重复执行\"></a>重复执行</h2><p>无</p>\n<h2 id=\"取消执行\"><a href=\"#取消执行\" class=\"headerlink\" title=\"取消执行\"></a>取消执行</h2><p>无</p>\n<h2 id=\"审批执行\"><a href=\"#审批执行\" class=\"headerlink\" title=\"审批执行\"></a>审批执行</h2><p>对于pull request，可以设置审批执行以防止浪费actions资源。</p>\n<h2 id=\"审查部署\"><a href=\"#审查部署\" class=\"headerlink\" title=\"审查部署\"></a>审查部署</h2><p>无</p>\n<h2 id=\"开关workflow\"><a href=\"#开关workflow\" class=\"headerlink\" title=\"开关workflow\"></a>开关workflow</h2><p>无</p>\n<h2 id=\"跳过workflow\"><a href=\"#跳过workflow\" class=\"headerlink\" title=\"跳过workflow\"></a>跳过workflow</h2><p>在commit message中加入关键词可以跳过workflow，只对push、pull_request事件有效。关键词有：</p>\n<ul>\n<li>[skip ci]</li>\n<li>[ci skip]</li>\n<li>[no ci]</li>\n<li>[skip actions]</li>\n<li>[actions skip]</li>\n</ul>\n<p>也可以在message后空两行，然后加入关键词：</p>\n<ul>\n<li>skip-checks:true</li>\n<li>skip-checks: true</li>\n</ul>\n<h2 id=\"删除workflow\"><a href=\"#删除workflow\" class=\"headerlink\" title=\"删除workflow\"></a>删除workflow</h2><p>无</p>\n<h2 id=\"下载workflow归档\"><a href=\"#下载workflow归档\" class=\"headerlink\" title=\"下载workflow归档\"></a>下载workflow归档</h2><p>可以下载90天内的workflow归档，操作参考文档。</p>\n"},{"title":"7. GitHub Actions - 在pull request中执行eslint检测的工作流例子","date":"2023-12-28T19:56:49.000Z","url":"github-actions-sample-eslint-in-pull-request","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/36](https://github.com/taoliujun/blog/issues/36)\n\n<!--hexo\n---\nurl: github-actions-sample-eslint-in-pull-request\ntags:\n  - github actions\n---\n-->\n\n一个在pull request发起的时候执行eslint检测的workflow，[点此查看完整代码](https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml)，它实现的功能如下：\n\n- 在pull request创建、更新的时候执行。\n- 先回复一个评论，告诉用户正在运行。\n- 初始化仓库，并安装依赖，产生依赖缓存。\n- 运行eslint增量检查。\n- 运行typescript检查。\n- 运行jest检查。\n- 更新之前的评论，回复检查的结果。\n\n运行截图：\n\n![Alt text](https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e)\n\n为避免歧义，涉及到github action的术语都是英文的。术语介绍如下：\n\n* workflow，工作流，可以理解为yml文件。\n* jobs，工作，一个workflow可以包含多个job，并行执行。\n* steps，作业，一个job可以包含多个step，串行执行。\n* action，操作，作业中具体的执行。\n\n## 步骤\n\n- [初始化workflow](https://github.com/taoliujun/blog/issues/36#issuecomment-1871790603)\n- [reply checking](https://github.com/taoliujun/blog/issues/36#issuecomment-1871806576)\n- [./.github/actions/unique-comment](https://github.com/taoliujun/blog/issues/36#issuecomment-1871818126)\n- [init](https://github.com/taoliujun/blog/issues/36#issuecomment-1871862632)\n- [eslint](https://github.com/taoliujun/blog/issues/36#issuecomment-1871862779)\n- [typescript](https://github.com/taoliujun/blog/issues/36#issuecomment-1871862850)\n- [unit test](https://github.com/taoliujun/blog/issues/36#issuecomment-1871863037)\n- [reply result](https://github.com/taoliujun/blog/issues/36#issuecomment-1871863117)\n\n<!--hexo-->\n\n# 初始化workflow\n\n在项目中新建文件`.github/workflows/check-pull-request.yml`，内容如下：\n\n```yaml\nname: test check pull request\nrun-name: 'check pull request #${{ github.event.pull_request.number }}'\non:\n    pull_request:\n        types: [opened, synchronize, reopened]\njobs:\n    replyChecking:\n        runs-on: ubuntu-latest\n        steps:\n            - run: echo 'replyChecking'\n\n    init:\n        runs-on: ubuntu-latest\n        steps:\n            - run: echo 'init'\n\n    eslint:\n        runs-on: ubuntu-latest\n        needs: [init]\n        steps:\n            - run: echo 'eslint'\n\n    typescript:\n        runs-on: ubuntu-latest\n        needs: [init]\n        steps:\n            - run: echo 'typescript'\n\n    unitTest:\n        runs-on: ubuntu-latest\n        needs: [init]\n        steps:\n            - run: echo 'unitTest'\n\n    replyResult:\n        runs-on: ubuntu-latest\n        needs: [replyChecking, eslint, typescript, unitTest]\n        steps:\n            - run: echo 'replyResult'\n```\n\n## name和run-name\n\n给workflow命名为`check pull request`，它会出现在Actions页面的左侧菜单中。运行实例名为`check pull request #44`，出现在右侧的运行列表中。如图：\n\n![](https://github.com/taoliujun/blog/assets/5689134/c1371ff2-8fc3-4e5b-8b60-3c572419938b)\n\n`run-name`中的`${{ github.event.pull_request.number }}`是workflow的上下文，这里读取了上下文中的pr编号。\n\n## on\n\n`on`指定了workflow的触发条件，这里配置了在pr创建、同步、重新打开的时候，触发该workflow。\n\n## jobs\n\n按照设想，需要定义几个job，分别是：\n\n-   replyChecking：回复用户正在检查中\n-   init：初始化仓库，缓存依赖项\n-   eslint：运行eslint检查\n-   typescript：运行typescript检查\n-   unitTest：运行单元测试\n-   replyResult：回复用户检查结果\n\n`jobs`是并行运行的，聪明如你肯定发现了，eslint、typescript、unitTest这三个job会涉及到安装npm依赖，所以它们最好在init后执行，确保依赖已经缓存了。\n\n其次，replyResult肯定要拿到eslint等job的结果才能执行，所以使用了`needs`管理它们的执行依赖关系。\n\n### runs-on\n\n每个job都运行在独立的容器中，github官方提供了windows、macos、linux多种容器，这里使用了ubuntu容器。\n\n## 测试\n\n发起一个pr，看到Actions页面出现了新的运行实例，点击进去，可以看到各个job的运行情况和依赖关系：\n\n![](https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e)\n\n<!--hexo-->\n\n# replyChecking\n\n在进行eslint检测之前，先在pr里回复`checking`，并且带上拽酷炫的话。将replyChecking改成如下：\n\n```yaml\nreplyChecking:\n    runs-on: ubuntu-latest\n    steps:\n        - name: Checkout\n          uses: actions/checkout@v4\n          with:\n              ref: ${{github.head_ref}}\n        - name: Get date time\n          id: getDateTime\n          run: echo \"result=$(TZ=Asia/Shanghai date)\" >> \"$GITHUB_OUTPUT\"\n        - name: Create or update a comment\n          uses: ./.github/actions/unique-comment\n          with:\n              uniqueIdentifier: ${{ github.workflow }}\n              body: |\n                  **Checking...**\n\n                  ---\n\n                  Commented by Action [${{github.workflow}}](${{github.event.repository.html_url}}/actions/runs/${{github.run_id}}), last updated on ${{steps.getDateTime.outputs.result}}.\n```\n\n`steps`每一步里`name`、`id`是可选的，`name`在Actions详情页面里会显示，更直观的看到step的名称，推荐写上。\n\n## Checkout\n\n`uses`表示使用一个action，名为`actions/checkout@v4`，它用来拉取仓库。\n\n> 同其他编程语言一样，重复的action可以封装起来。[action市场](https://github.com/marketplace?type=actions)提供了很多。\n\n`with`属性指定了该action的输入参数，每个action的参数不尽相同。\n\n`ref`参数表示要拉取的分支，`${{github.head_ref}}`也是一个上下文，表示当前pr的源分支。\n\n\n## Get Date time\n\n这step还写了`id`，表示该step在该job中的唯一标识，为什么要写呢？是为了下一步step能根据`id`读取到它的`output`。\n\n> **output**是workflow中非常重要的概念，它用于在step之间、job之间分享简单的数据。\n\n`run`就是在容器中跑一个命令，这里跑了一个unix bash命令，将当前时间写入到`$GITHUB_OUTPUT`中，键名为`result`。\n\n> `$GITHUB_OUTPUT`是workflow注入到容器中的一个路径，用于存放output。\n\n## Create or update a comment\n\n`uses`使用了本地的action，这个action用于创建或更新一个唯一回复，下一节说。\n\n> 有时候，官方或市场的action并不能满足你的需要，就得自己写一个了。\n\n同理，该action也有`with`属性，`uniqueIdentifier`是回复评论的唯一标识，`body`是回复的内容，内容使用了markdown语法，里面还涉及到上下文不一一细讲了。只说`${{steps.getDateTime.outputs.result}}`这个上下文表示获取getDateTime这个step中，键名为`result`的值。\n\n如果你不需要在内容里插入时间，那么上面的`Get Date time`就可以省略了。\n\n## 测试\n\n因为我已经有完整的代码了，所以运行后，pr中会有一个回复，如图：\n\n![](https://github.com/taoliujun/blog/assets/5689134/42396a84-b798-4f4e-9f39-5bf92a8acb15)\n<!--hexo-->\n\n# ./.github/actions/unique-comment\n\n这是一个封装的javascript action，用于对issue创建、更新唯一评论。\n\n## 目录结构\n\n创建目录`./.github/actions/unique-comment`，最终目录结构如下：\n\n```bash\n.\n├── action.yml\n├── config\n│   └── webpack.config.js\n├── dist\n│   ├── index.js\n│   └── index.js.LICENSE.txt\n├── package.json\n└── src\n    └── index.js\n```\n\n## action.yml\n\n这是action的配置文件，必须存在，内容如下：\n\n```yaml\nname: unique-comment\ndescription: create or update a unique comment\n\nruns:\n    using: 'node20'\n    main: './dist/index.js'\n\ninputs:\n    token:\n        description: 'GitHub token'\n        required: false\n        default: ${{ github.token }}\n    owner:\n        description: 'Repository owner'\n        required: false\n        default: ${{ github.event.repository.owner.login }}\n    repo:\n        description: 'Repository name'\n        required: false\n        default: ${{ github.event.repository.name }}\n    issue_number:\n        description: 'Issue number'\n        required: false\n        default: ${{ github.event.number }}\n    body:\n        description: 'Comment body'\n        required: false\n    uniqueIdentifier:\n        description: 'Unique identifier for comment'\n        required: false\n        default: 'unique-comment'\n```\n\n大部分属性不一一细讲了，都是简单的英文望文生义即可。\n\n`runs`表示运行在`node20`环境下，入口文件为`./dist/index.js`。\n\n`inputs`表示接受的参数，也就是之前提到的`with`属性里要输入的参数。用`required`表示是否必须传入，`default`表示默认值。\n\n## src/index.js\n\n为什么入口文件是`dist/index.js`，而不是`src/index.js`呢？因为要引用一些github官方提供的快捷操作github REST API的js包去操作issue评论(pull request也是一种issue)，最终打包后的文件才能在工作流中稳妥的运行。所以，写好`src/index.js`，再打包就行。\n\n该文件代码如下：\n\n```javascript\nconst core = require('@actions/core');\nconst github = require('@actions/github');\n\nconst main = async () => {\n    const token = core.getInput('token');\n    const owner = core.getInput('owner');\n    const repo = core.getInput('repo');\n    const issueNumber = core.getInput('issue_number');\n    const uniqueIdentifier = `[^uniqueIdentifier]: ${core.getInput('uniqueIdentifier')}`;\n    const body = `${core.getInput('body')}\\n\\n${uniqueIdentifier}`;\n\n    core.debug(`uniqueIdentifier is ${uniqueIdentifier}`);\n\n    const octokit = github.getOctokit(token);\n\n    const comments = await octokit.rest.issues.listComments({\n        owner,\n        repo,\n        issue_number: issueNumber,\n    });\n\n    const botComment = comments.data.find((v) => v.body.includes(uniqueIdentifier));\n\n    if (botComment) {\n        core.info('update comment successfully.');\n        await octokit.rest.issues.updateComment({\n            owner,\n            repo,\n            comment_id: botComment.id,\n            body,\n        });\n    } else {\n        core.info('create comment successfully.');\n        await octokit.rest.issues.createComment({\n            owner,\n            repo,\n            issue_number: issueNumber,\n            body,\n        });\n    }\n};\n\ntry {\n    main();\n} catch (err) {\n    core.setFailed(err.message);\n}\n```\n\n`@actions/core`和`@actions/github`是github官方提供的js包，前者可以方便的读取入参等，后者可以方便的操作github REST API。\n\n`main`函数的代码就是原生javascript，不一一解释了，主要通过`uniqueIdentifier`来判断是否发布过评论，如果是，就更新评论，否则就创建评论。\n\n> markdown语法`[^uniqueIdentifier]`表示脚注，不会被渲染。\n\n`core.setFailed(err.message);`表示抛出退出代码。\n\n## config/webpack.config.js\n\n打包用的，配置简单可用即可：\n\n```javascript\nmodule.exports = {\n    mode: 'production',\n    target: 'node20',\n    entry: './src/index.js',\n    output: {\n        filename: 'index.js',\n        clean: true,\n    },\n};\n```\n\n## package.json\n\n```json\n{\n  \"name\": \"unique-comment\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"build\": \"webpack --config ./config/webpack.config.js\"\n  },\n  \"dependencies\": {\n    \"@actions/core\": \"^1.10.1\",\n    \"@actions/github\": \"^6.0.0\"\n  },\n  \"devDependencies\": {\n    \"webpack\": \"^5.89.0\",\n    \"webpack-cli\": \"^5.1.4\"\n  }\n}\n```\n\n没啥好说的，列出了依赖项。和一个打包脚本。\n\n## 测试\n\n修改了`src/index.js`得`build`，然后push到github仓库。\n\n记得将**dist**目录也提交到github仓库。\n\n<!--hexo-->\n\n# init\n\n现在，开始搞正经的了。\n\n先初始化项目，这个job的目的仅仅是为了缓存pnpm依赖项，如果你的项目的依赖项不经常更新，可以省略这个job，后续也不要`needs`这个job。\n\n将init改成如下：\n\n```yaml\ninit:\n        runs-on: ubuntu-latest\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n```\n\n相信经过对之前的job的了解，这里的配置就看起来很简单了。\n\n## Init pnpm\n\n使用第三方action，安装pnpm@^8。\n\n## Init node\n\n`cache: 'pnpm'`指定缓存机制，它内部是利用了workflow的cache机制。\n\n## Install dependencies\n\n安装依赖项，触发缓存。\n<!--hexo-->\n\n# eslint\n\n将eslint改成如下：\n\n```yaml\neslint:\n        runs-on: ubuntu-latest\n        needs: [init]\n        outputs:\n            result: ${{ steps.lint.outputs.result }}\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n                  fetch-depth: 0\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n\n            - name: Run eslint\n              id: lint\n              uses: actions/github-script@v7\n              with:\n                  result-encoding: string\n                  script: |\n                      let output = '';\n                      let outerr = '';\n                      let diffFiles = '';\n\n                      await exec.exec(\n                        `git diff --name-only origin/${{github.base_ref}}`,\n                        [],\n                        {\n                          // silent: true,\n                          // ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                diffFiles += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      const lintFiles = diffFiles.split(`\\n`).filter((file) => {\n                        return file.endsWith('.js') || file.endsWith('.ts') || file.endsWith('.tsx')\n                      }).join(' ');\n\n                      await exec.exec(\n                        // \"pnpm run lint --format stylish\",\n                        `pnpm eslint ${lintFiles}`,\n                        [],\n                        {\n                          // silent: true,\n                          ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                output += data.toString();\n                            },\n                            stderr: (data) => {\n                                outerr += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      if (outerr) {\n                        return `:x: Some command execution errors, non-eslint business errors.`;\n                      }\n\n                      const errorMatch = output.match(/(\\d+) errors?/);\n                      const warnMatch = output.match(/(\\d+) warnings?/);\n\n                      if (errorMatch && errorMatch?.[1] !== '0') {\n                        return `:x: ${errorMatch?.[0]} ${warnMatch?.[0]}`;\n                      }\n\n                      return `:white_check_mark: ${errorMatch?.[0] || '0 error'} ${warnMatch?.[0] || '0 warning'}`;\n```\n\n## needs\n\n使用`needs`依赖init，可以使用到pnpm的缓存项，防止install太慢。\n\n> 因为eslint、typescript、unitTest都需要pnpm install，所以一个前置的init去缓存pnpm依赖项，可以加快后续的install速度。\n\n## outputs\n\njob里的outputs，可以在依赖它的其他job中访问到。这里使用`${{ steps.lint.outputs.result }}`去获取该job中lint这个step里的output里的result。\n\n> output有job和step两个维度，注意区分。\n\n\n## Run eslint\n\n它uses了`actions/github-script@v7`，这是github官方提供的一个action，可以在`with.script`里写js代码去执行，同时它会注入一些变量到script中去，见它的[官方文档](https://github.com/actions/github-script/tree/v7/)。\n\n> 对于简单的js代码，可以使用这个action去完成，不用再去写一个js文件。\n\n`result-encoding`是指定script返回的数据格式的，默认是json，这指定为string。\n\n> 为什么script里return了string，还要指定为string呢？\n> 因为`return 'hello'`在json encode后是`'\"hello\"'`，而string encode后为`'hello'`。\n\nscript里是原生的js代码了，里面的`exec`是该action注入的变量，用来执行shell命令。\n\n这段js代码做了两个事情，一是`git diff`获取pr中改动的文件列表，二是`eslint`检查这些增量文件，最后返回处理的结果。\n\n## fetch-depth\n\nInit repo这个step里设置了`fetch-depth: 0`，不然获取不到完整的git分支，具体看`actions/checkout`的解释，涉及到git的知识不展开细说了。\n\n## steps.lint.outputs.result\n\n`steps.lint.outputs.result`为什么能拿到lint step里的output.result呢？因为`actions/github-script`这个action内部将script的返回值，设置到`$GITHUB_OUTPUT`里了，且键名为`result`。\n<!--hexo-->\n\n# typescript\n\n和eslint的配置大同小异，只是改了对检测结果的判断。\n\n```yaml\ntypescript:\n        runs-on: ubuntu-latest\n        needs: [init]\n        outputs:\n            result: ${{ steps.lint.outputs.result }}\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n\n            - name: Run lint\n              id: lint\n              uses: actions/github-script@v7\n              with:\n                  result-encoding: string\n                  script: |\n                      let output = '';\n                      let outerr = '';\n\n                      await exec.exec(\n                        `pnpm run -r lint:ts`,\n                        [],\n                        {\n                          // silent: true,\n                          ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                output += data.toString();\n                            },\n                            stderr: (data) => {\n                                outerr += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      if (outerr) {\n                        return `:x: Some command execution errors, no business errors.`;\n                      }\n\n                      const errorMatch = output.match(/error TS/g);\n\n                      if (errorMatch) {\n                        return `:x: ${errorMatch?.length} errors`;\n                      }\n\n                      return `:white_check_mark: ${'0 error'}`;\n```\n<!--hexo-->\n\n# unitTest\n\n和eslint的配置大同小异，只是改了对检测结果的判断。唯一的区别是jest的检测结果是输出到stderr，见https://github.com/jestjs/jest/issues/5064。\n\n```yaml\nunitTest:\n        runs-on: ubuntu-latest\n        needs: [init]\n        outputs:\n            result: ${{ steps.lint.outputs.result }}\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n\n            - name: Run lint\n              id: lint\n              uses: actions/github-script@v7\n              with:\n                  result-encoding: string\n                  script: |\n                      let output = '';\n                      let outerr = '';\n\n                      await exec.exec(\n                        `pnpm run test`,\n                        [],\n                        {\n                          // silent: true,\n                          ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                output += data.toString();\n                            },\n                            stderr: (data) => {\n                                outerr += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      // why use outerr? https://github.com/jestjs/jest/issues/5064\n\n                      const failMatch = outerr.match(/Test Suites: \\d+ failed/);\n\n                      if (failMatch) {\n                        return `:x: ${failMatch?.[0]}`;\n                      }\n\n                      const errorMatch = outerr.match(/Jest: \"global\" coverage threshold for lines \\([0-9\\.]+%\\) not met: [0-9\\.]+%/);\n\n                      if (errorMatch) {\n                        return `:x: ${errorMatch?.[0]}`;\n                      }\n\n                      return `:white_check_mark: passed`;\n```\n<!--hexo-->\n\n# replyResult\n\n最后，将几个检测的结果进行汇总，回复到pr里就行了。\n\n```yaml\nreplyResult:\n        runs-on: ubuntu-latest\n        needs: [replyChecking, eslint, typescript, unitTest]\n        steps:\n            - name: Checkout\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n            - name: Get date time\n              id: getDateTime\n              run: echo \"result=$(TZ=Asia/Shanghai date)\" >> \"$GITHUB_OUTPUT\"\n            - name: Create or update a comment\n              uses: ./.github/actions/unique-comment\n              with:\n                  uniqueIdentifier: ${{ github.workflow }}\n                  body: |\n                      ## Eslint Check Result\n\n                      ${{needs.eslint.outputs.result}}\n\n                      ## Typescript Check Result\n\n                      ${{needs.typescript.outputs.result}}\n\n                      ## UnitTest Check Result\n\n                      ${{needs.unitTest.outputs.result}}\n\n                      ---\n\n                      Commented by Action [${{github.workflow}}](${{github.event.repository.html_url}}/actions/runs/${{github.run_id}}), last updated on ${{steps.getDateTime.outputs.result}}.\n```\n\n和replyChecking差不多，在body里使用`${{needs.eslint.outputs.result}}`去读取了eslint job的outputs。\n\n## 测试\n\n去发起新的pr，故意提交一个有eslint error的js/ts文件，看看表现吧~\n\n","source":"_posts/github-actions-sample-eslint-in-pull-request.md","raw":"---\ntitle: \"7. GitHub Actions - 在pull request中执行eslint检测的工作流例子\"\ndate: \"2023-12-29T03:56:49Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-sample-eslint-in-pull-request\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/36](https://github.com/taoliujun/blog/issues/36)\n\n<!--hexo\n---\nurl: github-actions-sample-eslint-in-pull-request\ntags:\n  - github actions\n---\n-->\n\n一个在pull request发起的时候执行eslint检测的workflow，[点此查看完整代码](https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml)，它实现的功能如下：\n\n- 在pull request创建、更新的时候执行。\n- 先回复一个评论，告诉用户正在运行。\n- 初始化仓库，并安装依赖，产生依赖缓存。\n- 运行eslint增量检查。\n- 运行typescript检查。\n- 运行jest检查。\n- 更新之前的评论，回复检查的结果。\n\n运行截图：\n\n![Alt text](https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e)\n\n为避免歧义，涉及到github action的术语都是英文的。术语介绍如下：\n\n* workflow，工作流，可以理解为yml文件。\n* jobs，工作，一个workflow可以包含多个job，并行执行。\n* steps，作业，一个job可以包含多个step，串行执行。\n* action，操作，作业中具体的执行。\n\n## 步骤\n\n- [初始化workflow](https://github.com/taoliujun/blog/issues/36#issuecomment-1871790603)\n- [reply checking](https://github.com/taoliujun/blog/issues/36#issuecomment-1871806576)\n- [./.github/actions/unique-comment](https://github.com/taoliujun/blog/issues/36#issuecomment-1871818126)\n- [init](https://github.com/taoliujun/blog/issues/36#issuecomment-1871862632)\n- [eslint](https://github.com/taoliujun/blog/issues/36#issuecomment-1871862779)\n- [typescript](https://github.com/taoliujun/blog/issues/36#issuecomment-1871862850)\n- [unit test](https://github.com/taoliujun/blog/issues/36#issuecomment-1871863037)\n- [reply result](https://github.com/taoliujun/blog/issues/36#issuecomment-1871863117)\n\n<!--hexo-->\n\n# 初始化workflow\n\n在项目中新建文件`.github/workflows/check-pull-request.yml`，内容如下：\n\n```yaml\nname: test check pull request\nrun-name: 'check pull request #${{ github.event.pull_request.number }}'\non:\n    pull_request:\n        types: [opened, synchronize, reopened]\njobs:\n    replyChecking:\n        runs-on: ubuntu-latest\n        steps:\n            - run: echo 'replyChecking'\n\n    init:\n        runs-on: ubuntu-latest\n        steps:\n            - run: echo 'init'\n\n    eslint:\n        runs-on: ubuntu-latest\n        needs: [init]\n        steps:\n            - run: echo 'eslint'\n\n    typescript:\n        runs-on: ubuntu-latest\n        needs: [init]\n        steps:\n            - run: echo 'typescript'\n\n    unitTest:\n        runs-on: ubuntu-latest\n        needs: [init]\n        steps:\n            - run: echo 'unitTest'\n\n    replyResult:\n        runs-on: ubuntu-latest\n        needs: [replyChecking, eslint, typescript, unitTest]\n        steps:\n            - run: echo 'replyResult'\n```\n\n## name和run-name\n\n给workflow命名为`check pull request`，它会出现在Actions页面的左侧菜单中。运行实例名为`check pull request #44`，出现在右侧的运行列表中。如图：\n\n![](https://github.com/taoliujun/blog/assets/5689134/c1371ff2-8fc3-4e5b-8b60-3c572419938b)\n\n`run-name`中的`${{ github.event.pull_request.number }}`是workflow的上下文，这里读取了上下文中的pr编号。\n\n## on\n\n`on`指定了workflow的触发条件，这里配置了在pr创建、同步、重新打开的时候，触发该workflow。\n\n## jobs\n\n按照设想，需要定义几个job，分别是：\n\n-   replyChecking：回复用户正在检查中\n-   init：初始化仓库，缓存依赖项\n-   eslint：运行eslint检查\n-   typescript：运行typescript检查\n-   unitTest：运行单元测试\n-   replyResult：回复用户检查结果\n\n`jobs`是并行运行的，聪明如你肯定发现了，eslint、typescript、unitTest这三个job会涉及到安装npm依赖，所以它们最好在init后执行，确保依赖已经缓存了。\n\n其次，replyResult肯定要拿到eslint等job的结果才能执行，所以使用了`needs`管理它们的执行依赖关系。\n\n### runs-on\n\n每个job都运行在独立的容器中，github官方提供了windows、macos、linux多种容器，这里使用了ubuntu容器。\n\n## 测试\n\n发起一个pr，看到Actions页面出现了新的运行实例，点击进去，可以看到各个job的运行情况和依赖关系：\n\n![](https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e)\n\n<!--hexo-->\n\n# replyChecking\n\n在进行eslint检测之前，先在pr里回复`checking`，并且带上拽酷炫的话。将replyChecking改成如下：\n\n```yaml\nreplyChecking:\n    runs-on: ubuntu-latest\n    steps:\n        - name: Checkout\n          uses: actions/checkout@v4\n          with:\n              ref: ${{github.head_ref}}\n        - name: Get date time\n          id: getDateTime\n          run: echo \"result=$(TZ=Asia/Shanghai date)\" >> \"$GITHUB_OUTPUT\"\n        - name: Create or update a comment\n          uses: ./.github/actions/unique-comment\n          with:\n              uniqueIdentifier: ${{ github.workflow }}\n              body: |\n                  **Checking...**\n\n                  ---\n\n                  Commented by Action [${{github.workflow}}](${{github.event.repository.html_url}}/actions/runs/${{github.run_id}}), last updated on ${{steps.getDateTime.outputs.result}}.\n```\n\n`steps`每一步里`name`、`id`是可选的，`name`在Actions详情页面里会显示，更直观的看到step的名称，推荐写上。\n\n## Checkout\n\n`uses`表示使用一个action，名为`actions/checkout@v4`，它用来拉取仓库。\n\n> 同其他编程语言一样，重复的action可以封装起来。[action市场](https://github.com/marketplace?type=actions)提供了很多。\n\n`with`属性指定了该action的输入参数，每个action的参数不尽相同。\n\n`ref`参数表示要拉取的分支，`${{github.head_ref}}`也是一个上下文，表示当前pr的源分支。\n\n\n## Get Date time\n\n这step还写了`id`，表示该step在该job中的唯一标识，为什么要写呢？是为了下一步step能根据`id`读取到它的`output`。\n\n> **output**是workflow中非常重要的概念，它用于在step之间、job之间分享简单的数据。\n\n`run`就是在容器中跑一个命令，这里跑了一个unix bash命令，将当前时间写入到`$GITHUB_OUTPUT`中，键名为`result`。\n\n> `$GITHUB_OUTPUT`是workflow注入到容器中的一个路径，用于存放output。\n\n## Create or update a comment\n\n`uses`使用了本地的action，这个action用于创建或更新一个唯一回复，下一节说。\n\n> 有时候，官方或市场的action并不能满足你的需要，就得自己写一个了。\n\n同理，该action也有`with`属性，`uniqueIdentifier`是回复评论的唯一标识，`body`是回复的内容，内容使用了markdown语法，里面还涉及到上下文不一一细讲了。只说`${{steps.getDateTime.outputs.result}}`这个上下文表示获取getDateTime这个step中，键名为`result`的值。\n\n如果你不需要在内容里插入时间，那么上面的`Get Date time`就可以省略了。\n\n## 测试\n\n因为我已经有完整的代码了，所以运行后，pr中会有一个回复，如图：\n\n![](https://github.com/taoliujun/blog/assets/5689134/42396a84-b798-4f4e-9f39-5bf92a8acb15)\n<!--hexo-->\n\n# ./.github/actions/unique-comment\n\n这是一个封装的javascript action，用于对issue创建、更新唯一评论。\n\n## 目录结构\n\n创建目录`./.github/actions/unique-comment`，最终目录结构如下：\n\n```bash\n.\n├── action.yml\n├── config\n│   └── webpack.config.js\n├── dist\n│   ├── index.js\n│   └── index.js.LICENSE.txt\n├── package.json\n└── src\n    └── index.js\n```\n\n## action.yml\n\n这是action的配置文件，必须存在，内容如下：\n\n```yaml\nname: unique-comment\ndescription: create or update a unique comment\n\nruns:\n    using: 'node20'\n    main: './dist/index.js'\n\ninputs:\n    token:\n        description: 'GitHub token'\n        required: false\n        default: ${{ github.token }}\n    owner:\n        description: 'Repository owner'\n        required: false\n        default: ${{ github.event.repository.owner.login }}\n    repo:\n        description: 'Repository name'\n        required: false\n        default: ${{ github.event.repository.name }}\n    issue_number:\n        description: 'Issue number'\n        required: false\n        default: ${{ github.event.number }}\n    body:\n        description: 'Comment body'\n        required: false\n    uniqueIdentifier:\n        description: 'Unique identifier for comment'\n        required: false\n        default: 'unique-comment'\n```\n\n大部分属性不一一细讲了，都是简单的英文望文生义即可。\n\n`runs`表示运行在`node20`环境下，入口文件为`./dist/index.js`。\n\n`inputs`表示接受的参数，也就是之前提到的`with`属性里要输入的参数。用`required`表示是否必须传入，`default`表示默认值。\n\n## src/index.js\n\n为什么入口文件是`dist/index.js`，而不是`src/index.js`呢？因为要引用一些github官方提供的快捷操作github REST API的js包去操作issue评论(pull request也是一种issue)，最终打包后的文件才能在工作流中稳妥的运行。所以，写好`src/index.js`，再打包就行。\n\n该文件代码如下：\n\n```javascript\nconst core = require('@actions/core');\nconst github = require('@actions/github');\n\nconst main = async () => {\n    const token = core.getInput('token');\n    const owner = core.getInput('owner');\n    const repo = core.getInput('repo');\n    const issueNumber = core.getInput('issue_number');\n    const uniqueIdentifier = `[^uniqueIdentifier]: ${core.getInput('uniqueIdentifier')}`;\n    const body = `${core.getInput('body')}\\n\\n${uniqueIdentifier}`;\n\n    core.debug(`uniqueIdentifier is ${uniqueIdentifier}`);\n\n    const octokit = github.getOctokit(token);\n\n    const comments = await octokit.rest.issues.listComments({\n        owner,\n        repo,\n        issue_number: issueNumber,\n    });\n\n    const botComment = comments.data.find((v) => v.body.includes(uniqueIdentifier));\n\n    if (botComment) {\n        core.info('update comment successfully.');\n        await octokit.rest.issues.updateComment({\n            owner,\n            repo,\n            comment_id: botComment.id,\n            body,\n        });\n    } else {\n        core.info('create comment successfully.');\n        await octokit.rest.issues.createComment({\n            owner,\n            repo,\n            issue_number: issueNumber,\n            body,\n        });\n    }\n};\n\ntry {\n    main();\n} catch (err) {\n    core.setFailed(err.message);\n}\n```\n\n`@actions/core`和`@actions/github`是github官方提供的js包，前者可以方便的读取入参等，后者可以方便的操作github REST API。\n\n`main`函数的代码就是原生javascript，不一一解释了，主要通过`uniqueIdentifier`来判断是否发布过评论，如果是，就更新评论，否则就创建评论。\n\n> markdown语法`[^uniqueIdentifier]`表示脚注，不会被渲染。\n\n`core.setFailed(err.message);`表示抛出退出代码。\n\n## config/webpack.config.js\n\n打包用的，配置简单可用即可：\n\n```javascript\nmodule.exports = {\n    mode: 'production',\n    target: 'node20',\n    entry: './src/index.js',\n    output: {\n        filename: 'index.js',\n        clean: true,\n    },\n};\n```\n\n## package.json\n\n```json\n{\n  \"name\": \"unique-comment\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"build\": \"webpack --config ./config/webpack.config.js\"\n  },\n  \"dependencies\": {\n    \"@actions/core\": \"^1.10.1\",\n    \"@actions/github\": \"^6.0.0\"\n  },\n  \"devDependencies\": {\n    \"webpack\": \"^5.89.0\",\n    \"webpack-cli\": \"^5.1.4\"\n  }\n}\n```\n\n没啥好说的，列出了依赖项。和一个打包脚本。\n\n## 测试\n\n修改了`src/index.js`得`build`，然后push到github仓库。\n\n记得将**dist**目录也提交到github仓库。\n\n<!--hexo-->\n\n# init\n\n现在，开始搞正经的了。\n\n先初始化项目，这个job的目的仅仅是为了缓存pnpm依赖项，如果你的项目的依赖项不经常更新，可以省略这个job，后续也不要`needs`这个job。\n\n将init改成如下：\n\n```yaml\ninit:\n        runs-on: ubuntu-latest\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n```\n\n相信经过对之前的job的了解，这里的配置就看起来很简单了。\n\n## Init pnpm\n\n使用第三方action，安装pnpm@^8。\n\n## Init node\n\n`cache: 'pnpm'`指定缓存机制，它内部是利用了workflow的cache机制。\n\n## Install dependencies\n\n安装依赖项，触发缓存。\n<!--hexo-->\n\n# eslint\n\n将eslint改成如下：\n\n```yaml\neslint:\n        runs-on: ubuntu-latest\n        needs: [init]\n        outputs:\n            result: ${{ steps.lint.outputs.result }}\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n                  fetch-depth: 0\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n\n            - name: Run eslint\n              id: lint\n              uses: actions/github-script@v7\n              with:\n                  result-encoding: string\n                  script: |\n                      let output = '';\n                      let outerr = '';\n                      let diffFiles = '';\n\n                      await exec.exec(\n                        `git diff --name-only origin/${{github.base_ref}}`,\n                        [],\n                        {\n                          // silent: true,\n                          // ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                diffFiles += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      const lintFiles = diffFiles.split(`\\n`).filter((file) => {\n                        return file.endsWith('.js') || file.endsWith('.ts') || file.endsWith('.tsx')\n                      }).join(' ');\n\n                      await exec.exec(\n                        // \"pnpm run lint --format stylish\",\n                        `pnpm eslint ${lintFiles}`,\n                        [],\n                        {\n                          // silent: true,\n                          ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                output += data.toString();\n                            },\n                            stderr: (data) => {\n                                outerr += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      if (outerr) {\n                        return `:x: Some command execution errors, non-eslint business errors.`;\n                      }\n\n                      const errorMatch = output.match(/(\\d+) errors?/);\n                      const warnMatch = output.match(/(\\d+) warnings?/);\n\n                      if (errorMatch && errorMatch?.[1] !== '0') {\n                        return `:x: ${errorMatch?.[0]} ${warnMatch?.[0]}`;\n                      }\n\n                      return `:white_check_mark: ${errorMatch?.[0] || '0 error'} ${warnMatch?.[0] || '0 warning'}`;\n```\n\n## needs\n\n使用`needs`依赖init，可以使用到pnpm的缓存项，防止install太慢。\n\n> 因为eslint、typescript、unitTest都需要pnpm install，所以一个前置的init去缓存pnpm依赖项，可以加快后续的install速度。\n\n## outputs\n\njob里的outputs，可以在依赖它的其他job中访问到。这里使用`${{ steps.lint.outputs.result }}`去获取该job中lint这个step里的output里的result。\n\n> output有job和step两个维度，注意区分。\n\n\n## Run eslint\n\n它uses了`actions/github-script@v7`，这是github官方提供的一个action，可以在`with.script`里写js代码去执行，同时它会注入一些变量到script中去，见它的[官方文档](https://github.com/actions/github-script/tree/v7/)。\n\n> 对于简单的js代码，可以使用这个action去完成，不用再去写一个js文件。\n\n`result-encoding`是指定script返回的数据格式的，默认是json，这指定为string。\n\n> 为什么script里return了string，还要指定为string呢？\n> 因为`return 'hello'`在json encode后是`'\"hello\"'`，而string encode后为`'hello'`。\n\nscript里是原生的js代码了，里面的`exec`是该action注入的变量，用来执行shell命令。\n\n这段js代码做了两个事情，一是`git diff`获取pr中改动的文件列表，二是`eslint`检查这些增量文件，最后返回处理的结果。\n\n## fetch-depth\n\nInit repo这个step里设置了`fetch-depth: 0`，不然获取不到完整的git分支，具体看`actions/checkout`的解释，涉及到git的知识不展开细说了。\n\n## steps.lint.outputs.result\n\n`steps.lint.outputs.result`为什么能拿到lint step里的output.result呢？因为`actions/github-script`这个action内部将script的返回值，设置到`$GITHUB_OUTPUT`里了，且键名为`result`。\n<!--hexo-->\n\n# typescript\n\n和eslint的配置大同小异，只是改了对检测结果的判断。\n\n```yaml\ntypescript:\n        runs-on: ubuntu-latest\n        needs: [init]\n        outputs:\n            result: ${{ steps.lint.outputs.result }}\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n\n            - name: Run lint\n              id: lint\n              uses: actions/github-script@v7\n              with:\n                  result-encoding: string\n                  script: |\n                      let output = '';\n                      let outerr = '';\n\n                      await exec.exec(\n                        `pnpm run -r lint:ts`,\n                        [],\n                        {\n                          // silent: true,\n                          ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                output += data.toString();\n                            },\n                            stderr: (data) => {\n                                outerr += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      if (outerr) {\n                        return `:x: Some command execution errors, no business errors.`;\n                      }\n\n                      const errorMatch = output.match(/error TS/g);\n\n                      if (errorMatch) {\n                        return `:x: ${errorMatch?.length} errors`;\n                      }\n\n                      return `:white_check_mark: ${'0 error'}`;\n```\n<!--hexo-->\n\n# unitTest\n\n和eslint的配置大同小异，只是改了对检测结果的判断。唯一的区别是jest的检测结果是输出到stderr，见https://github.com/jestjs/jest/issues/5064。\n\n```yaml\nunitTest:\n        runs-on: ubuntu-latest\n        needs: [init]\n        outputs:\n            result: ${{ steps.lint.outputs.result }}\n        steps:\n            - name: Init repo\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n\n            - name: Init pnpm\n              uses: pnpm/action-setup@v2\n              with:\n                  version: 8\n\n            - name: Init node\n              uses: actions/setup-node@v4\n              with:\n                  node-version: 20\n                  cache: 'pnpm'\n\n            - name: Install dependencies\n              run: pnpm install\n\n            - name: Run lint\n              id: lint\n              uses: actions/github-script@v7\n              with:\n                  result-encoding: string\n                  script: |\n                      let output = '';\n                      let outerr = '';\n\n                      await exec.exec(\n                        `pnpm run test`,\n                        [],\n                        {\n                          // silent: true,\n                          ignoreReturnCode: true,\n                          listeners: {\n                            stdout: (data) => {\n                                output += data.toString();\n                            },\n                            stderr: (data) => {\n                                outerr += data.toString();\n                            },\n                          },\n                        }\n                      );\n\n                      // why use outerr? https://github.com/jestjs/jest/issues/5064\n\n                      const failMatch = outerr.match(/Test Suites: \\d+ failed/);\n\n                      if (failMatch) {\n                        return `:x: ${failMatch?.[0]}`;\n                      }\n\n                      const errorMatch = outerr.match(/Jest: \"global\" coverage threshold for lines \\([0-9\\.]+%\\) not met: [0-9\\.]+%/);\n\n                      if (errorMatch) {\n                        return `:x: ${errorMatch?.[0]}`;\n                      }\n\n                      return `:white_check_mark: passed`;\n```\n<!--hexo-->\n\n# replyResult\n\n最后，将几个检测的结果进行汇总，回复到pr里就行了。\n\n```yaml\nreplyResult:\n        runs-on: ubuntu-latest\n        needs: [replyChecking, eslint, typescript, unitTest]\n        steps:\n            - name: Checkout\n              uses: actions/checkout@v4\n              with:\n                  ref: ${{github.head_ref}}\n            - name: Get date time\n              id: getDateTime\n              run: echo \"result=$(TZ=Asia/Shanghai date)\" >> \"$GITHUB_OUTPUT\"\n            - name: Create or update a comment\n              uses: ./.github/actions/unique-comment\n              with:\n                  uniqueIdentifier: ${{ github.workflow }}\n                  body: |\n                      ## Eslint Check Result\n\n                      ${{needs.eslint.outputs.result}}\n\n                      ## Typescript Check Result\n\n                      ${{needs.typescript.outputs.result}}\n\n                      ## UnitTest Check Result\n\n                      ${{needs.unitTest.outputs.result}}\n\n                      ---\n\n                      Commented by Action [${{github.workflow}}](${{github.event.repository.html_url}}/actions/runs/${{github.run_id}}), last updated on ${{steps.getDateTime.outputs.result}}.\n```\n\n和replyChecking差不多，在body里使用`${{needs.eslint.outputs.result}}`去读取了eslint job的outputs。\n\n## 测试\n\n去发起新的pr，故意提交一个有eslint error的js/ts文件，看看表现吧~\n\n","slug":"github-actions-sample-eslint-in-pull-request","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne720014i8ohgkmn24c9","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/36\">https://github.com/taoliujun/blog/issues/36</a></p>\n<!--hexo\n---\nurl: github-actions-sample-eslint-in-pull-request\ntags:\n  - github actions\n---\n-->\n\n<p>一个在pull request发起的时候执行eslint检测的workflow，<a href=\"https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml\">点此查看完整代码</a>，它实现的功能如下：</p>\n<ul>\n<li>在pull request创建、更新的时候执行。</li>\n<li>先回复一个评论，告诉用户正在运行。</li>\n<li>初始化仓库，并安装依赖，产生依赖缓存。</li>\n<li>运行eslint增量检查。</li>\n<li>运行typescript检查。</li>\n<li>运行jest检查。</li>\n<li>更新之前的评论，回复检查的结果。</li>\n</ul>\n<p>运行截图：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e\" alt=\"Alt text\"></p>\n<p>为避免歧义，涉及到github action的术语都是英文的。术语介绍如下：</p>\n<ul>\n<li>workflow，工作流，可以理解为yml文件。</li>\n<li>jobs，工作，一个workflow可以包含多个job，并行执行。</li>\n<li>steps，作业，一个job可以包含多个step，串行执行。</li>\n<li>action，操作，作业中具体的执行。</li>\n</ul>\n<h2 id=\"步骤\"><a href=\"#步骤\" class=\"headerlink\" title=\"步骤\"></a>步骤</h2><ul>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871790603\">初始化workflow</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871806576\">reply checking</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871818126\">.&#x2F;.github&#x2F;actions&#x2F;unique-comment</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871862632\">init</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871862779\">eslint</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871862850\">typescript</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871863037\">unit test</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871863117\">reply result</a></li>\n</ul>\n<!--hexo-->\n\n<h1 id=\"初始化workflow\"><a href=\"#初始化workflow\" class=\"headerlink\" title=\"初始化workflow\"></a>初始化workflow</h1><p>在项目中新建文件<code>.github/workflows/check-pull-request.yml</code>，内容如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">name:</span> <span class=\"string\">test</span> <span class=\"string\">check</span> <span class=\"string\">pull</span> <span class=\"string\">request</span></span><br><span class=\"line\"><span class=\"attr\">run-name:</span> <span class=\"string\">&#x27;check pull request #$<span class=\"template-variable\">&#123;&#123; github.event.pull_request.number &#125;&#125;</span>&#x27;</span></span><br><span class=\"line\"><span class=\"attr\">on:</span></span><br><span class=\"line\">    <span class=\"attr\">pull_request:</span></span><br><span class=\"line\">        <span class=\"attr\">types:</span> [<span class=\"string\">opened</span>, <span class=\"string\">synchronize</span>, <span class=\"string\">reopened</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">replyChecking:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;replyChecking&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">init:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;init&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;eslint&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">typescript:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;typescript&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">unitTest:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;unitTest&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">replyResult:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">replyChecking</span>, <span class=\"string\">eslint</span>, <span class=\"string\">typescript</span>, <span class=\"string\">unitTest</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;replyResult&#x27;</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"name和run-name\"><a href=\"#name和run-name\" class=\"headerlink\" title=\"name和run-name\"></a>name和run-name</h2><p>给workflow命名为<code>check pull request</code>，它会出现在Actions页面的左侧菜单中。运行实例名为<code>check pull request #44</code>，出现在右侧的运行列表中。如图：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/c1371ff2-8fc3-4e5b-8b60-3c572419938b\"></p>\n<p><code>run-name</code>中的<code>$&#123;&#123; github.event.pull_request.number &#125;&#125;</code>是workflow的上下文，这里读取了上下文中的pr编号。</p>\n<h2 id=\"on\"><a href=\"#on\" class=\"headerlink\" title=\"on\"></a>on</h2><p><code>on</code>指定了workflow的触发条件，这里配置了在pr创建、同步、重新打开的时候，触发该workflow。</p>\n<h2 id=\"jobs\"><a href=\"#jobs\" class=\"headerlink\" title=\"jobs\"></a>jobs</h2><p>按照设想，需要定义几个job，分别是：</p>\n<ul>\n<li>replyChecking：回复用户正在检查中</li>\n<li>init：初始化仓库，缓存依赖项</li>\n<li>eslint：运行eslint检查</li>\n<li>typescript：运行typescript检查</li>\n<li>unitTest：运行单元测试</li>\n<li>replyResult：回复用户检查结果</li>\n</ul>\n<p><code>jobs</code>是并行运行的，聪明如你肯定发现了，eslint、typescript、unitTest这三个job会涉及到安装npm依赖，所以它们最好在init后执行，确保依赖已经缓存了。</p>\n<p>其次，replyResult肯定要拿到eslint等job的结果才能执行，所以使用了<code>needs</code>管理它们的执行依赖关系。</p>\n<h3 id=\"runs-on\"><a href=\"#runs-on\" class=\"headerlink\" title=\"runs-on\"></a>runs-on</h3><p>每个job都运行在独立的容器中，github官方提供了windows、macos、linux多种容器，这里使用了ubuntu容器。</p>\n<h2 id=\"测试\"><a href=\"#测试\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>发起一个pr，看到Actions页面出现了新的运行实例，点击进去，可以看到各个job的运行情况和依赖关系：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e\"></p>\n<!--hexo-->\n\n<h1 id=\"replyChecking\"><a href=\"#replyChecking\" class=\"headerlink\" title=\"replyChecking\"></a>replyChecking</h1><p>在进行eslint检测之前，先在pr里回复<code>checking</code>，并且带上拽酷炫的话。将replyChecking改成如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">replyChecking:</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">        <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Checkout</span></span><br><span class=\"line\">          <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">          <span class=\"attr\">with:</span></span><br><span class=\"line\">              <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Get</span> <span class=\"string\">date</span> <span class=\"string\">time</span></span><br><span class=\"line\">          <span class=\"attr\">id:</span> <span class=\"string\">getDateTime</span></span><br><span class=\"line\">          <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;result=$(TZ=Asia/Shanghai date)&quot;</span> <span class=\"string\">&gt;&gt;</span> <span class=\"string\">&quot;$GITHUB_OUTPUT&quot;</span></span><br><span class=\"line\">        <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Create</span> <span class=\"string\">or</span> <span class=\"string\">update</span> <span class=\"string\">a</span> <span class=\"string\">comment</span></span><br><span class=\"line\">          <span class=\"attr\">uses:</span> <span class=\"string\">./.github/actions/unique-comment</span></span><br><span class=\"line\">          <span class=\"attr\">with:</span></span><br><span class=\"line\">              <span class=\"attr\">uniqueIdentifier:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workflow</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">              <span class=\"attr\">body:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                  **Checking...**</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                  <span class=\"string\">---</span></span><br><span class=\"line\"></span><br><span class=\"line\">                  <span class=\"string\">Commented</span> <span class=\"string\">by</span> <span class=\"string\">Action</span> [<span class=\"string\">$<span class=\"template-variable\">&#123;&#123;github.workflow&#125;&#125;</span></span>]<span class=\"string\">($&#123;&#123;github.event.repository.html_url&#125;&#125;/actions/runs/$&#123;&#123;github.run_id&#125;&#125;),</span> <span class=\"string\">last</span> <span class=\"string\">updated</span> <span class=\"string\">on</span> <span class=\"string\">$&#123;&#123;steps.getDateTime.outputs.result&#125;&#125;.</span></span><br></pre></td></tr></table></figure>\n\n<p><code>steps</code>每一步里<code>name</code>、<code>id</code>是可选的，<code>name</code>在Actions详情页面里会显示，更直观的看到step的名称，推荐写上。</p>\n<h2 id=\"Checkout\"><a href=\"#Checkout\" class=\"headerlink\" title=\"Checkout\"></a>Checkout</h2><p><code>uses</code>表示使用一个action，名为<code>actions/checkout@v4</code>，它用来拉取仓库。</p>\n<blockquote>\n<p>同其他编程语言一样，重复的action可以封装起来。<a href=\"https://github.com/marketplace?type=actions\">action市场</a>提供了很多。</p>\n</blockquote>\n<p><code>with</code>属性指定了该action的输入参数，每个action的参数不尽相同。</p>\n<p><code>ref</code>参数表示要拉取的分支，<code>$&#123;&#123;github.head_ref&#125;&#125;</code>也是一个上下文，表示当前pr的源分支。</p>\n<h2 id=\"Get-Date-time\"><a href=\"#Get-Date-time\" class=\"headerlink\" title=\"Get Date time\"></a>Get Date time</h2><p>这step还写了<code>id</code>，表示该step在该job中的唯一标识，为什么要写呢？是为了下一步step能根据<code>id</code>读取到它的<code>output</code>。</p>\n<blockquote>\n<p><strong>output</strong>是workflow中非常重要的概念，它用于在step之间、job之间分享简单的数据。</p>\n</blockquote>\n<p><code>run</code>就是在容器中跑一个命令，这里跑了一个unix bash命令，将当前时间写入到<code>$GITHUB_OUTPUT</code>中，键名为<code>result</code>。</p>\n<blockquote>\n<p><code>$GITHUB_OUTPUT</code>是workflow注入到容器中的一个路径，用于存放output。</p>\n</blockquote>\n<h2 id=\"Create-or-update-a-comment\"><a href=\"#Create-or-update-a-comment\" class=\"headerlink\" title=\"Create or update a comment\"></a>Create or update a comment</h2><p><code>uses</code>使用了本地的action，这个action用于创建或更新一个唯一回复，下一节说。</p>\n<blockquote>\n<p>有时候，官方或市场的action并不能满足你的需要，就得自己写一个了。</p>\n</blockquote>\n<p>同理，该action也有<code>with</code>属性，<code>uniqueIdentifier</code>是回复评论的唯一标识，<code>body</code>是回复的内容，内容使用了markdown语法，里面还涉及到上下文不一一细讲了。只说<code>$&#123;&#123;steps.getDateTime.outputs.result&#125;&#125;</code>这个上下文表示获取getDateTime这个step中，键名为<code>result</code>的值。</p>\n<p>如果你不需要在内容里插入时间，那么上面的<code>Get Date time</code>就可以省略了。</p>\n<h2 id=\"测试-1\"><a href=\"#测试-1\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>因为我已经有完整的代码了，所以运行后，pr中会有一个回复，如图：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/42396a84-b798-4f4e-9f39-5bf92a8acb15\"></p>\n<!--hexo-->\n\n<h1 id=\"x2F-github-x2F-actions-x2F-unique-comment\"><a href=\"#x2F-github-x2F-actions-x2F-unique-comment\" class=\"headerlink\" title=\".&#x2F;.github&#x2F;actions&#x2F;unique-comment\"></a>.&#x2F;.github&#x2F;actions&#x2F;unique-comment</h1><p>这是一个封装的javascript action，用于对issue创建、更新唯一评论。</p>\n<h2 id=\"目录结构\"><a href=\"#目录结构\" class=\"headerlink\" title=\"目录结构\"></a>目录结构</h2><p>创建目录<code>./.github/actions/unique-comment</code>，最终目录结构如下：</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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><br><span class=\"line\">├── action.yml</span><br><span class=\"line\">├── config</span><br><span class=\"line\">│   └── webpack.config.js</span><br><span class=\"line\">├── dist</span><br><span class=\"line\">│   ├── index.js</span><br><span class=\"line\">│   └── index.js.LICENSE.txt</span><br><span class=\"line\">├── package.json</span><br><span class=\"line\">└── src</span><br><span class=\"line\">    └── index.js</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"action-yml\"><a href=\"#action-yml\" class=\"headerlink\" title=\"action.yml\"></a>action.yml</h2><p>这是action的配置文件，必须存在，内容如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">name:</span> <span class=\"string\">unique-comment</span></span><br><span class=\"line\"><span class=\"attr\">description:</span> <span class=\"string\">create</span> <span class=\"string\">or</span> <span class=\"string\">update</span> <span class=\"string\">a</span> <span class=\"string\">unique</span> <span class=\"string\">comment</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">runs:</span></span><br><span class=\"line\">    <span class=\"attr\">using:</span> <span class=\"string\">&#x27;node20&#x27;</span></span><br><span class=\"line\">    <span class=\"attr\">main:</span> <span class=\"string\">&#x27;./dist/index.js&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">inputs:</span></span><br><span class=\"line\">    <span class=\"attr\">token:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;GitHub token&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.token</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">owner:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Repository owner&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.event.repository.owner.login</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">repo:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Repository name&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.event.repository.name</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">issue_number:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Issue number&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.event.number</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">body:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Comment body&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">    <span class=\"attr\">uniqueIdentifier:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Unique identifier for comment&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">&#x27;unique-comment&#x27;</span></span><br></pre></td></tr></table></figure>\n\n<p>大部分属性不一一细讲了，都是简单的英文望文生义即可。</p>\n<p><code>runs</code>表示运行在<code>node20</code>环境下，入口文件为<code>./dist/index.js</code>。</p>\n<p><code>inputs</code>表示接受的参数，也就是之前提到的<code>with</code>属性里要输入的参数。用<code>required</code>表示是否必须传入，<code>default</code>表示默认值。</p>\n<h2 id=\"src-x2F-index-js\"><a href=\"#src-x2F-index-js\" class=\"headerlink\" title=\"src&#x2F;index.js\"></a>src&#x2F;index.js</h2><p>为什么入口文件是<code>dist/index.js</code>，而不是<code>src/index.js</code>呢？因为要引用一些github官方提供的快捷操作github REST API的js包去操作issue评论(pull request也是一种issue)，最终打包后的文件才能在工作流中稳妥的运行。所以，写好<code>src/index.js</code>，再打包就行。</p>\n<p>该文件代码如下：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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> core = <span class=\"built_in\">require</span>(<span class=\"string\">&#x27;@actions/core&#x27;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> github = <span class=\"built_in\">require</span>(<span class=\"string\">&#x27;@actions/github&#x27;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title function_\">main</span> = <span class=\"keyword\">async</span> (<span class=\"params\"></span>) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> token = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;token&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> owner = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;owner&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> repo = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;repo&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> issueNumber = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;issue_number&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> uniqueIdentifier = <span class=\"string\">`[^uniqueIdentifier]: <span class=\"subst\">$&#123;core.getInput(<span class=\"string\">&#x27;uniqueIdentifier&#x27;</span>)&#125;</span>`</span>;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> body = <span class=\"string\">`<span class=\"subst\">$&#123;core.getInput(<span class=\"string\">&#x27;body&#x27;</span>)&#125;</span>\\n\\n<span class=\"subst\">$&#123;uniqueIdentifier&#125;</span>`</span>;</span><br><span class=\"line\"></span><br><span class=\"line\">    core.<span class=\"title function_\">debug</span>(<span class=\"string\">`uniqueIdentifier is <span class=\"subst\">$&#123;uniqueIdentifier&#125;</span>`</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> octokit = github.<span class=\"title function_\">getOctokit</span>(token);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> comments = <span class=\"keyword\">await</span> octokit.<span class=\"property\">rest</span>.<span class=\"property\">issues</span>.<span class=\"title function_\">listComments</span>(&#123;</span><br><span class=\"line\">        owner,</span><br><span class=\"line\">        repo,</span><br><span class=\"line\">        <span class=\"attr\">issue_number</span>: issueNumber,</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> botComment = comments.<span class=\"property\">data</span>.<span class=\"title function_\">find</span>(<span class=\"function\">(<span class=\"params\">v</span>) =&gt;</span> v.<span class=\"property\">body</span>.<span class=\"title function_\">includes</span>(uniqueIdentifier));</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">if</span> (botComment) &#123;</span><br><span class=\"line\">        core.<span class=\"title function_\">info</span>(<span class=\"string\">&#x27;update comment successfully.&#x27;</span>);</span><br><span class=\"line\">        <span class=\"keyword\">await</span> octokit.<span class=\"property\">rest</span>.<span class=\"property\">issues</span>.<span class=\"title function_\">updateComment</span>(&#123;</span><br><span class=\"line\">            owner,</span><br><span class=\"line\">            repo,</span><br><span class=\"line\">            <span class=\"attr\">comment_id</span>: botComment.<span class=\"property\">id</span>,</span><br><span class=\"line\">            body,</span><br><span class=\"line\">        &#125;);</span><br><span class=\"line\">    &#125; <span class=\"keyword\">else</span> &#123;</span><br><span class=\"line\">        core.<span class=\"title function_\">info</span>(<span class=\"string\">&#x27;create comment successfully.&#x27;</span>);</span><br><span class=\"line\">        <span class=\"keyword\">await</span> octokit.<span class=\"property\">rest</span>.<span class=\"property\">issues</span>.<span class=\"title function_\">createComment</span>(&#123;</span><br><span class=\"line\">            owner,</span><br><span class=\"line\">            repo,</span><br><span class=\"line\">            <span class=\"attr\">issue_number</span>: issueNumber,</span><br><span class=\"line\">            body,</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=\"keyword\">try</span> &#123;</span><br><span class=\"line\">    <span class=\"title function_\">main</span>();</span><br><span class=\"line\">&#125; <span class=\"keyword\">catch</span> (err) &#123;</span><br><span class=\"line\">    core.<span class=\"title function_\">setFailed</span>(err.<span class=\"property\">message</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><code>@actions/core</code>和<code>@actions/github</code>是github官方提供的js包，前者可以方便的读取入参等，后者可以方便的操作github REST API。</p>\n<p><code>main</code>函数的代码就是原生javascript，不一一解释了，主要通过<code>uniqueIdentifier</code>来判断是否发布过评论，如果是，就更新评论，否则就创建评论。</p>\n<blockquote>\n<p>markdown语法<code>[^uniqueIdentifier]</code>表示脚注，不会被渲染。</p>\n</blockquote>\n<p><code>core.setFailed(err.message);</code>表示抛出退出代码。</p>\n<h2 id=\"config-x2F-webpack-config-js\"><a href=\"#config-x2F-webpack-config-js\" class=\"headerlink\" title=\"config&#x2F;webpack.config.js\"></a>config&#x2F;webpack.config.js</h2><p>打包用的，配置简单可用即可：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br></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\">mode</span>: <span class=\"string\">&#x27;production&#x27;</span>,</span><br><span class=\"line\">    <span class=\"attr\">target</span>: <span class=\"string\">&#x27;node20&#x27;</span>,</span><br><span class=\"line\">    <span class=\"attr\">entry</span>: <span class=\"string\">&#x27;./src/index.js&#x27;</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\">&#x27;index.js&#x27;</span>,</span><br><span class=\"line\">        <span class=\"attr\">clean</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>\n\n<h2 id=\"package-json\"><a href=\"#package-json\" class=\"headerlink\" title=\"package.json\"></a>package.json</h2><figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;name&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;unique-comment&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;version&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;1.0.0&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;private&quot;</span><span class=\"punctuation\">:</span> <span class=\"literal\"><span class=\"keyword\">true</span></span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;scripts&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;build&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;webpack --config ./config/webpack.config.js&quot;</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;dependencies&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;@actions/core&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^1.10.1&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;@actions/github&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^6.0.0&quot;</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;devDependencies&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;webpack&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^5.89.0&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;webpack-cli&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^5.1.4&quot;</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span></span><br></pre></td></tr></table></figure>\n\n<p>没啥好说的，列出了依赖项。和一个打包脚本。</p>\n<h2 id=\"测试-2\"><a href=\"#测试-2\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>修改了<code>src/index.js</code>得<code>build</code>，然后push到github仓库。</p>\n<p>记得将<strong>dist</strong>目录也提交到github仓库。</p>\n<!--hexo-->\n\n<h1 id=\"init\"><a href=\"#init\" class=\"headerlink\" title=\"init\"></a>init</h1><p>现在，开始搞正经的了。</p>\n<p>先初始化项目，这个job的目的仅仅是为了缓存pnpm依赖项，如果你的项目的依赖项不经常更新，可以省略这个job，后续也不要<code>needs</code>这个job。</p>\n<p>将init改成如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">init:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br></pre></td></tr></table></figure>\n\n<p>相信经过对之前的job的了解，这里的配置就看起来很简单了。</p>\n<h2 id=\"Init-pnpm\"><a href=\"#Init-pnpm\" class=\"headerlink\" title=\"Init pnpm\"></a>Init pnpm</h2><p>使用第三方action，安装pnpm@^8。</p>\n<h2 id=\"Init-node\"><a href=\"#Init-node\" class=\"headerlink\" title=\"Init node\"></a>Init node</h2><p><code>cache: &#39;pnpm&#39;</code>指定缓存机制，它内部是利用了workflow的cache机制。</p>\n<h2 id=\"Install-dependencies\"><a href=\"#Install-dependencies\" class=\"headerlink\" title=\"Install dependencies\"></a>Install dependencies</h2><p>安装依赖项，触发缓存。</p>\n<!--hexo-->\n\n<h1 id=\"eslint\"><a href=\"#eslint\" class=\"headerlink\" title=\"eslint\"></a>eslint</h1><p>将eslint改成如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">outputs:</span></span><br><span class=\"line\">            <span class=\"attr\">result:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">steps.lint.outputs.result</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\">                  <span class=\"attr\">fetch-depth:</span> <span class=\"number\">0</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Run</span> <span class=\"string\">eslint</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/github-script@v7</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">result-encoding:</span> <span class=\"string\">string</span></span><br><span class=\"line\">                  <span class=\"attr\">script:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      let output = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let outerr = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let diffFiles = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">await</span> <span class=\"string\">exec.exec(</span></span><br><span class=\"line\">                        <span class=\"string\">`git</span> <span class=\"string\">diff</span> <span class=\"string\">--name-only</span> <span class=\"string\">origin/$&#123;&#123;github.base_ref&#125;&#125;`,</span></span><br><span class=\"line\">                        []<span class=\"string\">,</span></span><br><span class=\"line\">                        &#123;</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">silent:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">ignoreReturnCode:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">listeners:</span> &#123;</span><br><span class=\"line\">                            <span class=\"attr\">stdout:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">diffFiles</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</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=\"string\">);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">lintFiles</span> <span class=\"string\">=</span> <span class=\"string\">diffFiles.split(`\\n`).filter((file)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">file.endsWith(&#x27;.js&#x27;)</span> <span class=\"string\">||</span> <span class=\"string\">file.endsWith(&#x27;.ts&#x27;)</span> <span class=\"string\">||</span> <span class=\"string\">file.endsWith(&#x27;.tsx&#x27;)</span></span><br><span class=\"line\">                      &#125;<span class=\"string\">).join(&#x27;</span> <span class=\"string\">&#x27;);</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      await exec.exec(</span></span><br><span class=\"line\"><span class=\"string\">                        // &quot;pnpm run lint --format stylish&quot;,</span></span><br><span class=\"line\"><span class=\"string\">                        `pnpm eslint $&#123;lintFiles&#125;`,</span></span><br><span class=\"line\"><span class=\"string\">                        [],</span></span><br><span class=\"line\"><span class=\"string\">                        &#123;</span></span><br><span class=\"line\"><span class=\"string\">                          // silent: true,</span></span><br><span class=\"line\"><span class=\"string\">                          ignoreReturnCode: true,</span></span><br><span class=\"line\"><span class=\"string\">                          listeners: &#123;</span></span><br><span class=\"line\"><span class=\"string\">                            stdout: (data) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"string\">                                output += data.toString();</span></span><br><span class=\"line\"><span class=\"string\">                            &#125;,</span></span><br><span class=\"line\"><span class=\"string\">                            stderr: (data) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"string\">                                outerr += data.toString();</span></span><br><span class=\"line\"><span class=\"string\">                            &#125;,</span></span><br><span class=\"line\"><span class=\"string\">                          &#125;,</span></span><br><span class=\"line\"><span class=\"string\">                        &#125;</span></span><br><span class=\"line\"><span class=\"string\">                      );</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      if (outerr) &#123;</span></span><br><span class=\"line\"><span class=\"string\">                        return `:x: Some command execution errors, non-eslint business errors.`;</span></span><br><span class=\"line\"><span class=\"string\">                      &#125;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      const errorMatch = output.match(/(\\d+) errors?/);</span></span><br><span class=\"line\"><span class=\"string\">                      const warnMatch = output.match(/(\\d+) warnings?/);</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      if (errorMatch &amp;&amp; errorMatch?.[1] !== &#x27;</span><span class=\"number\">0</span><span class=\"string\">&#x27;) &#123;</span></span><br><span class=\"line\"><span class=\"string\">                        return `:x: $&#123;errorMatch?.[0]&#125; $&#123;warnMatch?.[0]&#125;`;</span></span><br><span class=\"line\"><span class=\"string\">                      &#125;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      return `:white_check_mark: $&#123;errorMatch?.[0] || &#x27;</span><span class=\"number\">0</span> <span class=\"string\">error&#x27;&#125;</span> <span class=\"string\">$&#123;warnMatch?.[0]</span> <span class=\"string\">||</span> <span class=\"string\">&#x27;0 warning&#x27;</span><span class=\"string\">&#125;`;</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"needs\"><a href=\"#needs\" class=\"headerlink\" title=\"needs\"></a>needs</h2><p>使用<code>needs</code>依赖init，可以使用到pnpm的缓存项，防止install太慢。</p>\n<blockquote>\n<p>因为eslint、typescript、unitTest都需要pnpm install，所以一个前置的init去缓存pnpm依赖项，可以加快后续的install速度。</p>\n</blockquote>\n<h2 id=\"outputs\"><a href=\"#outputs\" class=\"headerlink\" title=\"outputs\"></a>outputs</h2><p>job里的outputs，可以在依赖它的其他job中访问到。这里使用<code>$&#123;&#123; steps.lint.outputs.result &#125;&#125;</code>去获取该job中lint这个step里的output里的result。</p>\n<blockquote>\n<p>output有job和step两个维度，注意区分。</p>\n</blockquote>\n<h2 id=\"Run-eslint\"><a href=\"#Run-eslint\" class=\"headerlink\" title=\"Run eslint\"></a>Run eslint</h2><p>它uses了<code>actions/github-script@v7</code>，这是github官方提供的一个action，可以在<code>with.script</code>里写js代码去执行，同时它会注入一些变量到script中去，见它的<a href=\"https://github.com/actions/github-script/tree/v7/\">官方文档</a>。</p>\n<blockquote>\n<p>对于简单的js代码，可以使用这个action去完成，不用再去写一个js文件。</p>\n</blockquote>\n<p><code>result-encoding</code>是指定script返回的数据格式的，默认是json，这指定为string。</p>\n<blockquote>\n<p>为什么script里return了string，还要指定为string呢？<br>因为<code>return &#39;hello&#39;</code>在json encode后是<code>&#39;&quot;hello&quot;&#39;</code>，而string encode后为<code>&#39;hello&#39;</code>。</p>\n</blockquote>\n<p>script里是原生的js代码了，里面的<code>exec</code>是该action注入的变量，用来执行shell命令。</p>\n<p>这段js代码做了两个事情，一是<code>git diff</code>获取pr中改动的文件列表，二是<code>eslint</code>检查这些增量文件，最后返回处理的结果。</p>\n<h2 id=\"fetch-depth\"><a href=\"#fetch-depth\" class=\"headerlink\" title=\"fetch-depth\"></a>fetch-depth</h2><p>Init repo这个step里设置了<code>fetch-depth: 0</code>，不然获取不到完整的git分支，具体看<code>actions/checkout</code>的解释，涉及到git的知识不展开细说了。</p>\n<h2 id=\"steps-lint-outputs-result\"><a href=\"#steps-lint-outputs-result\" class=\"headerlink\" title=\"steps.lint.outputs.result\"></a>steps.lint.outputs.result</h2><p><code>steps.lint.outputs.result</code>为什么能拿到lint step里的output.result呢？因为<code>actions/github-script</code>这个action内部将script的返回值，设置到<code>$GITHUB_OUTPUT</code>里了，且键名为<code>result</code>。</p>\n<!--hexo-->\n\n<h1 id=\"typescript\"><a href=\"#typescript\" class=\"headerlink\" title=\"typescript\"></a>typescript</h1><p>和eslint的配置大同小异，只是改了对检测结果的判断。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">typescript:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">outputs:</span></span><br><span class=\"line\">            <span class=\"attr\">result:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">steps.lint.outputs.result</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Run</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/github-script@v7</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">result-encoding:</span> <span class=\"string\">string</span></span><br><span class=\"line\">                  <span class=\"attr\">script:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      let output = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let outerr = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">await</span> <span class=\"string\">exec.exec(</span></span><br><span class=\"line\">                        <span class=\"string\">`pnpm</span> <span class=\"string\">run</span> <span class=\"string\">-r</span> <span class=\"string\">lint:ts`,</span></span><br><span class=\"line\">                        []<span class=\"string\">,</span></span><br><span class=\"line\">                        &#123;</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">silent:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">ignoreReturnCode:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">listeners:</span> &#123;</span><br><span class=\"line\">                            <span class=\"attr\">stdout:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">output</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</span></span><br><span class=\"line\">                            &#125;,</span><br><span class=\"line\">                            <span class=\"attr\">stderr:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">outerr</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</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=\"string\">);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(outerr)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">Some</span> <span class=\"string\">command</span> <span class=\"string\">execution</span> <span class=\"string\">errors</span>, <span class=\"literal\">no</span> <span class=\"string\">business</span> <span class=\"string\">errors.`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">errorMatch</span> <span class=\"string\">=</span> <span class=\"string\">output.match(/error</span> <span class=\"string\">TS/g);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(errorMatch)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">$</span>&#123;<span class=\"string\">errorMatch?.length</span>&#125; <span class=\"string\">errors`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">return</span> <span class=\"string\">`:white_check_mark:</span> <span class=\"string\">$&#123;&#x27;0</span> <span class=\"string\">error&#x27;&#125;`;</span></span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"unitTest\"><a href=\"#unitTest\" class=\"headerlink\" title=\"unitTest\"></a>unitTest</h1><p>和eslint的配置大同小异，只是改了对检测结果的判断。唯一的区别是jest的检测结果是输出到stderr，见<a href=\"https://github.com/jestjs/jest/issues/5064%E3%80%82\">https://github.com/jestjs/jest/issues/5064。</a></p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">unitTest:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">outputs:</span></span><br><span class=\"line\">            <span class=\"attr\">result:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">steps.lint.outputs.result</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Run</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/github-script@v7</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">result-encoding:</span> <span class=\"string\">string</span></span><br><span class=\"line\">                  <span class=\"attr\">script:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      let output = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let outerr = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">await</span> <span class=\"string\">exec.exec(</span></span><br><span class=\"line\">                        <span class=\"string\">`pnpm</span> <span class=\"string\">run</span> <span class=\"string\">test`,</span></span><br><span class=\"line\">                        []<span class=\"string\">,</span></span><br><span class=\"line\">                        &#123;</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">silent:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">ignoreReturnCode:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">listeners:</span> &#123;</span><br><span class=\"line\">                            <span class=\"attr\">stdout:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">output</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</span></span><br><span class=\"line\">                            &#125;,</span><br><span class=\"line\">                            <span class=\"attr\">stderr:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">outerr</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</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=\"string\">);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">//</span> <span class=\"string\">why</span> <span class=\"string\">use</span> <span class=\"string\">outerr?</span> <span class=\"string\">https://github.com/jestjs/jest/issues/5064</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">failMatch</span> <span class=\"string\">=</span> <span class=\"string\">outerr.match(/Test</span> <span class=\"attr\">Suites:</span> <span class=\"string\">\\d+</span> <span class=\"string\">failed/);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(failMatch)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">$</span>&#123;<span class=\"string\">failMatch?.</span>[<span class=\"number\">0</span>]&#125;<span class=\"string\">`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">errorMatch</span> <span class=\"string\">=</span> <span class=\"string\">outerr.match(/Jest:</span> <span class=\"string\">&quot;global&quot;</span> <span class=\"string\">coverage</span> <span class=\"string\">threshold</span> <span class=\"string\">for</span> <span class=\"string\">lines</span> <span class=\"string\">\\([0-9\\.]+%\\)</span> <span class=\"attr\">not met:</span> [<span class=\"number\">0</span><span class=\"number\">-9</span><span class=\"string\">\\.</span>]<span class=\"string\">+%/);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(errorMatch)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">$</span>&#123;<span class=\"string\">errorMatch?.</span>[<span class=\"number\">0</span>]&#125;<span class=\"string\">`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">return</span> <span class=\"string\">`:white_check_mark:</span> <span class=\"string\">passed`;</span></span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"replyResult\"><a href=\"#replyResult\" class=\"headerlink\" title=\"replyResult\"></a>replyResult</h1><p>最后，将几个检测的结果进行汇总，回复到pr里就行了。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">replyResult:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">replyChecking</span>, <span class=\"string\">eslint</span>, <span class=\"string\">typescript</span>, <span class=\"string\">unitTest</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Checkout</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Get</span> <span class=\"string\">date</span> <span class=\"string\">time</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">getDateTime</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;result=$(TZ=Asia/Shanghai date)&quot;</span> <span class=\"string\">&gt;&gt;</span> <span class=\"string\">&quot;$GITHUB_OUTPUT&quot;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Create</span> <span class=\"string\">or</span> <span class=\"string\">update</span> <span class=\"string\">a</span> <span class=\"string\">comment</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">./.github/actions/unique-comment</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">uniqueIdentifier:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workflow</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">                  <span class=\"attr\">body:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      ## Eslint Check Result</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">$&#123;&#123;needs.eslint.outputs.result&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"comment\">## Typescript Check Result</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">$&#123;&#123;needs.typescript.outputs.result&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"comment\">## UnitTest Check Result</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">$&#123;&#123;needs.unitTest.outputs.result&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">---</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">Commented</span> <span class=\"string\">by</span> <span class=\"string\">Action</span> [<span class=\"string\">$<span class=\"template-variable\">&#123;&#123;github.workflow&#125;&#125;</span></span>]<span class=\"string\">($&#123;&#123;github.event.repository.html_url&#125;&#125;/actions/runs/$&#123;&#123;github.run_id&#125;&#125;),</span> <span class=\"string\">last</span> <span class=\"string\">updated</span> <span class=\"string\">on</span> <span class=\"string\">$&#123;&#123;steps.getDateTime.outputs.result&#125;&#125;.</span></span><br></pre></td></tr></table></figure>\n\n<p>和replyChecking差不多，在body里使用<code>$&#123;&#123;needs.eslint.outputs.result&#125;&#125;</code>去读取了eslint job的outputs。</p>\n<h2 id=\"测试-3\"><a href=\"#测试-3\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>去发起新的pr，故意提交一个有eslint error的js&#x2F;ts文件，看看表现吧~</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/36\">https://github.com/taoliujun/blog/issues/36</a></p>\n<!--hexo\n---\nurl: github-actions-sample-eslint-in-pull-request\ntags:\n  - github actions\n---\n-->\n\n<p>一个在pull request发起的时候执行eslint检测的workflow，<a href=\"https://github.com/taoliujun/npm-packages/blob/master/.github/workflows/check-pull-request.yml\">点此查看完整代码</a>，它实现的功能如下：</p>\n<ul>\n<li>在pull request创建、更新的时候执行。</li>\n<li>先回复一个评论，告诉用户正在运行。</li>\n<li>初始化仓库，并安装依赖，产生依赖缓存。</li>\n<li>运行eslint增量检查。</li>\n<li>运行typescript检查。</li>\n<li>运行jest检查。</li>\n<li>更新之前的评论，回复检查的结果。</li>\n</ul>\n<p>运行截图：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e\" alt=\"Alt text\"></p>\n<p>为避免歧义，涉及到github action的术语都是英文的。术语介绍如下：</p>\n<ul>\n<li>workflow，工作流，可以理解为yml文件。</li>\n<li>jobs，工作，一个workflow可以包含多个job，并行执行。</li>\n<li>steps，作业，一个job可以包含多个step，串行执行。</li>\n<li>action，操作，作业中具体的执行。</li>\n</ul>\n<h2 id=\"步骤\"><a href=\"#步骤\" class=\"headerlink\" title=\"步骤\"></a>步骤</h2><ul>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871790603\">初始化workflow</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871806576\">reply checking</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871818126\">.&#x2F;.github&#x2F;actions&#x2F;unique-comment</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871862632\">init</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871862779\">eslint</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871862850\">typescript</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871863037\">unit test</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/36#issuecomment-1871863117\">reply result</a></li>\n</ul>\n<!--hexo-->\n\n<h1 id=\"初始化workflow\"><a href=\"#初始化workflow\" class=\"headerlink\" title=\"初始化workflow\"></a>初始化workflow</h1><p>在项目中新建文件<code>.github/workflows/check-pull-request.yml</code>，内容如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">name:</span> <span class=\"string\">test</span> <span class=\"string\">check</span> <span class=\"string\">pull</span> <span class=\"string\">request</span></span><br><span class=\"line\"><span class=\"attr\">run-name:</span> <span class=\"string\">&#x27;check pull request #$<span class=\"template-variable\">&#123;&#123; github.event.pull_request.number &#125;&#125;</span>&#x27;</span></span><br><span class=\"line\"><span class=\"attr\">on:</span></span><br><span class=\"line\">    <span class=\"attr\">pull_request:</span></span><br><span class=\"line\">        <span class=\"attr\">types:</span> [<span class=\"string\">opened</span>, <span class=\"string\">synchronize</span>, <span class=\"string\">reopened</span>]</span><br><span class=\"line\"><span class=\"attr\">jobs:</span></span><br><span class=\"line\">    <span class=\"attr\">replyChecking:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;replyChecking&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">init:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;init&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;eslint&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">typescript:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;typescript&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">unitTest:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;unitTest&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">replyResult:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">replyChecking</span>, <span class=\"string\">eslint</span>, <span class=\"string\">typescript</span>, <span class=\"string\">unitTest</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&#x27;replyResult&#x27;</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"name和run-name\"><a href=\"#name和run-name\" class=\"headerlink\" title=\"name和run-name\"></a>name和run-name</h2><p>给workflow命名为<code>check pull request</code>，它会出现在Actions页面的左侧菜单中。运行实例名为<code>check pull request #44</code>，出现在右侧的运行列表中。如图：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/c1371ff2-8fc3-4e5b-8b60-3c572419938b\"></p>\n<p><code>run-name</code>中的<code>$&#123;&#123; github.event.pull_request.number &#125;&#125;</code>是workflow的上下文，这里读取了上下文中的pr编号。</p>\n<h2 id=\"on\"><a href=\"#on\" class=\"headerlink\" title=\"on\"></a>on</h2><p><code>on</code>指定了workflow的触发条件，这里配置了在pr创建、同步、重新打开的时候，触发该workflow。</p>\n<h2 id=\"jobs\"><a href=\"#jobs\" class=\"headerlink\" title=\"jobs\"></a>jobs</h2><p>按照设想，需要定义几个job，分别是：</p>\n<ul>\n<li>replyChecking：回复用户正在检查中</li>\n<li>init：初始化仓库，缓存依赖项</li>\n<li>eslint：运行eslint检查</li>\n<li>typescript：运行typescript检查</li>\n<li>unitTest：运行单元测试</li>\n<li>replyResult：回复用户检查结果</li>\n</ul>\n<p><code>jobs</code>是并行运行的，聪明如你肯定发现了，eslint、typescript、unitTest这三个job会涉及到安装npm依赖，所以它们最好在init后执行，确保依赖已经缓存了。</p>\n<p>其次，replyResult肯定要拿到eslint等job的结果才能执行，所以使用了<code>needs</code>管理它们的执行依赖关系。</p>\n<h3 id=\"runs-on\"><a href=\"#runs-on\" class=\"headerlink\" title=\"runs-on\"></a>runs-on</h3><p>每个job都运行在独立的容器中，github官方提供了windows、macos、linux多种容器，这里使用了ubuntu容器。</p>\n<h2 id=\"测试\"><a href=\"#测试\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>发起一个pr，看到Actions页面出现了新的运行实例，点击进去，可以看到各个job的运行情况和依赖关系：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/09c86bc1-ada1-41c3-9f8f-7e6c46f8204e\"></p>\n<!--hexo-->\n\n<h1 id=\"replyChecking\"><a href=\"#replyChecking\" class=\"headerlink\" title=\"replyChecking\"></a>replyChecking</h1><p>在进行eslint检测之前，先在pr里回复<code>checking</code>，并且带上拽酷炫的话。将replyChecking改成如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">replyChecking:</span></span><br><span class=\"line\">    <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">    <span class=\"attr\">steps:</span></span><br><span class=\"line\">        <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Checkout</span></span><br><span class=\"line\">          <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">          <span class=\"attr\">with:</span></span><br><span class=\"line\">              <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Get</span> <span class=\"string\">date</span> <span class=\"string\">time</span></span><br><span class=\"line\">          <span class=\"attr\">id:</span> <span class=\"string\">getDateTime</span></span><br><span class=\"line\">          <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;result=$(TZ=Asia/Shanghai date)&quot;</span> <span class=\"string\">&gt;&gt;</span> <span class=\"string\">&quot;$GITHUB_OUTPUT&quot;</span></span><br><span class=\"line\">        <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Create</span> <span class=\"string\">or</span> <span class=\"string\">update</span> <span class=\"string\">a</span> <span class=\"string\">comment</span></span><br><span class=\"line\">          <span class=\"attr\">uses:</span> <span class=\"string\">./.github/actions/unique-comment</span></span><br><span class=\"line\">          <span class=\"attr\">with:</span></span><br><span class=\"line\">              <span class=\"attr\">uniqueIdentifier:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workflow</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">              <span class=\"attr\">body:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                  **Checking...**</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                  <span class=\"string\">---</span></span><br><span class=\"line\"></span><br><span class=\"line\">                  <span class=\"string\">Commented</span> <span class=\"string\">by</span> <span class=\"string\">Action</span> [<span class=\"string\">$<span class=\"template-variable\">&#123;&#123;github.workflow&#125;&#125;</span></span>]<span class=\"string\">($&#123;&#123;github.event.repository.html_url&#125;&#125;/actions/runs/$&#123;&#123;github.run_id&#125;&#125;),</span> <span class=\"string\">last</span> <span class=\"string\">updated</span> <span class=\"string\">on</span> <span class=\"string\">$&#123;&#123;steps.getDateTime.outputs.result&#125;&#125;.</span></span><br></pre></td></tr></table></figure>\n\n<p><code>steps</code>每一步里<code>name</code>、<code>id</code>是可选的，<code>name</code>在Actions详情页面里会显示，更直观的看到step的名称，推荐写上。</p>\n<h2 id=\"Checkout\"><a href=\"#Checkout\" class=\"headerlink\" title=\"Checkout\"></a>Checkout</h2><p><code>uses</code>表示使用一个action，名为<code>actions/checkout@v4</code>，它用来拉取仓库。</p>\n<blockquote>\n<p>同其他编程语言一样，重复的action可以封装起来。<a href=\"https://github.com/marketplace?type=actions\">action市场</a>提供了很多。</p>\n</blockquote>\n<p><code>with</code>属性指定了该action的输入参数，每个action的参数不尽相同。</p>\n<p><code>ref</code>参数表示要拉取的分支，<code>$&#123;&#123;github.head_ref&#125;&#125;</code>也是一个上下文，表示当前pr的源分支。</p>\n<h2 id=\"Get-Date-time\"><a href=\"#Get-Date-time\" class=\"headerlink\" title=\"Get Date time\"></a>Get Date time</h2><p>这step还写了<code>id</code>，表示该step在该job中的唯一标识，为什么要写呢？是为了下一步step能根据<code>id</code>读取到它的<code>output</code>。</p>\n<blockquote>\n<p><strong>output</strong>是workflow中非常重要的概念，它用于在step之间、job之间分享简单的数据。</p>\n</blockquote>\n<p><code>run</code>就是在容器中跑一个命令，这里跑了一个unix bash命令，将当前时间写入到<code>$GITHUB_OUTPUT</code>中，键名为<code>result</code>。</p>\n<blockquote>\n<p><code>$GITHUB_OUTPUT</code>是workflow注入到容器中的一个路径，用于存放output。</p>\n</blockquote>\n<h2 id=\"Create-or-update-a-comment\"><a href=\"#Create-or-update-a-comment\" class=\"headerlink\" title=\"Create or update a comment\"></a>Create or update a comment</h2><p><code>uses</code>使用了本地的action，这个action用于创建或更新一个唯一回复，下一节说。</p>\n<blockquote>\n<p>有时候，官方或市场的action并不能满足你的需要，就得自己写一个了。</p>\n</blockquote>\n<p>同理，该action也有<code>with</code>属性，<code>uniqueIdentifier</code>是回复评论的唯一标识，<code>body</code>是回复的内容，内容使用了markdown语法，里面还涉及到上下文不一一细讲了。只说<code>$&#123;&#123;steps.getDateTime.outputs.result&#125;&#125;</code>这个上下文表示获取getDateTime这个step中，键名为<code>result</code>的值。</p>\n<p>如果你不需要在内容里插入时间，那么上面的<code>Get Date time</code>就可以省略了。</p>\n<h2 id=\"测试-1\"><a href=\"#测试-1\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>因为我已经有完整的代码了，所以运行后，pr中会有一个回复，如图：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/42396a84-b798-4f4e-9f39-5bf92a8acb15\"></p>\n<!--hexo-->\n\n<h1 id=\"x2F-github-x2F-actions-x2F-unique-comment\"><a href=\"#x2F-github-x2F-actions-x2F-unique-comment\" class=\"headerlink\" title=\".&#x2F;.github&#x2F;actions&#x2F;unique-comment\"></a>.&#x2F;.github&#x2F;actions&#x2F;unique-comment</h1><p>这是一个封装的javascript action，用于对issue创建、更新唯一评论。</p>\n<h2 id=\"目录结构\"><a href=\"#目录结构\" class=\"headerlink\" title=\"目录结构\"></a>目录结构</h2><p>创建目录<code>./.github/actions/unique-comment</code>，最终目录结构如下：</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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><br><span class=\"line\">├── action.yml</span><br><span class=\"line\">├── config</span><br><span class=\"line\">│   └── webpack.config.js</span><br><span class=\"line\">├── dist</span><br><span class=\"line\">│   ├── index.js</span><br><span class=\"line\">│   └── index.js.LICENSE.txt</span><br><span class=\"line\">├── package.json</span><br><span class=\"line\">└── src</span><br><span class=\"line\">    └── index.js</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"action-yml\"><a href=\"#action-yml\" class=\"headerlink\" title=\"action.yml\"></a>action.yml</h2><p>这是action的配置文件，必须存在，内容如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">name:</span> <span class=\"string\">unique-comment</span></span><br><span class=\"line\"><span class=\"attr\">description:</span> <span class=\"string\">create</span> <span class=\"string\">or</span> <span class=\"string\">update</span> <span class=\"string\">a</span> <span class=\"string\">unique</span> <span class=\"string\">comment</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">runs:</span></span><br><span class=\"line\">    <span class=\"attr\">using:</span> <span class=\"string\">&#x27;node20&#x27;</span></span><br><span class=\"line\">    <span class=\"attr\">main:</span> <span class=\"string\">&#x27;./dist/index.js&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">inputs:</span></span><br><span class=\"line\">    <span class=\"attr\">token:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;GitHub token&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.token</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">owner:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Repository owner&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.event.repository.owner.login</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">repo:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Repository name&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.event.repository.name</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">issue_number:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Issue number&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.event.number</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">    <span class=\"attr\">body:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Comment body&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">    <span class=\"attr\">uniqueIdentifier:</span></span><br><span class=\"line\">        <span class=\"attr\">description:</span> <span class=\"string\">&#x27;Unique identifier for comment&#x27;</span></span><br><span class=\"line\">        <span class=\"attr\">required:</span> <span class=\"literal\">false</span></span><br><span class=\"line\">        <span class=\"attr\">default:</span> <span class=\"string\">&#x27;unique-comment&#x27;</span></span><br></pre></td></tr></table></figure>\n\n<p>大部分属性不一一细讲了，都是简单的英文望文生义即可。</p>\n<p><code>runs</code>表示运行在<code>node20</code>环境下，入口文件为<code>./dist/index.js</code>。</p>\n<p><code>inputs</code>表示接受的参数，也就是之前提到的<code>with</code>属性里要输入的参数。用<code>required</code>表示是否必须传入，<code>default</code>表示默认值。</p>\n<h2 id=\"src-x2F-index-js\"><a href=\"#src-x2F-index-js\" class=\"headerlink\" title=\"src&#x2F;index.js\"></a>src&#x2F;index.js</h2><p>为什么入口文件是<code>dist/index.js</code>，而不是<code>src/index.js</code>呢？因为要引用一些github官方提供的快捷操作github REST API的js包去操作issue评论(pull request也是一种issue)，最终打包后的文件才能在工作流中稳妥的运行。所以，写好<code>src/index.js</code>，再打包就行。</p>\n<p>该文件代码如下：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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> core = <span class=\"built_in\">require</span>(<span class=\"string\">&#x27;@actions/core&#x27;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> github = <span class=\"built_in\">require</span>(<span class=\"string\">&#x27;@actions/github&#x27;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title function_\">main</span> = <span class=\"keyword\">async</span> (<span class=\"params\"></span>) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> token = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;token&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> owner = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;owner&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> repo = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;repo&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> issueNumber = core.<span class=\"title function_\">getInput</span>(<span class=\"string\">&#x27;issue_number&#x27;</span>);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> uniqueIdentifier = <span class=\"string\">`[^uniqueIdentifier]: <span class=\"subst\">$&#123;core.getInput(<span class=\"string\">&#x27;uniqueIdentifier&#x27;</span>)&#125;</span>`</span>;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> body = <span class=\"string\">`<span class=\"subst\">$&#123;core.getInput(<span class=\"string\">&#x27;body&#x27;</span>)&#125;</span>\\n\\n<span class=\"subst\">$&#123;uniqueIdentifier&#125;</span>`</span>;</span><br><span class=\"line\"></span><br><span class=\"line\">    core.<span class=\"title function_\">debug</span>(<span class=\"string\">`uniqueIdentifier is <span class=\"subst\">$&#123;uniqueIdentifier&#125;</span>`</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> octokit = github.<span class=\"title function_\">getOctokit</span>(token);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> comments = <span class=\"keyword\">await</span> octokit.<span class=\"property\">rest</span>.<span class=\"property\">issues</span>.<span class=\"title function_\">listComments</span>(&#123;</span><br><span class=\"line\">        owner,</span><br><span class=\"line\">        repo,</span><br><span class=\"line\">        <span class=\"attr\">issue_number</span>: issueNumber,</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> botComment = comments.<span class=\"property\">data</span>.<span class=\"title function_\">find</span>(<span class=\"function\">(<span class=\"params\">v</span>) =&gt;</span> v.<span class=\"property\">body</span>.<span class=\"title function_\">includes</span>(uniqueIdentifier));</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">if</span> (botComment) &#123;</span><br><span class=\"line\">        core.<span class=\"title function_\">info</span>(<span class=\"string\">&#x27;update comment successfully.&#x27;</span>);</span><br><span class=\"line\">        <span class=\"keyword\">await</span> octokit.<span class=\"property\">rest</span>.<span class=\"property\">issues</span>.<span class=\"title function_\">updateComment</span>(&#123;</span><br><span class=\"line\">            owner,</span><br><span class=\"line\">            repo,</span><br><span class=\"line\">            <span class=\"attr\">comment_id</span>: botComment.<span class=\"property\">id</span>,</span><br><span class=\"line\">            body,</span><br><span class=\"line\">        &#125;);</span><br><span class=\"line\">    &#125; <span class=\"keyword\">else</span> &#123;</span><br><span class=\"line\">        core.<span class=\"title function_\">info</span>(<span class=\"string\">&#x27;create comment successfully.&#x27;</span>);</span><br><span class=\"line\">        <span class=\"keyword\">await</span> octokit.<span class=\"property\">rest</span>.<span class=\"property\">issues</span>.<span class=\"title function_\">createComment</span>(&#123;</span><br><span class=\"line\">            owner,</span><br><span class=\"line\">            repo,</span><br><span class=\"line\">            <span class=\"attr\">issue_number</span>: issueNumber,</span><br><span class=\"line\">            body,</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=\"keyword\">try</span> &#123;</span><br><span class=\"line\">    <span class=\"title function_\">main</span>();</span><br><span class=\"line\">&#125; <span class=\"keyword\">catch</span> (err) &#123;</span><br><span class=\"line\">    core.<span class=\"title function_\">setFailed</span>(err.<span class=\"property\">message</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p><code>@actions/core</code>和<code>@actions/github</code>是github官方提供的js包，前者可以方便的读取入参等，后者可以方便的操作github REST API。</p>\n<p><code>main</code>函数的代码就是原生javascript，不一一解释了，主要通过<code>uniqueIdentifier</code>来判断是否发布过评论，如果是，就更新评论，否则就创建评论。</p>\n<blockquote>\n<p>markdown语法<code>[^uniqueIdentifier]</code>表示脚注，不会被渲染。</p>\n</blockquote>\n<p><code>core.setFailed(err.message);</code>表示抛出退出代码。</p>\n<h2 id=\"config-x2F-webpack-config-js\"><a href=\"#config-x2F-webpack-config-js\" class=\"headerlink\" title=\"config&#x2F;webpack.config.js\"></a>config&#x2F;webpack.config.js</h2><p>打包用的，配置简单可用即可：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br></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\">mode</span>: <span class=\"string\">&#x27;production&#x27;</span>,</span><br><span class=\"line\">    <span class=\"attr\">target</span>: <span class=\"string\">&#x27;node20&#x27;</span>,</span><br><span class=\"line\">    <span class=\"attr\">entry</span>: <span class=\"string\">&#x27;./src/index.js&#x27;</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\">&#x27;index.js&#x27;</span>,</span><br><span class=\"line\">        <span class=\"attr\">clean</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>\n\n<h2 id=\"package-json\"><a href=\"#package-json\" class=\"headerlink\" title=\"package.json\"></a>package.json</h2><figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;name&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;unique-comment&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;version&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;1.0.0&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;private&quot;</span><span class=\"punctuation\">:</span> <span class=\"literal\"><span class=\"keyword\">true</span></span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;scripts&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;build&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;webpack --config ./config/webpack.config.js&quot;</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;dependencies&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;@actions/core&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^1.10.1&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;@actions/github&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^6.0.0&quot;</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;devDependencies&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;webpack&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^5.89.0&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;webpack-cli&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;^5.1.4&quot;</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span></span><br></pre></td></tr></table></figure>\n\n<p>没啥好说的，列出了依赖项。和一个打包脚本。</p>\n<h2 id=\"测试-2\"><a href=\"#测试-2\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>修改了<code>src/index.js</code>得<code>build</code>，然后push到github仓库。</p>\n<p>记得将<strong>dist</strong>目录也提交到github仓库。</p>\n<!--hexo-->\n\n<h1 id=\"init\"><a href=\"#init\" class=\"headerlink\" title=\"init\"></a>init</h1><p>现在，开始搞正经的了。</p>\n<p>先初始化项目，这个job的目的仅仅是为了缓存pnpm依赖项，如果你的项目的依赖项不经常更新，可以省略这个job，后续也不要<code>needs</code>这个job。</p>\n<p>将init改成如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">init:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br></pre></td></tr></table></figure>\n\n<p>相信经过对之前的job的了解，这里的配置就看起来很简单了。</p>\n<h2 id=\"Init-pnpm\"><a href=\"#Init-pnpm\" class=\"headerlink\" title=\"Init pnpm\"></a>Init pnpm</h2><p>使用第三方action，安装pnpm@^8。</p>\n<h2 id=\"Init-node\"><a href=\"#Init-node\" class=\"headerlink\" title=\"Init node\"></a>Init node</h2><p><code>cache: &#39;pnpm&#39;</code>指定缓存机制，它内部是利用了workflow的cache机制。</p>\n<h2 id=\"Install-dependencies\"><a href=\"#Install-dependencies\" class=\"headerlink\" title=\"Install dependencies\"></a>Install dependencies</h2><p>安装依赖项，触发缓存。</p>\n<!--hexo-->\n\n<h1 id=\"eslint\"><a href=\"#eslint\" class=\"headerlink\" title=\"eslint\"></a>eslint</h1><p>将eslint改成如下：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">eslint:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">outputs:</span></span><br><span class=\"line\">            <span class=\"attr\">result:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">steps.lint.outputs.result</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\">                  <span class=\"attr\">fetch-depth:</span> <span class=\"number\">0</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Run</span> <span class=\"string\">eslint</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/github-script@v7</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">result-encoding:</span> <span class=\"string\">string</span></span><br><span class=\"line\">                  <span class=\"attr\">script:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      let output = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let outerr = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let diffFiles = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">await</span> <span class=\"string\">exec.exec(</span></span><br><span class=\"line\">                        <span class=\"string\">`git</span> <span class=\"string\">diff</span> <span class=\"string\">--name-only</span> <span class=\"string\">origin/$&#123;&#123;github.base_ref&#125;&#125;`,</span></span><br><span class=\"line\">                        []<span class=\"string\">,</span></span><br><span class=\"line\">                        &#123;</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">silent:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">ignoreReturnCode:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">listeners:</span> &#123;</span><br><span class=\"line\">                            <span class=\"attr\">stdout:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">diffFiles</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</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=\"string\">);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">lintFiles</span> <span class=\"string\">=</span> <span class=\"string\">diffFiles.split(`\\n`).filter((file)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">file.endsWith(&#x27;.js&#x27;)</span> <span class=\"string\">||</span> <span class=\"string\">file.endsWith(&#x27;.ts&#x27;)</span> <span class=\"string\">||</span> <span class=\"string\">file.endsWith(&#x27;.tsx&#x27;)</span></span><br><span class=\"line\">                      &#125;<span class=\"string\">).join(&#x27;</span> <span class=\"string\">&#x27;);</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      await exec.exec(</span></span><br><span class=\"line\"><span class=\"string\">                        // &quot;pnpm run lint --format stylish&quot;,</span></span><br><span class=\"line\"><span class=\"string\">                        `pnpm eslint $&#123;lintFiles&#125;`,</span></span><br><span class=\"line\"><span class=\"string\">                        [],</span></span><br><span class=\"line\"><span class=\"string\">                        &#123;</span></span><br><span class=\"line\"><span class=\"string\">                          // silent: true,</span></span><br><span class=\"line\"><span class=\"string\">                          ignoreReturnCode: true,</span></span><br><span class=\"line\"><span class=\"string\">                          listeners: &#123;</span></span><br><span class=\"line\"><span class=\"string\">                            stdout: (data) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"string\">                                output += data.toString();</span></span><br><span class=\"line\"><span class=\"string\">                            &#125;,</span></span><br><span class=\"line\"><span class=\"string\">                            stderr: (data) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"string\">                                outerr += data.toString();</span></span><br><span class=\"line\"><span class=\"string\">                            &#125;,</span></span><br><span class=\"line\"><span class=\"string\">                          &#125;,</span></span><br><span class=\"line\"><span class=\"string\">                        &#125;</span></span><br><span class=\"line\"><span class=\"string\">                      );</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      if (outerr) &#123;</span></span><br><span class=\"line\"><span class=\"string\">                        return `:x: Some command execution errors, non-eslint business errors.`;</span></span><br><span class=\"line\"><span class=\"string\">                      &#125;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      const errorMatch = output.match(/(\\d+) errors?/);</span></span><br><span class=\"line\"><span class=\"string\">                      const warnMatch = output.match(/(\\d+) warnings?/);</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      if (errorMatch &amp;&amp; errorMatch?.[1] !== &#x27;</span><span class=\"number\">0</span><span class=\"string\">&#x27;) &#123;</span></span><br><span class=\"line\"><span class=\"string\">                        return `:x: $&#123;errorMatch?.[0]&#125; $&#123;warnMatch?.[0]&#125;`;</span></span><br><span class=\"line\"><span class=\"string\">                      &#125;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\"><span class=\"string\">                      return `:white_check_mark: $&#123;errorMatch?.[0] || &#x27;</span><span class=\"number\">0</span> <span class=\"string\">error&#x27;&#125;</span> <span class=\"string\">$&#123;warnMatch?.[0]</span> <span class=\"string\">||</span> <span class=\"string\">&#x27;0 warning&#x27;</span><span class=\"string\">&#125;`;</span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"needs\"><a href=\"#needs\" class=\"headerlink\" title=\"needs\"></a>needs</h2><p>使用<code>needs</code>依赖init，可以使用到pnpm的缓存项，防止install太慢。</p>\n<blockquote>\n<p>因为eslint、typescript、unitTest都需要pnpm install，所以一个前置的init去缓存pnpm依赖项，可以加快后续的install速度。</p>\n</blockquote>\n<h2 id=\"outputs\"><a href=\"#outputs\" class=\"headerlink\" title=\"outputs\"></a>outputs</h2><p>job里的outputs，可以在依赖它的其他job中访问到。这里使用<code>$&#123;&#123; steps.lint.outputs.result &#125;&#125;</code>去获取该job中lint这个step里的output里的result。</p>\n<blockquote>\n<p>output有job和step两个维度，注意区分。</p>\n</blockquote>\n<h2 id=\"Run-eslint\"><a href=\"#Run-eslint\" class=\"headerlink\" title=\"Run eslint\"></a>Run eslint</h2><p>它uses了<code>actions/github-script@v7</code>，这是github官方提供的一个action，可以在<code>with.script</code>里写js代码去执行，同时它会注入一些变量到script中去，见它的<a href=\"https://github.com/actions/github-script/tree/v7/\">官方文档</a>。</p>\n<blockquote>\n<p>对于简单的js代码，可以使用这个action去完成，不用再去写一个js文件。</p>\n</blockquote>\n<p><code>result-encoding</code>是指定script返回的数据格式的，默认是json，这指定为string。</p>\n<blockquote>\n<p>为什么script里return了string，还要指定为string呢？<br>因为<code>return &#39;hello&#39;</code>在json encode后是<code>&#39;&quot;hello&quot;&#39;</code>，而string encode后为<code>&#39;hello&#39;</code>。</p>\n</blockquote>\n<p>script里是原生的js代码了，里面的<code>exec</code>是该action注入的变量，用来执行shell命令。</p>\n<p>这段js代码做了两个事情，一是<code>git diff</code>获取pr中改动的文件列表，二是<code>eslint</code>检查这些增量文件，最后返回处理的结果。</p>\n<h2 id=\"fetch-depth\"><a href=\"#fetch-depth\" class=\"headerlink\" title=\"fetch-depth\"></a>fetch-depth</h2><p>Init repo这个step里设置了<code>fetch-depth: 0</code>，不然获取不到完整的git分支，具体看<code>actions/checkout</code>的解释，涉及到git的知识不展开细说了。</p>\n<h2 id=\"steps-lint-outputs-result\"><a href=\"#steps-lint-outputs-result\" class=\"headerlink\" title=\"steps.lint.outputs.result\"></a>steps.lint.outputs.result</h2><p><code>steps.lint.outputs.result</code>为什么能拿到lint step里的output.result呢？因为<code>actions/github-script</code>这个action内部将script的返回值，设置到<code>$GITHUB_OUTPUT</code>里了，且键名为<code>result</code>。</p>\n<!--hexo-->\n\n<h1 id=\"typescript\"><a href=\"#typescript\" class=\"headerlink\" title=\"typescript\"></a>typescript</h1><p>和eslint的配置大同小异，只是改了对检测结果的判断。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">typescript:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">outputs:</span></span><br><span class=\"line\">            <span class=\"attr\">result:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">steps.lint.outputs.result</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Run</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/github-script@v7</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">result-encoding:</span> <span class=\"string\">string</span></span><br><span class=\"line\">                  <span class=\"attr\">script:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      let output = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let outerr = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">await</span> <span class=\"string\">exec.exec(</span></span><br><span class=\"line\">                        <span class=\"string\">`pnpm</span> <span class=\"string\">run</span> <span class=\"string\">-r</span> <span class=\"string\">lint:ts`,</span></span><br><span class=\"line\">                        []<span class=\"string\">,</span></span><br><span class=\"line\">                        &#123;</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">silent:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">ignoreReturnCode:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">listeners:</span> &#123;</span><br><span class=\"line\">                            <span class=\"attr\">stdout:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">output</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</span></span><br><span class=\"line\">                            &#125;,</span><br><span class=\"line\">                            <span class=\"attr\">stderr:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">outerr</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</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=\"string\">);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(outerr)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">Some</span> <span class=\"string\">command</span> <span class=\"string\">execution</span> <span class=\"string\">errors</span>, <span class=\"literal\">no</span> <span class=\"string\">business</span> <span class=\"string\">errors.`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">errorMatch</span> <span class=\"string\">=</span> <span class=\"string\">output.match(/error</span> <span class=\"string\">TS/g);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(errorMatch)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">$</span>&#123;<span class=\"string\">errorMatch?.length</span>&#125; <span class=\"string\">errors`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">return</span> <span class=\"string\">`:white_check_mark:</span> <span class=\"string\">$&#123;&#x27;0</span> <span class=\"string\">error&#x27;&#125;`;</span></span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"unitTest\"><a href=\"#unitTest\" class=\"headerlink\" title=\"unitTest\"></a>unitTest</h1><p>和eslint的配置大同小异，只是改了对检测结果的判断。唯一的区别是jest的检测结果是输出到stderr，见<a href=\"https://github.com/jestjs/jest/issues/5064%E3%80%82\">https://github.com/jestjs/jest/issues/5064。</a></p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">unitTest:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">init</span>]</span><br><span class=\"line\">        <span class=\"attr\">outputs:</span></span><br><span class=\"line\">            <span class=\"attr\">result:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">steps.lint.outputs.result</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">repo</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">pnpm</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">pnpm/action-setup@v2</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">version:</span> <span class=\"number\">8</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Init</span> <span class=\"string\">node</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/setup-node@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">node-version:</span> <span class=\"number\">20</span></span><br><span class=\"line\">                  <span class=\"attr\">cache:</span> <span class=\"string\">&#x27;pnpm&#x27;</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Install</span> <span class=\"string\">dependencies</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">pnpm</span> <span class=\"string\">install</span></span><br><span class=\"line\"></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Run</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">lint</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/github-script@v7</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">result-encoding:</span> <span class=\"string\">string</span></span><br><span class=\"line\">                  <span class=\"attr\">script:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      let output = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\">                      let outerr = &#x27;&#x27;;</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">await</span> <span class=\"string\">exec.exec(</span></span><br><span class=\"line\">                        <span class=\"string\">`pnpm</span> <span class=\"string\">run</span> <span class=\"string\">test`,</span></span><br><span class=\"line\">                        []<span class=\"string\">,</span></span><br><span class=\"line\">                        &#123;</span><br><span class=\"line\">                          <span class=\"string\">//</span> <span class=\"attr\">silent:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">ignoreReturnCode:</span> <span class=\"literal\">true</span>,</span><br><span class=\"line\">                          <span class=\"attr\">listeners:</span> &#123;</span><br><span class=\"line\">                            <span class=\"attr\">stdout:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">output</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</span></span><br><span class=\"line\">                            &#125;,</span><br><span class=\"line\">                            <span class=\"attr\">stderr:</span> <span class=\"string\">(data)</span> <span class=\"string\">=&gt;</span> &#123;</span><br><span class=\"line\">                                <span class=\"string\">outerr</span> <span class=\"string\">+=</span> <span class=\"string\">data.toString();</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=\"string\">);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">//</span> <span class=\"string\">why</span> <span class=\"string\">use</span> <span class=\"string\">outerr?</span> <span class=\"string\">https://github.com/jestjs/jest/issues/5064</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">failMatch</span> <span class=\"string\">=</span> <span class=\"string\">outerr.match(/Test</span> <span class=\"attr\">Suites:</span> <span class=\"string\">\\d+</span> <span class=\"string\">failed/);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(failMatch)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">$</span>&#123;<span class=\"string\">failMatch?.</span>[<span class=\"number\">0</span>]&#125;<span class=\"string\">`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">const</span> <span class=\"string\">errorMatch</span> <span class=\"string\">=</span> <span class=\"string\">outerr.match(/Jest:</span> <span class=\"string\">&quot;global&quot;</span> <span class=\"string\">coverage</span> <span class=\"string\">threshold</span> <span class=\"string\">for</span> <span class=\"string\">lines</span> <span class=\"string\">\\([0-9\\.]+%\\)</span> <span class=\"attr\">not met:</span> [<span class=\"number\">0</span><span class=\"number\">-9</span><span class=\"string\">\\.</span>]<span class=\"string\">+%/);</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">if</span> <span class=\"string\">(errorMatch)</span> &#123;</span><br><span class=\"line\">                        <span class=\"string\">return</span> <span class=\"string\">`:x:</span> <span class=\"string\">$</span>&#123;<span class=\"string\">errorMatch?.</span>[<span class=\"number\">0</span>]&#125;<span class=\"string\">`;</span></span><br><span class=\"line\">                      &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">return</span> <span class=\"string\">`:white_check_mark:</span> <span class=\"string\">passed`;</span></span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"replyResult\"><a href=\"#replyResult\" class=\"headerlink\" title=\"replyResult\"></a>replyResult</h1><p>最后，将几个检测的结果进行汇总，回复到pr里就行了。</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"attr\">replyResult:</span></span><br><span class=\"line\">        <span class=\"attr\">runs-on:</span> <span class=\"string\">ubuntu-latest</span></span><br><span class=\"line\">        <span class=\"attr\">needs:</span> [<span class=\"string\">replyChecking</span>, <span class=\"string\">eslint</span>, <span class=\"string\">typescript</span>, <span class=\"string\">unitTest</span>]</span><br><span class=\"line\">        <span class=\"attr\">steps:</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Checkout</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">actions/checkout@v4</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">ref:</span> <span class=\"string\">$&#123;&#123;github.head_ref&#125;&#125;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Get</span> <span class=\"string\">date</span> <span class=\"string\">time</span></span><br><span class=\"line\">              <span class=\"attr\">id:</span> <span class=\"string\">getDateTime</span></span><br><span class=\"line\">              <span class=\"attr\">run:</span> <span class=\"string\">echo</span> <span class=\"string\">&quot;result=$(TZ=Asia/Shanghai date)&quot;</span> <span class=\"string\">&gt;&gt;</span> <span class=\"string\">&quot;$GITHUB_OUTPUT&quot;</span></span><br><span class=\"line\">            <span class=\"bullet\">-</span> <span class=\"attr\">name:</span> <span class=\"string\">Create</span> <span class=\"string\">or</span> <span class=\"string\">update</span> <span class=\"string\">a</span> <span class=\"string\">comment</span></span><br><span class=\"line\">              <span class=\"attr\">uses:</span> <span class=\"string\">./.github/actions/unique-comment</span></span><br><span class=\"line\">              <span class=\"attr\">with:</span></span><br><span class=\"line\">                  <span class=\"attr\">uniqueIdentifier:</span> <span class=\"string\">$&#123;&#123;</span> <span class=\"string\">github.workflow</span> <span class=\"string\">&#125;&#125;</span></span><br><span class=\"line\">                  <span class=\"attr\">body:</span> <span class=\"string\">|</span></span><br><span class=\"line\"><span class=\"string\">                      ## Eslint Check Result</span></span><br><span class=\"line\"><span class=\"string\"></span></span><br><span class=\"line\">                      <span class=\"string\">$&#123;&#123;needs.eslint.outputs.result&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"comment\">## Typescript Check Result</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">$&#123;&#123;needs.typescript.outputs.result&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"comment\">## UnitTest Check Result</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">$&#123;&#123;needs.unitTest.outputs.result&#125;&#125;</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">---</span></span><br><span class=\"line\"></span><br><span class=\"line\">                      <span class=\"string\">Commented</span> <span class=\"string\">by</span> <span class=\"string\">Action</span> [<span class=\"string\">$<span class=\"template-variable\">&#123;&#123;github.workflow&#125;&#125;</span></span>]<span class=\"string\">($&#123;&#123;github.event.repository.html_url&#125;&#125;/actions/runs/$&#123;&#123;github.run_id&#125;&#125;),</span> <span class=\"string\">last</span> <span class=\"string\">updated</span> <span class=\"string\">on</span> <span class=\"string\">$&#123;&#123;steps.getDateTime.outputs.result&#125;&#125;.</span></span><br></pre></td></tr></table></figure>\n\n<p>和replyChecking差不多，在body里使用<code>$&#123;&#123;needs.eslint.outputs.result&#125;&#125;</code>去读取了eslint job的outputs。</p>\n<h2 id=\"测试-3\"><a href=\"#测试-3\" class=\"headerlink\" title=\"测试\"></a>测试</h2><p>去发起新的pr，故意提交一个有eslint error的js&#x2F;ts文件，看看表现吧~</p>\n"},{"title":"4. GitHub Actions - Using workflows","date":"2023-07-05T22:31:08.000Z","url":"github-actions-workflows","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/8](https://github.com/taoliujun/blog/issues/8)\n\n<!--hexo\n---\nurl: github-actions-workflows\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/using-workflows/about-workflows\n\n原文很长，但随着对Github Actions的了解，笔记也会越来越短。\n\n## 介绍\n\n更详细介绍了workflow的构成，没啥特别重要点。\n\n## 触发\n\n再次复习下触发的几种情况：github、计划任务、手动。\n\n### Branches过滤\n\n可以通过 branches 、branches-ignore 过滤或排除分支，支持glob patterns。还可以在 branches 前面用!修饰为“非”。比如：\n\n```yaml\non:\n  pull_request:\n    branches:    \n      - 'releases/**'\n      - '!releases/**-alpha'\n```\n\n### Tags过滤\n\n对于tags 的过滤处理和branches是一致的，只是修改了名字为tags、tags-ignore。\n\n### Types过滤\n\n可以理解为事件的具体行为，比如 issue_commot事件的created行为。\n\n### Paths过滤\n\n文件路径过滤也是基本功能了，使用paths、paths-ignore处理，举例：\n\n```yaml\non:\n  push:\n    paths:\n      - '**.js\n```\n\n注意，一些过滤场景并不允许 a和a-ignore一起使用，需要注意的。\n\n### 其他\n\n* 还可以对input进行参数过滤，以满足更丰富的触发条件配置。\n* 对github的属性，如pull request发起人的名字进行过滤。\n\n## 事件\n\n列举了常见的30几种事件，大部分事件包含多种行为。\n\n## 语法\n\n涵盖了workflow的大部分配置项。\n\n## 命令行\n\nactions如何和bash交换变量，使用actions/toolkit可以简单做到。\n\n## 复用\n\n注意复用的上下文\n\n## 缓存\n\n可以缓存npm的依赖以节省install的时间，注意缓存的跨分支适用策略。\n\n\n\n","source":"_posts/github-actions-workflows.md","raw":"---\ntitle: \"4. GitHub Actions - Using workflows\"\ndate: \"2023-07-06T06:31:08Z\"\ncategories:\n  - [工程化]\n\nurl: github-actions-workflows\ntags:\n  - github actions\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/8](https://github.com/taoliujun/blog/issues/8)\n\n<!--hexo\n---\nurl: github-actions-workflows\ntags:\n  - github actions\n---\n-->\n\n官方文档：https://docs.github.com/en/actions/using-workflows/about-workflows\n\n原文很长，但随着对Github Actions的了解，笔记也会越来越短。\n\n## 介绍\n\n更详细介绍了workflow的构成，没啥特别重要点。\n\n## 触发\n\n再次复习下触发的几种情况：github、计划任务、手动。\n\n### Branches过滤\n\n可以通过 branches 、branches-ignore 过滤或排除分支，支持glob patterns。还可以在 branches 前面用!修饰为“非”。比如：\n\n```yaml\non:\n  pull_request:\n    branches:    \n      - 'releases/**'\n      - '!releases/**-alpha'\n```\n\n### Tags过滤\n\n对于tags 的过滤处理和branches是一致的，只是修改了名字为tags、tags-ignore。\n\n### Types过滤\n\n可以理解为事件的具体行为，比如 issue_commot事件的created行为。\n\n### Paths过滤\n\n文件路径过滤也是基本功能了，使用paths、paths-ignore处理，举例：\n\n```yaml\non:\n  push:\n    paths:\n      - '**.js\n```\n\n注意，一些过滤场景并不允许 a和a-ignore一起使用，需要注意的。\n\n### 其他\n\n* 还可以对input进行参数过滤，以满足更丰富的触发条件配置。\n* 对github的属性，如pull request发起人的名字进行过滤。\n\n## 事件\n\n列举了常见的30几种事件，大部分事件包含多种行为。\n\n## 语法\n\n涵盖了workflow的大部分配置项。\n\n## 命令行\n\nactions如何和bash交换变量，使用actions/toolkit可以简单做到。\n\n## 复用\n\n注意复用的上下文\n\n## 缓存\n\n可以缓存npm的依赖以节省install的时间，注意缓存的跨分支适用策略。\n\n\n\n","slug":"github-actions-workflows","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne720016i8ohef8w3v84","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/8\">https://github.com/taoliujun/blog/issues/8</a></p>\n<!--hexo\n---\nurl: github-actions-workflows\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/using-workflows/about-workflows\">https://docs.github.com/en/actions/using-workflows/about-workflows</a></p>\n<p>原文很长，但随着对Github Actions的了解，笔记也会越来越短。</p>\n<h2 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h2><p>更详细介绍了workflow的构成，没啥特别重要点。</p>\n<h2 id=\"触发\"><a href=\"#触发\" class=\"headerlink\" title=\"触发\"></a>触发</h2><p>再次复习下触发的几种情况：github、计划任务、手动。</p>\n<h3 id=\"Branches过滤\"><a href=\"#Branches过滤\" class=\"headerlink\" title=\"Branches过滤\"></a>Branches过滤</h3><p>可以通过 branches 、branches-ignore 过滤或排除分支，支持glob patterns。还可以在 branches 前面用!修饰为“非”。比如：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"attr\">on:</span></span><br><span class=\"line\">  <span class=\"attr\">pull_request:</span></span><br><span class=\"line\">    <span class=\"attr\">branches:</span>    </span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"string\">&#x27;releases/**&#x27;</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"string\">&#x27;!releases/**-alpha&#x27;</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Tags过滤\"><a href=\"#Tags过滤\" class=\"headerlink\" title=\"Tags过滤\"></a>Tags过滤</h3><p>对于tags 的过滤处理和branches是一致的，只是修改了名字为tags、tags-ignore。</p>\n<h3 id=\"Types过滤\"><a href=\"#Types过滤\" class=\"headerlink\" title=\"Types过滤\"></a>Types过滤</h3><p>可以理解为事件的具体行为，比如 issue_commot事件的created行为。</p>\n<h3 id=\"Paths过滤\"><a href=\"#Paths过滤\" class=\"headerlink\" title=\"Paths过滤\"></a>Paths过滤</h3><p>文件路径过滤也是基本功能了，使用paths、paths-ignore处理，举例：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><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\">on:</span></span><br><span class=\"line\">  <span class=\"attr\">push:</span></span><br><span class=\"line\">    <span class=\"attr\">paths:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"string\">&#x27;**.js</span></span><br></pre></td></tr></table></figure>\n\n<p>注意，一些过滤场景并不允许 a和a-ignore一起使用，需要注意的。</p>\n<h3 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h3><ul>\n<li>还可以对input进行参数过滤，以满足更丰富的触发条件配置。</li>\n<li>对github的属性，如pull request发起人的名字进行过滤。</li>\n</ul>\n<h2 id=\"事件\"><a href=\"#事件\" class=\"headerlink\" title=\"事件\"></a>事件</h2><p>列举了常见的30几种事件，大部分事件包含多种行为。</p>\n<h2 id=\"语法\"><a href=\"#语法\" class=\"headerlink\" title=\"语法\"></a>语法</h2><p>涵盖了workflow的大部分配置项。</p>\n<h2 id=\"命令行\"><a href=\"#命令行\" class=\"headerlink\" title=\"命令行\"></a>命令行</h2><p>actions如何和bash交换变量，使用actions&#x2F;toolkit可以简单做到。</p>\n<h2 id=\"复用\"><a href=\"#复用\" class=\"headerlink\" title=\"复用\"></a>复用</h2><p>注意复用的上下文</p>\n<h2 id=\"缓存\"><a href=\"#缓存\" class=\"headerlink\" title=\"缓存\"></a>缓存</h2><p>可以缓存npm的依赖以节省install的时间，注意缓存的跨分支适用策略。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/8\">https://github.com/taoliujun/blog/issues/8</a></p>\n<!--hexo\n---\nurl: github-actions-workflows\ntags:\n  - github actions\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.github.com/en/actions/using-workflows/about-workflows\">https://docs.github.com/en/actions/using-workflows/about-workflows</a></p>\n<p>原文很长，但随着对Github Actions的了解，笔记也会越来越短。</p>\n<h2 id=\"介绍\"><a href=\"#介绍\" class=\"headerlink\" title=\"介绍\"></a>介绍</h2><p>更详细介绍了workflow的构成，没啥特别重要点。</p>\n<h2 id=\"触发\"><a href=\"#触发\" class=\"headerlink\" title=\"触发\"></a>触发</h2><p>再次复习下触发的几种情况：github、计划任务、手动。</p>\n<h3 id=\"Branches过滤\"><a href=\"#Branches过滤\" class=\"headerlink\" title=\"Branches过滤\"></a>Branches过滤</h3><p>可以通过 branches 、branches-ignore 过滤或排除分支，支持glob patterns。还可以在 branches 前面用!修饰为“非”。比如：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"attr\">on:</span></span><br><span class=\"line\">  <span class=\"attr\">pull_request:</span></span><br><span class=\"line\">    <span class=\"attr\">branches:</span>    </span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"string\">&#x27;releases/**&#x27;</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"string\">&#x27;!releases/**-alpha&#x27;</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Tags过滤\"><a href=\"#Tags过滤\" class=\"headerlink\" title=\"Tags过滤\"></a>Tags过滤</h3><p>对于tags 的过滤处理和branches是一致的，只是修改了名字为tags、tags-ignore。</p>\n<h3 id=\"Types过滤\"><a href=\"#Types过滤\" class=\"headerlink\" title=\"Types过滤\"></a>Types过滤</h3><p>可以理解为事件的具体行为，比如 issue_commot事件的created行为。</p>\n<h3 id=\"Paths过滤\"><a href=\"#Paths过滤\" class=\"headerlink\" title=\"Paths过滤\"></a>Paths过滤</h3><p>文件路径过滤也是基本功能了，使用paths、paths-ignore处理，举例：</p>\n<figure class=\"highlight yaml\"><table><tr><td class=\"gutter\"><pre><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\">on:</span></span><br><span class=\"line\">  <span class=\"attr\">push:</span></span><br><span class=\"line\">    <span class=\"attr\">paths:</span></span><br><span class=\"line\">      <span class=\"bullet\">-</span> <span class=\"string\">&#x27;**.js</span></span><br></pre></td></tr></table></figure>\n\n<p>注意，一些过滤场景并不允许 a和a-ignore一起使用，需要注意的。</p>\n<h3 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h3><ul>\n<li>还可以对input进行参数过滤，以满足更丰富的触发条件配置。</li>\n<li>对github的属性，如pull request发起人的名字进行过滤。</li>\n</ul>\n<h2 id=\"事件\"><a href=\"#事件\" class=\"headerlink\" title=\"事件\"></a>事件</h2><p>列举了常见的30几种事件，大部分事件包含多种行为。</p>\n<h2 id=\"语法\"><a href=\"#语法\" class=\"headerlink\" title=\"语法\"></a>语法</h2><p>涵盖了workflow的大部分配置项。</p>\n<h2 id=\"命令行\"><a href=\"#命令行\" class=\"headerlink\" title=\"命令行\"></a>命令行</h2><p>actions如何和bash交换变量，使用actions&#x2F;toolkit可以简单做到。</p>\n<h2 id=\"复用\"><a href=\"#复用\" class=\"headerlink\" title=\"复用\"></a>复用</h2><p>注意复用的上下文</p>\n<h2 id=\"缓存\"><a href=\"#缓存\" class=\"headerlink\" title=\"缓存\"></a>缓存</h2><p>可以缓存npm的依赖以节省install的时间，注意缓存的跨分支适用策略。</p>\n"},{"title":"React的性能优化项，最后更新2023年07月...","date":"2023-07-05T22:37:20.000Z","url":"react-performance optimization","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/18](https://github.com/taoliujun/blog/issues/18)\n\n<!--hexo\n---\nurl: react-performance optimization\ntags:\n  - react\n---\n-->\n\nReact 没有最佳性能优化项，性能优化和项目的复杂度相关，所以以下记录的优化项，酌情使用。\n\n评论区见。\n\n- [组件需要更细粒度](https://github.com/taoliujun/blog/issues/18#issuecomment-1623078715)\n- [React useDeferredValue在性能优化中的使用](https://github.com/taoliujun/blog/issues/20)\n- [React useTransition在性能优化中的使用](https://github.com/taoliujun/blog/issues/19)\n\n<!--hexo-->\n\n# 组件需要更细粒度\n\n**结论：如果组件中的状态更新频率很快，那么尽量将组件拆分到更细粒度。**\n\n先看一个例子：\n\n```tsx\nconst Test1: FC = () => {\n  console.log(\"==\", Math.random());\n  return <div>hello {Math.random()}</div>;\n};\n\nconst Main: FC = () => {\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <>\n      <input value={value} onChange={(e) => setValue(e.target.value)} />\n      <Test1 />\n    </>\n  );\n};\n```\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061103775.png)\n\n如上，虽然`Test1`组件和`value`状态并无关系，但每一次输入都会导致`Test1`组件的重新渲染。如果`Test1`组件的逻辑和渲染够复杂，那么很容易影响性能。\n\n究其原理，Fiber 在节点这一层保存了组件函数中状态和虚拟 Dom 的关系，它的最小渲染单元就是本组件函数。\n\n根据这个原理，试试将输入框拆分成另一个组件：\n\n```tsx\nconst Input1: FC = () => {\n  const [value, setValue] = useState(\"\");\n\n  return <input value={value} onChange={(e) => setValue(e.target.value)} />;\n};\n\nconst Test1: FC = () => {\n  console.log(\"==\", Math.random());\n  return <div>hello {Math.random()}</div>;\n};\n\nconst Main: FC = () => {\n  return (\n    <>\n      <Input1 />\n      <Test1 />\n    </>\n  );\n};\n```\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061111086.png)\n\n如上，连续输入 abc，并不触发`Test1`的多次执行，`Input1`组件在一个独立的 Fiber 结构中，它的状态更新便不会影响到`Main`函数。\n\n\n","source":"_posts/react-performance optimization.md","raw":"---\ntitle: \"React的性能优化项，最后更新2023年07月...\"\ndate: \"2023-07-06T06:37:20Z\"\ncategories:\n  - [React]\n\nurl: react-performance optimization\ntags:\n  - react\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/18](https://github.com/taoliujun/blog/issues/18)\n\n<!--hexo\n---\nurl: react-performance optimization\ntags:\n  - react\n---\n-->\n\nReact 没有最佳性能优化项，性能优化和项目的复杂度相关，所以以下记录的优化项，酌情使用。\n\n评论区见。\n\n- [组件需要更细粒度](https://github.com/taoliujun/blog/issues/18#issuecomment-1623078715)\n- [React useDeferredValue在性能优化中的使用](https://github.com/taoliujun/blog/issues/20)\n- [React useTransition在性能优化中的使用](https://github.com/taoliujun/blog/issues/19)\n\n<!--hexo-->\n\n# 组件需要更细粒度\n\n**结论：如果组件中的状态更新频率很快，那么尽量将组件拆分到更细粒度。**\n\n先看一个例子：\n\n```tsx\nconst Test1: FC = () => {\n  console.log(\"==\", Math.random());\n  return <div>hello {Math.random()}</div>;\n};\n\nconst Main: FC = () => {\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <>\n      <input value={value} onChange={(e) => setValue(e.target.value)} />\n      <Test1 />\n    </>\n  );\n};\n```\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061103775.png)\n\n如上，虽然`Test1`组件和`value`状态并无关系，但每一次输入都会导致`Test1`组件的重新渲染。如果`Test1`组件的逻辑和渲染够复杂，那么很容易影响性能。\n\n究其原理，Fiber 在节点这一层保存了组件函数中状态和虚拟 Dom 的关系，它的最小渲染单元就是本组件函数。\n\n根据这个原理，试试将输入框拆分成另一个组件：\n\n```tsx\nconst Input1: FC = () => {\n  const [value, setValue] = useState(\"\");\n\n  return <input value={value} onChange={(e) => setValue(e.target.value)} />;\n};\n\nconst Test1: FC = () => {\n  console.log(\"==\", Math.random());\n  return <div>hello {Math.random()}</div>;\n};\n\nconst Main: FC = () => {\n  return (\n    <>\n      <Input1 />\n      <Test1 />\n    </>\n  );\n};\n```\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061111086.png)\n\n如上，连续输入 abc，并不触发`Test1`的多次执行，`Input1`组件在一个独立的 Fiber 结构中，它的状态更新便不会影响到`Main`函数。\n\n\n","slug":"react-performance optimization","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne73001ai8ohb0bo3x82","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/18\">https://github.com/taoliujun/blog/issues/18</a></p>\n<!--hexo\n---\nurl: react-performance optimization\ntags:\n  - react\n---\n-->\n\n<p>React 没有最佳性能优化项，性能优化和项目的复杂度相关，所以以下记录的优化项，酌情使用。</p>\n<p>评论区见。</p>\n<ul>\n<li><a href=\"https://github.com/taoliujun/blog/issues/18#issuecomment-1623078715\">组件需要更细粒度</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/20\">React useDeferredValue在性能优化中的使用</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/19\">React useTransition在性能优化中的使用</a></li>\n</ul>\n<!--hexo-->\n\n<h1 id=\"组件需要更细粒度\"><a href=\"#组件需要更细粒度\" class=\"headerlink\" title=\"组件需要更细粒度\"></a>组件需要更细粒度</h1><p><strong>结论：如果组件中的状态更新频率很快，那么尽量将组件拆分到更细粒度。</strong></p>\n<p>先看一个例子：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><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> <span class=\"title class_\">Test1</span>: <span class=\"variable constant_\">FC</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 class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>());</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>hello &#123;Math.random()&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">const</span> [value, setValue] = <span class=\"title function_\">useState</span>(<span class=\"string\">&quot;&quot;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"keyword\">return</span> (</span><br><span class=\"line\">    <span class=\"language-xml\"><span class=\"tag\">&lt;&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">value</span>=<span class=\"string\">&#123;value&#125;</span> <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> setValue(e.target.value)&#125; /&gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">Test1</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">    <span class=\"tag\">&lt;/&gt;</span></span></span><br><span class=\"line\">  );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061103775.png\"></p>\n<p>如上，虽然<code>Test1</code>组件和<code>value</code>状态并无关系，但每一次输入都会导致<code>Test1</code>组件的重新渲染。如果<code>Test1</code>组件的逻辑和渲染够复杂，那么很容易影响性能。</p>\n<p>究其原理，Fiber 在节点这一层保存了组件函数中状态和虚拟 Dom 的关系，它的最小渲染单元就是本组件函数。</p>\n<p>根据这个原理，试试将输入框拆分成另一个组件：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><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> <span class=\"title class_\">Input1</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">const</span> [value, setValue] = <span class=\"title function_\">useState</span>(<span class=\"string\">&quot;&quot;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">value</span>=<span class=\"string\">&#123;value&#125;</span> <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> setValue(e.target.value)&#125; /&gt;</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 class_\">Test1</span>: <span class=\"variable constant_\">FC</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 class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>());</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>hello &#123;Math.random()&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> (</span><br><span class=\"line\">    <span class=\"language-xml\"><span class=\"tag\">&lt;&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">Input1</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">Test1</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">    <span class=\"tag\">&lt;/&gt;</span></span></span><br><span class=\"line\">  );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061111086.png\"></p>\n<p>如上，连续输入 abc，并不触发<code>Test1</code>的多次执行，<code>Input1</code>组件在一个独立的 Fiber 结构中，它的状态更新便不会影响到<code>Main</code>函数。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/18\">https://github.com/taoliujun/blog/issues/18</a></p>\n<!--hexo\n---\nurl: react-performance optimization\ntags:\n  - react\n---\n-->\n\n<p>React 没有最佳性能优化项，性能优化和项目的复杂度相关，所以以下记录的优化项，酌情使用。</p>\n<p>评论区见。</p>\n<ul>\n<li><a href=\"https://github.com/taoliujun/blog/issues/18#issuecomment-1623078715\">组件需要更细粒度</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/20\">React useDeferredValue在性能优化中的使用</a></li>\n<li><a href=\"https://github.com/taoliujun/blog/issues/19\">React useTransition在性能优化中的使用</a></li>\n</ul>\n<!--hexo-->\n\n<h1 id=\"组件需要更细粒度\"><a href=\"#组件需要更细粒度\" class=\"headerlink\" title=\"组件需要更细粒度\"></a>组件需要更细粒度</h1><p><strong>结论：如果组件中的状态更新频率很快，那么尽量将组件拆分到更细粒度。</strong></p>\n<p>先看一个例子：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><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> <span class=\"title class_\">Test1</span>: <span class=\"variable constant_\">FC</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 class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>());</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>hello &#123;Math.random()&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">const</span> [value, setValue] = <span class=\"title function_\">useState</span>(<span class=\"string\">&quot;&quot;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"keyword\">return</span> (</span><br><span class=\"line\">    <span class=\"language-xml\"><span class=\"tag\">&lt;&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">value</span>=<span class=\"string\">&#123;value&#125;</span> <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> setValue(e.target.value)&#125; /&gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">Test1</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">    <span class=\"tag\">&lt;/&gt;</span></span></span><br><span class=\"line\">  );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061103775.png\"></p>\n<p>如上，虽然<code>Test1</code>组件和<code>value</code>状态并无关系，但每一次输入都会导致<code>Test1</code>组件的重新渲染。如果<code>Test1</code>组件的逻辑和渲染够复杂，那么很容易影响性能。</p>\n<p>究其原理，Fiber 在节点这一层保存了组件函数中状态和虚拟 Dom 的关系，它的最小渲染单元就是本组件函数。</p>\n<p>根据这个原理，试试将输入框拆分成另一个组件：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><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> <span class=\"title class_\">Input1</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">const</span> [value, setValue] = <span class=\"title function_\">useState</span>(<span class=\"string\">&quot;&quot;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">input</span> <span class=\"attr\">value</span>=<span class=\"string\">&#123;value&#125;</span> <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> setValue(e.target.value)&#125; /&gt;</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 class_\">Test1</span>: <span class=\"variable constant_\">FC</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 class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>());</span><br><span class=\"line\">  <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>hello &#123;Math.random()&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> (</span><br><span class=\"line\">    <span class=\"language-xml\"><span class=\"tag\">&lt;&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">Input1</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">      <span class=\"tag\">&lt;<span class=\"name\">Test1</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">    <span class=\"tag\">&lt;/&gt;</span></span></span><br><span class=\"line\">  );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307061111086.png\"></p>\n<p>如上，连续输入 abc，并不触发<code>Test1</code>的多次执行，<code>Input1</code>组件在一个独立的 Fiber 结构中，它的状态更新便不会影响到<code>Main</code>函数。</p>\n"},{"title":"React useDeferredValue在性能优化中的使用","date":"2023-07-05T22:38:14.000Z","url":"react-usedeferredvalue","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/20](https://github.com/taoliujun/blog/issues/20)\n\n<!--hexo\n---\nurl: react-usedeferredvalue\ntags:\n  - react\n---\n-->\n\n## 一个卡顿场景\n\n已知浏览器在一帧时间里（默认16.6毫秒）要完成好多工作，其中最耗时的是js脚本执行和页面渲染。如果js脚本耗时太长，那要引起页面渲染掉帧，在用户的体验上就是卡顿。\n\n这里有一个处理用户输入的搜索词语，将结果渲染到一个dom列表上的场景：\n\n```tsx\nimport { FC, useMemo, useState } from 'react';\n\nconst SearchResults: FC<{ query: string }> = ({ query }) => {\n    const datas = useMemo(() => {\n        return new Array(10000).fill(null).map(() => {\n            return `${query} ${Math.random()}`;\n        });\n    }, [query]);\n\n    if (!query) {\n        return null;\n    }\n\n    return (\n        <div>\n            <h2>search \"{query}\" list:</h2>\n            {datas.map((v, k) => {\n                return <p key={k}>{v}</p>;\n            })}\n        </div>\n    );\n};\n\nexport const Main: FC = () => {\n    const [query, setQuery] = useState('');\n\n    return (\n        <>\n            Search:\n            <input\n                value={query}\n                onChange={(e) => {\n                    setQuery(e.target.value);\n                }}\n            />\n            <SearchResults query={query} />\n        </>\n    );\n};\n```\n\n当用户每次输入一个字符，就会触发`SearchResults`组件的重新渲染，这个渲染包括`datas`的重新计算，和dom结构的重新渲染，这个时间远远超过16毫秒，会导致下一个输入值的处理任务一直在等待中，造成卡顿。\n\n## useDeferredValue\n\nReact提供了`时间切片`的模式，这里不详细展开了，允许你在调度任务的过程中安排高优先级的任务，而`useDeferredValue`就是这个模式的一个hook，它可以**延迟更新部分UI**\n\n在之前的代码中，我们稍作修改：\n\n```tsx\n//...\n\nconst [query, setQuery] = useState('');\nconst defreredQuery = useDeferredValue(query);\n\n//...\n<SearchResults query={defreredQuery} />\n```\n\n当用户**快速**输入一个字符时，`SearchResults`组件的渲染就会被延迟，这样就尽量减少卡顿了。\n\n`useDeferredValue`通过延迟状态的更新来实现这个目的，它不同于节流或防抖的固定时间控制，而是根据一系列复杂调度算法来决定延迟的时间，这样可以尽量减少卡顿的发生。\n\n\n\n","source":"_posts/react-usedeferredvalue.md","raw":"---\ntitle: \"React useDeferredValue在性能优化中的使用\"\ndate: \"2023-07-06T06:38:14Z\"\ncategories:\n  - [React]\n\nurl: react-usedeferredvalue\ntags:\n  - react\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/20](https://github.com/taoliujun/blog/issues/20)\n\n<!--hexo\n---\nurl: react-usedeferredvalue\ntags:\n  - react\n---\n-->\n\n## 一个卡顿场景\n\n已知浏览器在一帧时间里（默认16.6毫秒）要完成好多工作，其中最耗时的是js脚本执行和页面渲染。如果js脚本耗时太长，那要引起页面渲染掉帧，在用户的体验上就是卡顿。\n\n这里有一个处理用户输入的搜索词语，将结果渲染到一个dom列表上的场景：\n\n```tsx\nimport { FC, useMemo, useState } from 'react';\n\nconst SearchResults: FC<{ query: string }> = ({ query }) => {\n    const datas = useMemo(() => {\n        return new Array(10000).fill(null).map(() => {\n            return `${query} ${Math.random()}`;\n        });\n    }, [query]);\n\n    if (!query) {\n        return null;\n    }\n\n    return (\n        <div>\n            <h2>search \"{query}\" list:</h2>\n            {datas.map((v, k) => {\n                return <p key={k}>{v}</p>;\n            })}\n        </div>\n    );\n};\n\nexport const Main: FC = () => {\n    const [query, setQuery] = useState('');\n\n    return (\n        <>\n            Search:\n            <input\n                value={query}\n                onChange={(e) => {\n                    setQuery(e.target.value);\n                }}\n            />\n            <SearchResults query={query} />\n        </>\n    );\n};\n```\n\n当用户每次输入一个字符，就会触发`SearchResults`组件的重新渲染，这个渲染包括`datas`的重新计算，和dom结构的重新渲染，这个时间远远超过16毫秒，会导致下一个输入值的处理任务一直在等待中，造成卡顿。\n\n## useDeferredValue\n\nReact提供了`时间切片`的模式，这里不详细展开了，允许你在调度任务的过程中安排高优先级的任务，而`useDeferredValue`就是这个模式的一个hook，它可以**延迟更新部分UI**\n\n在之前的代码中，我们稍作修改：\n\n```tsx\n//...\n\nconst [query, setQuery] = useState('');\nconst defreredQuery = useDeferredValue(query);\n\n//...\n<SearchResults query={defreredQuery} />\n```\n\n当用户**快速**输入一个字符时，`SearchResults`组件的渲染就会被延迟，这样就尽量减少卡顿了。\n\n`useDeferredValue`通过延迟状态的更新来实现这个目的，它不同于节流或防抖的固定时间控制，而是根据一系列复杂调度算法来决定延迟的时间，这样可以尽量减少卡顿的发生。\n\n\n\n","slug":"react-usedeferredvalue","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne74001di8ohdnmwdmji","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/20\">https://github.com/taoliujun/blog/issues/20</a></p>\n<!--hexo\n---\nurl: react-usedeferredvalue\ntags:\n  - react\n---\n-->\n\n<h2 id=\"一个卡顿场景\"><a href=\"#一个卡顿场景\" class=\"headerlink\" title=\"一个卡顿场景\"></a>一个卡顿场景</h2><p>已知浏览器在一帧时间里（默认16.6毫秒）要完成好多工作，其中最耗时的是js脚本执行和页面渲染。如果js脚本耗时太长，那要引起页面渲染掉帧，在用户的体验上就是卡顿。</p>\n<p>这里有一个处理用户输入的搜索词语，将结果渲染到一个dom列表上的场景：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"keyword\">import</span> &#123; <span class=\"variable constant_\">FC</span>, useMemo, useState &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;react&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title class_\">SearchResults</span>: <span class=\"variable constant_\">FC</span>&lt;&#123; <span class=\"attr\">query</span>: <span class=\"built_in\">string</span> &#125;&gt; = <span class=\"function\">(<span class=\"params\">&#123; query &#125;</span>) =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> datas = <span class=\"title function_\">useMemo</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> <span class=\"keyword\">new</span> <span class=\"title class_\">Array</span>(<span class=\"number\">10000</span>).<span class=\"title function_\">fill</span>(<span class=\"literal\">null</span>).<span class=\"title function_\">map</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">            <span class=\"keyword\">return</span> <span class=\"string\">`<span class=\"subst\">$&#123;query&#125;</span> <span class=\"subst\">$&#123;<span class=\"built_in\">Math</span>.random()&#125;</span>`</span>;</span><br><span class=\"line\">        &#125;);</span><br><span class=\"line\">    &#125;, [query]);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">if</span> (!query) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> <span class=\"literal\">null</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</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\">h2</span>&gt;</span>search &quot;&#123;query&#125;&quot; list:<span class=\"tag\">&lt;/<span class=\"name\">h2</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            &#123;datas.map((v, k) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                return <span class=\"tag\">&lt;<span class=\"name\">p</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;k&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &#125;)&#125;</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><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">const</span> <span class=\"title class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [query, setQuery] = <span class=\"title function_\">useState</span>(<span class=\"string\">&#x27;&#x27;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</span> (</span><br><span class=\"line\">        <span class=\"language-xml\"><span class=\"tag\">&lt;&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            Search:</span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">input</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">value</span>=<span class=\"string\">&#123;query&#125;</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    setQuery(e.target.value);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            /&gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">SearchResults</span> <span class=\"attr\">query</span>=<span class=\"string\">&#123;query&#125;</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">        <span class=\"tag\">&lt;/&gt;</span></span></span><br><span class=\"line\">    );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>当用户每次输入一个字符，就会触发<code>SearchResults</code>组件的重新渲染，这个渲染包括<code>datas</code>的重新计算，和dom结构的重新渲染，这个时间远远超过16毫秒，会导致下一个输入值的处理任务一直在等待中，造成卡顿。</p>\n<h2 id=\"useDeferredValue\"><a href=\"#useDeferredValue\" class=\"headerlink\" title=\"useDeferredValue\"></a>useDeferredValue</h2><p>React提供了<code>时间切片</code>的模式，这里不详细展开了，允许你在调度任务的过程中安排高优先级的任务，而<code>useDeferredValue</code>就是这个模式的一个hook，它可以<strong>延迟更新部分UI</strong></p>\n<p>在之前的代码中，我们稍作修改：</p>\n<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><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><br><span class=\"line\"><span class=\"keyword\">const</span> [query, setQuery] = <span class=\"title function_\">useState</span>(<span class=\"string\">&#x27;&#x27;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> defreredQuery = <span class=\"title function_\">useDeferredValue</span>(query);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">//...</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">SearchResults</span> <span class=\"attr\">query</span>=<span class=\"string\">&#123;defreredQuery&#125;</span> /&gt;</span></span></span><br></pre></td></tr></table></figure>\n\n<p>当用户<strong>快速</strong>输入一个字符时，<code>SearchResults</code>组件的渲染就会被延迟，这样就尽量减少卡顿了。</p>\n<p><code>useDeferredValue</code>通过延迟状态的更新来实现这个目的，它不同于节流或防抖的固定时间控制，而是根据一系列复杂调度算法来决定延迟的时间，这样可以尽量减少卡顿的发生。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/20\">https://github.com/taoliujun/blog/issues/20</a></p>\n<!--hexo\n---\nurl: react-usedeferredvalue\ntags:\n  - react\n---\n-->\n\n<h2 id=\"一个卡顿场景\"><a href=\"#一个卡顿场景\" class=\"headerlink\" title=\"一个卡顿场景\"></a>一个卡顿场景</h2><p>已知浏览器在一帧时间里（默认16.6毫秒）要完成好多工作，其中最耗时的是js脚本执行和页面渲染。如果js脚本耗时太长，那要引起页面渲染掉帧，在用户的体验上就是卡顿。</p>\n<p>这里有一个处理用户输入的搜索词语，将结果渲染到一个dom列表上的场景：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"keyword\">import</span> &#123; <span class=\"variable constant_\">FC</span>, useMemo, useState &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;react&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title class_\">SearchResults</span>: <span class=\"variable constant_\">FC</span>&lt;&#123; <span class=\"attr\">query</span>: <span class=\"built_in\">string</span> &#125;&gt; = <span class=\"function\">(<span class=\"params\">&#123; query &#125;</span>) =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> datas = <span class=\"title function_\">useMemo</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> <span class=\"keyword\">new</span> <span class=\"title class_\">Array</span>(<span class=\"number\">10000</span>).<span class=\"title function_\">fill</span>(<span class=\"literal\">null</span>).<span class=\"title function_\">map</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">            <span class=\"keyword\">return</span> <span class=\"string\">`<span class=\"subst\">$&#123;query&#125;</span> <span class=\"subst\">$&#123;<span class=\"built_in\">Math</span>.random()&#125;</span>`</span>;</span><br><span class=\"line\">        &#125;);</span><br><span class=\"line\">    &#125;, [query]);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">if</span> (!query) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> <span class=\"literal\">null</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</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\">h2</span>&gt;</span>search &quot;&#123;query&#125;&quot; list:<span class=\"tag\">&lt;/<span class=\"name\">h2</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            &#123;datas.map((v, k) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                return <span class=\"tag\">&lt;<span class=\"name\">p</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;k&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">p</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &#125;)&#125;</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><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">const</span> <span class=\"title class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [query, setQuery] = <span class=\"title function_\">useState</span>(<span class=\"string\">&#x27;&#x27;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</span> (</span><br><span class=\"line\">        <span class=\"language-xml\"><span class=\"tag\">&lt;&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            Search:</span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">input</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">value</span>=<span class=\"string\">&#123;query&#125;</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    setQuery(e.target.value);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            /&gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">SearchResults</span> <span class=\"attr\">query</span>=<span class=\"string\">&#123;query&#125;</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">        <span class=\"tag\">&lt;/&gt;</span></span></span><br><span class=\"line\">    );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>当用户每次输入一个字符，就会触发<code>SearchResults</code>组件的重新渲染，这个渲染包括<code>datas</code>的重新计算，和dom结构的重新渲染，这个时间远远超过16毫秒，会导致下一个输入值的处理任务一直在等待中，造成卡顿。</p>\n<h2 id=\"useDeferredValue\"><a href=\"#useDeferredValue\" class=\"headerlink\" title=\"useDeferredValue\"></a>useDeferredValue</h2><p>React提供了<code>时间切片</code>的模式，这里不详细展开了，允许你在调度任务的过程中安排高优先级的任务，而<code>useDeferredValue</code>就是这个模式的一个hook，它可以<strong>延迟更新部分UI</strong></p>\n<p>在之前的代码中，我们稍作修改：</p>\n<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><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><br><span class=\"line\"><span class=\"keyword\">const</span> [query, setQuery] = <span class=\"title function_\">useState</span>(<span class=\"string\">&#x27;&#x27;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> defreredQuery = <span class=\"title function_\">useDeferredValue</span>(query);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">//...</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">SearchResults</span> <span class=\"attr\">query</span>=<span class=\"string\">&#123;defreredQuery&#125;</span> /&gt;</span></span></span><br></pre></td></tr></table></figure>\n\n<p>当用户<strong>快速</strong>输入一个字符时，<code>SearchResults</code>组件的渲染就会被延迟，这样就尽量减少卡顿了。</p>\n<p><code>useDeferredValue</code>通过延迟状态的更新来实现这个目的，它不同于节流或防抖的固定时间控制，而是根据一系列复杂调度算法来决定延迟的时间，这样可以尽量减少卡顿的发生。</p>\n"},{"title":"React useTransition在性能优化中的使用","date":"2023-07-05T22:37:42.000Z","url":"react-usetransition","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/19](https://github.com/taoliujun/blog/issues/19)\n\n<!--hexo\n---\nurl: react-usetransition\ntags:\n  - react\n---\n-->\n\n`useTransition` is a React Hook that lets you update the state without blocking the UI.\n\n文档中简单一句话说明`useTransition`的用途：不阻塞UI的情况下更新**状态**。\n\n## 解决什么问题？\n\n正常代码下，JavaScript是单线程的，所以执行一段耗时的代码，会阻塞UI的渲染，导致页面卡顿。React提供了**时间切片**的功能来尽量确保一帧中有充足的时间来渲染UI，而`useTransition`就是在这个基础上，可以在不阻塞UI的情况下使用时间分片特性**更新状态**。\n\n\n## 一个例子\n\n先看下卡顿是如何形成的，一个简单的代码，每500ms，更新`name`状态。另外点击按钮的时候，更新一系列状态并渲染到dom中。\n\n```tsx\nconst getDatas = () => {\n    const datas = [];\n    for (let i = 1; i <= 2000; i += 1) {\n        const s = Math.random() * Math.random();\n        datas.push(s);\n    }\n    return datas;\n};\n\nconst Main: FC = () => {\n    const [name, setName] = useState('world');\n\n    const [datas1, setDatas1] = useState<number[]>([]);\n    const [datas2, setDatas2] = useState<number[]>([]);\n    const [datas3, setDatas3] = useState<number[]>([]);\n    const [datas4, setDatas4] = useState<number[]>([]);\n    const [datas5, setDatas5] = useState<number[]>([]);\n    const [datas6, setDatas6] = useState<number[]>([]);\n    const [datas7, setDatas7] = useState<number[]>([]);\n    const [datas8, setDatas8] = useState<number[]>([]);\n\n    const onClick1 = useCallback(() => {\n        setDatas1(getDatas());\n        setDatas2(getDatas());\n        setDatas3(getDatas());\n        setDatas4(getDatas());\n        setDatas5(getDatas());\n        setDatas6(getDatas());\n        setDatas7(getDatas());\n        setDatas8(getDatas());\n    }, []);\n\n    useEffect(() => {\n        window.setInterval(() => {\n            setName(`world ${Math.random()}`);\n        }, 500);\n    }, []);\n\n    return (\n        <div>\n            hello {name}\n            <br />\n            <button onClick={onClick1}>click me</button>\n            <br />\n            <div>\n                {datas1.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas2.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas3.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas4.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas5.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas6.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas7.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas8.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n        </div>\n    );\n};\n```\n\n**首先不点击按钮，观察5秒，没有卡顿现象，性能表现如图：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041609217.png)\n\n可以看到有几个微微凸起的黄色点，对应着每次的`hello`状态更新和渲染，它们的执行时间都在1ms，没有超过一帧的时间。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041610767.png)\n\n选取其中一个黄色的点，查看它的详情。React的调度器、协调器、渲染器创建了对应的任务，分步执行了任务，具体可阅读React架构的相关文章。\n\n**然后连续点几次按钮，`hello`的渲染出现明显的卡顿，性能表现如图：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041608992.png)\n\n在性能图中截取的一段时间中，黄色是脚本执行时间，灰色是UI渲染时间，白色是空闲时间（我停止点击了一会儿），在每帧里，要跑完所有的状态变更和UI渲染，`datas`系列的状态变更和渲染占据了大量的时间，基本是阻塞了`hello`的状态变更和渲染。\n\n**只点击一次，性能表现如图：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041625903.png)\n\n可以看到几个Task，第一个Task就是在更新`datas`系列状态和渲染，它占据了太多帧的时间，导致`hello`的状态变更和渲染被推迟到后面的帧。\n\n## 优化它\n\n前面说到，React的架构中实现了**时间切片**，它允许开发者将*不重要*的变更推迟到后面的帧，这样就可以尽量保证优先执行默认任务。使用`useTransition`改下代码：\n\n```tsx\nconst [pending, startTransition] = useTransition();\n\nconst onClick1 = useCallback(() => {\n    startTransition(() => {\n        setDatas1(getDatas());\n        setDatas2(getDatas());\n        setDatas3(getDatas());\n        setDatas4(getDatas());\n        setDatas5(getDatas());\n        setDatas6(getDatas());\n        setDatas7(getDatas());\n        setDatas8(getDatas());\n    });\n}, []);\n```\n\n**再次连续点击按钮，卡顿现象明显减轻很多，性能表现如下：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041629743.png)\n\n一看起来，执行时间还是很长，那么为什么`hello`渲染看起来不卡顿呢？\n\n**只点一次，看看性能表现：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041631650.png)\n\n查看几个Task的详情，发现`datas`系列状态的更新，被分配在了多个Task中，中间还穿插了`hello`的状态更新的任务。这也印证了`useTransition`的实现背景：将不重要的任务通过时间切片架构，分配到多帧中，优先执行其他任务，从而实现不卡顿的目的。\n\n## 注意事项\n\n* `useTransition`是个hook，它的返回值还包括了一个pending状态，用来表示是否处于时间切片的过程中，可以用来优化UI，比如显示一个loading。\n\n* 你也可以使用`startTransition`这个util函数代替hook的使用。\n\n* 时间切片架构是调度状态变化的，所以`startTransition`的入参函数里，将状态更新标记为可切片，普通的代码段不会被标记。所以简单的说，你还是得将一个状态变更的执行时间控制在5ms内。\n\n\n\n","source":"_posts/react-usetransition.md","raw":"---\ntitle: \"React useTransition在性能优化中的使用\"\ndate: \"2023-07-06T06:37:42Z\"\ncategories:\n  - [React]\n\nurl: react-usetransition\ntags:\n  - react\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/19](https://github.com/taoliujun/blog/issues/19)\n\n<!--hexo\n---\nurl: react-usetransition\ntags:\n  - react\n---\n-->\n\n`useTransition` is a React Hook that lets you update the state without blocking the UI.\n\n文档中简单一句话说明`useTransition`的用途：不阻塞UI的情况下更新**状态**。\n\n## 解决什么问题？\n\n正常代码下，JavaScript是单线程的，所以执行一段耗时的代码，会阻塞UI的渲染，导致页面卡顿。React提供了**时间切片**的功能来尽量确保一帧中有充足的时间来渲染UI，而`useTransition`就是在这个基础上，可以在不阻塞UI的情况下使用时间分片特性**更新状态**。\n\n\n## 一个例子\n\n先看下卡顿是如何形成的，一个简单的代码，每500ms，更新`name`状态。另外点击按钮的时候，更新一系列状态并渲染到dom中。\n\n```tsx\nconst getDatas = () => {\n    const datas = [];\n    for (let i = 1; i <= 2000; i += 1) {\n        const s = Math.random() * Math.random();\n        datas.push(s);\n    }\n    return datas;\n};\n\nconst Main: FC = () => {\n    const [name, setName] = useState('world');\n\n    const [datas1, setDatas1] = useState<number[]>([]);\n    const [datas2, setDatas2] = useState<number[]>([]);\n    const [datas3, setDatas3] = useState<number[]>([]);\n    const [datas4, setDatas4] = useState<number[]>([]);\n    const [datas5, setDatas5] = useState<number[]>([]);\n    const [datas6, setDatas6] = useState<number[]>([]);\n    const [datas7, setDatas7] = useState<number[]>([]);\n    const [datas8, setDatas8] = useState<number[]>([]);\n\n    const onClick1 = useCallback(() => {\n        setDatas1(getDatas());\n        setDatas2(getDatas());\n        setDatas3(getDatas());\n        setDatas4(getDatas());\n        setDatas5(getDatas());\n        setDatas6(getDatas());\n        setDatas7(getDatas());\n        setDatas8(getDatas());\n    }, []);\n\n    useEffect(() => {\n        window.setInterval(() => {\n            setName(`world ${Math.random()}`);\n        }, 500);\n    }, []);\n\n    return (\n        <div>\n            hello {name}\n            <br />\n            <button onClick={onClick1}>click me</button>\n            <br />\n            <div>\n                {datas1.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas2.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas3.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas4.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas5.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas6.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas7.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n            <div>\n                {datas8.map((v) => {\n                    return <div key={v}>{v}</div>;\n                })}\n            </div>\n        </div>\n    );\n};\n```\n\n**首先不点击按钮，观察5秒，没有卡顿现象，性能表现如图：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041609217.png)\n\n可以看到有几个微微凸起的黄色点，对应着每次的`hello`状态更新和渲染，它们的执行时间都在1ms，没有超过一帧的时间。\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041610767.png)\n\n选取其中一个黄色的点，查看它的详情。React的调度器、协调器、渲染器创建了对应的任务，分步执行了任务，具体可阅读React架构的相关文章。\n\n**然后连续点几次按钮，`hello`的渲染出现明显的卡顿，性能表现如图：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041608992.png)\n\n在性能图中截取的一段时间中，黄色是脚本执行时间，灰色是UI渲染时间，白色是空闲时间（我停止点击了一会儿），在每帧里，要跑完所有的状态变更和UI渲染，`datas`系列的状态变更和渲染占据了大量的时间，基本是阻塞了`hello`的状态变更和渲染。\n\n**只点击一次，性能表现如图：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041625903.png)\n\n可以看到几个Task，第一个Task就是在更新`datas`系列状态和渲染，它占据了太多帧的时间，导致`hello`的状态变更和渲染被推迟到后面的帧。\n\n## 优化它\n\n前面说到，React的架构中实现了**时间切片**，它允许开发者将*不重要*的变更推迟到后面的帧，这样就可以尽量保证优先执行默认任务。使用`useTransition`改下代码：\n\n```tsx\nconst [pending, startTransition] = useTransition();\n\nconst onClick1 = useCallback(() => {\n    startTransition(() => {\n        setDatas1(getDatas());\n        setDatas2(getDatas());\n        setDatas3(getDatas());\n        setDatas4(getDatas());\n        setDatas5(getDatas());\n        setDatas6(getDatas());\n        setDatas7(getDatas());\n        setDatas8(getDatas());\n    });\n}, []);\n```\n\n**再次连续点击按钮，卡顿现象明显减轻很多，性能表现如下：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041629743.png)\n\n一看起来，执行时间还是很长，那么为什么`hello`渲染看起来不卡顿呢？\n\n**只点一次，看看性能表现：**\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041631650.png)\n\n查看几个Task的详情，发现`datas`系列状态的更新，被分配在了多个Task中，中间还穿插了`hello`的状态更新的任务。这也印证了`useTransition`的实现背景：将不重要的任务通过时间切片架构，分配到多帧中，优先执行其他任务，从而实现不卡顿的目的。\n\n## 注意事项\n\n* `useTransition`是个hook，它的返回值还包括了一个pending状态，用来表示是否处于时间切片的过程中，可以用来优化UI，比如显示一个loading。\n\n* 你也可以使用`startTransition`这个util函数代替hook的使用。\n\n* 时间切片架构是调度状态变化的，所以`startTransition`的入参函数里，将状态更新标记为可切片，普通的代码段不会被标记。所以简单的说，你还是得将一个状态变更的执行时间控制在5ms内。\n\n\n\n","slug":"react-usetransition","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne75001gi8oh0ik11rjp","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/19\">https://github.com/taoliujun/blog/issues/19</a></p>\n<!--hexo\n---\nurl: react-usetransition\ntags:\n  - react\n---\n-->\n\n<p><code>useTransition</code> is a React Hook that lets you update the state without blocking the UI.</p>\n<p>文档中简单一句话说明<code>useTransition</code>的用途：不阻塞UI的情况下更新<strong>状态</strong>。</p>\n<h2 id=\"解决什么问题？\"><a href=\"#解决什么问题？\" class=\"headerlink\" title=\"解决什么问题？\"></a>解决什么问题？</h2><p>正常代码下，JavaScript是单线程的，所以执行一段耗时的代码，会阻塞UI的渲染，导致页面卡顿。React提供了<strong>时间切片</strong>的功能来尽量确保一帧中有充足的时间来渲染UI，而<code>useTransition</code>就是在这个基础上，可以在不阻塞UI的情况下使用时间分片特性<strong>更新状态</strong>。</p>\n<h2 id=\"一个例子\"><a href=\"#一个例子\" class=\"headerlink\" title=\"一个例子\"></a>一个例子</h2><p>先看下卡顿是如何形成的，一个简单的代码，每500ms，更新<code>name</code>状态。另外点击按钮的时候，更新一系列状态并渲染到dom中。</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title function_\">getDatas</span> = (<span class=\"params\"></span>) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> datas = [];</span><br><span class=\"line\">    <span class=\"keyword\">for</span> (<span class=\"keyword\">let</span> i = <span class=\"number\">1</span>; i &lt;= <span class=\"number\">2000</span>; i += <span class=\"number\">1</span>) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">const</span> s = <span class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>() * <span class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>();</span><br><span class=\"line\">        datas.<span class=\"title function_\">push</span>(s);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> datas;</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [name, setName] = <span class=\"title function_\">useState</span>(<span class=\"string\">&#x27;world&#x27;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas1, setDatas1] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas2, setDatas2] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas3, setDatas3] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas4, setDatas4] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas5, setDatas5] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas6, setDatas6] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas7, setDatas7] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas8, setDatas8] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> onClick1 = <span class=\"title function_\">useCallback</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"title function_\">setDatas1</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas2</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas3</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas4</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas5</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas6</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas7</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas8</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">    &#125;, []);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"title function_\">useEffect</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"variable language_\">window</span>.<span class=\"built_in\">setInterval</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">            <span class=\"title function_\">setName</span>(<span class=\"string\">`world <span class=\"subst\">$&#123;<span class=\"built_in\">Math</span>.random()&#125;</span>`</span>);</span><br><span class=\"line\">        &#125;, <span class=\"number\">500</span>);</span><br><span class=\"line\">    &#125;, []);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</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\">            hello &#123;name&#125;</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\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;onClick1&#125;</span>&gt;</span>click me<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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas1.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas2.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas3.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas4.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas5.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas6.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas7.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas8.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\">    );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p><strong>首先不点击按钮，观察5秒，没有卡顿现象，性能表现如图：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041609217.png\"></p>\n<p>可以看到有几个微微凸起的黄色点，对应着每次的<code>hello</code>状态更新和渲染，它们的执行时间都在1ms，没有超过一帧的时间。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041610767.png\"></p>\n<p>选取其中一个黄色的点，查看它的详情。React的调度器、协调器、渲染器创建了对应的任务，分步执行了任务，具体可阅读React架构的相关文章。</p>\n<p><strong>然后连续点几次按钮，<code>hello</code>的渲染出现明显的卡顿，性能表现如图：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041608992.png\"></p>\n<p>在性能图中截取的一段时间中，黄色是脚本执行时间，灰色是UI渲染时间，白色是空闲时间（我停止点击了一会儿），在每帧里，要跑完所有的状态变更和UI渲染，<code>datas</code>系列的状态变更和渲染占据了大量的时间，基本是阻塞了<code>hello</code>的状态变更和渲染。</p>\n<p><strong>只点击一次，性能表现如图：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041625903.png\"></p>\n<p>可以看到几个Task，第一个Task就是在更新<code>datas</code>系列状态和渲染，它占据了太多帧的时间，导致<code>hello</code>的状态变更和渲染被推迟到后面的帧。</p>\n<h2 id=\"优化它\"><a href=\"#优化它\" class=\"headerlink\" title=\"优化它\"></a>优化它</h2><p>前面说到，React的架构中实现了<strong>时间切片</strong>，它允许开发者将<em>不重要</em>的变更推迟到后面的帧，这样就可以尽量保证优先执行默认任务。使用<code>useTransition</code>改下代码：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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> [pending, startTransition] = <span class=\"title function_\">useTransition</span>();</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> onClick1 = <span class=\"title function_\">useCallback</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"title function_\">startTransition</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"title function_\">setDatas1</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas2</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas3</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas4</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas5</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas6</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas7</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas8</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">&#125;, []);</span><br></pre></td></tr></table></figure>\n\n<p><strong>再次连续点击按钮，卡顿现象明显减轻很多，性能表现如下：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041629743.png\"></p>\n<p>一看起来，执行时间还是很长，那么为什么<code>hello</code>渲染看起来不卡顿呢？</p>\n<p><strong>只点一次，看看性能表现：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041631650.png\"></p>\n<p>查看几个Task的详情，发现<code>datas</code>系列状态的更新，被分配在了多个Task中，中间还穿插了<code>hello</code>的状态更新的任务。这也印证了<code>useTransition</code>的实现背景：将不重要的任务通过时间切片架构，分配到多帧中，优先执行其他任务，从而实现不卡顿的目的。</p>\n<h2 id=\"注意事项\"><a href=\"#注意事项\" class=\"headerlink\" title=\"注意事项\"></a>注意事项</h2><ul>\n<li><p><code>useTransition</code>是个hook，它的返回值还包括了一个pending状态，用来表示是否处于时间切片的过程中，可以用来优化UI，比如显示一个loading。</p>\n</li>\n<li><p>你也可以使用<code>startTransition</code>这个util函数代替hook的使用。</p>\n</li>\n<li><p>时间切片架构是调度状态变化的，所以<code>startTransition</code>的入参函数里，将状态更新标记为可切片，普通的代码段不会被标记。所以简单的说，你还是得将一个状态变更的执行时间控制在5ms内。</p>\n</li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/19\">https://github.com/taoliujun/blog/issues/19</a></p>\n<!--hexo\n---\nurl: react-usetransition\ntags:\n  - react\n---\n-->\n\n<p><code>useTransition</code> is a React Hook that lets you update the state without blocking the UI.</p>\n<p>文档中简单一句话说明<code>useTransition</code>的用途：不阻塞UI的情况下更新<strong>状态</strong>。</p>\n<h2 id=\"解决什么问题？\"><a href=\"#解决什么问题？\" class=\"headerlink\" title=\"解决什么问题？\"></a>解决什么问题？</h2><p>正常代码下，JavaScript是单线程的，所以执行一段耗时的代码，会阻塞UI的渲染，导致页面卡顿。React提供了<strong>时间切片</strong>的功能来尽量确保一帧中有充足的时间来渲染UI，而<code>useTransition</code>就是在这个基础上，可以在不阻塞UI的情况下使用时间分片特性<strong>更新状态</strong>。</p>\n<h2 id=\"一个例子\"><a href=\"#一个例子\" class=\"headerlink\" title=\"一个例子\"></a>一个例子</h2><p>先看下卡顿是如何形成的，一个简单的代码，每500ms，更新<code>name</code>状态。另外点击按钮的时候，更新一系列状态并渲染到dom中。</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title function_\">getDatas</span> = (<span class=\"params\"></span>) =&gt; &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> datas = [];</span><br><span class=\"line\">    <span class=\"keyword\">for</span> (<span class=\"keyword\">let</span> i = <span class=\"number\">1</span>; i &lt;= <span class=\"number\">2000</span>; i += <span class=\"number\">1</span>) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">const</span> s = <span class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>() * <span class=\"title class_\">Math</span>.<span class=\"title function_\">random</span>();</span><br><span class=\"line\">        datas.<span class=\"title function_\">push</span>(s);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> datas;</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [name, setName] = <span class=\"title function_\">useState</span>(<span class=\"string\">&#x27;world&#x27;</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas1, setDatas1] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas2, setDatas2] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas3, setDatas3] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas4, setDatas4] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas5, setDatas5] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas6, setDatas6] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas7, setDatas7] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [datas8, setDatas8] = useState&lt;<span class=\"built_in\">number</span>[]&gt;([]);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">const</span> onClick1 = <span class=\"title function_\">useCallback</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"title function_\">setDatas1</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas2</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas3</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas4</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas5</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas6</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas7</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas8</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">    &#125;, []);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"title function_\">useEffect</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"variable language_\">window</span>.<span class=\"built_in\">setInterval</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">            <span class=\"title function_\">setName</span>(<span class=\"string\">`world <span class=\"subst\">$&#123;<span class=\"built_in\">Math</span>.random()&#125;</span>`</span>);</span><br><span class=\"line\">        &#125;, <span class=\"number\">500</span>);</span><br><span class=\"line\">    &#125;, []);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</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\">            hello &#123;name&#125;</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\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;onClick1&#125;</span>&gt;</span>click me<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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas1.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas2.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas3.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas4.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas5.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas6.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas7.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                &#123;datas8.map((v) =&gt; &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    return <span class=\"tag\">&lt;<span class=\"name\">div</span> <span class=\"attr\">key</span>=<span class=\"string\">&#123;v&#125;</span>&gt;</span>&#123;v&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span>;</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;)&#125;</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\">div</span>&gt;</span></span></span><br><span class=\"line\">    );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p><strong>首先不点击按钮，观察5秒，没有卡顿现象，性能表现如图：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041609217.png\"></p>\n<p>可以看到有几个微微凸起的黄色点，对应着每次的<code>hello</code>状态更新和渲染，它们的执行时间都在1ms，没有超过一帧的时间。</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041610767.png\"></p>\n<p>选取其中一个黄色的点，查看它的详情。React的调度器、协调器、渲染器创建了对应的任务，分步执行了任务，具体可阅读React架构的相关文章。</p>\n<p><strong>然后连续点几次按钮，<code>hello</code>的渲染出现明显的卡顿，性能表现如图：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041608992.png\"></p>\n<p>在性能图中截取的一段时间中，黄色是脚本执行时间，灰色是UI渲染时间，白色是空闲时间（我停止点击了一会儿），在每帧里，要跑完所有的状态变更和UI渲染，<code>datas</code>系列的状态变更和渲染占据了大量的时间，基本是阻塞了<code>hello</code>的状态变更和渲染。</p>\n<p><strong>只点击一次，性能表现如图：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041625903.png\"></p>\n<p>可以看到几个Task，第一个Task就是在更新<code>datas</code>系列状态和渲染，它占据了太多帧的时间，导致<code>hello</code>的状态变更和渲染被推迟到后面的帧。</p>\n<h2 id=\"优化它\"><a href=\"#优化它\" class=\"headerlink\" title=\"优化它\"></a>优化它</h2><p>前面说到，React的架构中实现了<strong>时间切片</strong>，它允许开发者将<em>不重要</em>的变更推迟到后面的帧，这样就可以尽量保证优先执行默认任务。使用<code>useTransition</code>改下代码：</p>\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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> [pending, startTransition] = <span class=\"title function_\">useTransition</span>();</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> onClick1 = <span class=\"title function_\">useCallback</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"title function_\">startTransition</span>(<span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"title function_\">setDatas1</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas2</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas3</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas4</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas5</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas6</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas7</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">        <span class=\"title function_\">setDatas8</span>(<span class=\"title function_\">getDatas</span>());</span><br><span class=\"line\">    &#125;);</span><br><span class=\"line\">&#125;, []);</span><br></pre></td></tr></table></figure>\n\n<p><strong>再次连续点击按钮，卡顿现象明显减轻很多，性能表现如下：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041629743.png\"></p>\n<p>一看起来，执行时间还是很长，那么为什么<code>hello</code>渲染看起来不卡顿呢？</p>\n<p><strong>只点一次，看看性能表现：</strong></p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202307041631650.png\"></p>\n<p>查看几个Task的详情，发现<code>datas</code>系列状态的更新，被分配在了多个Task中，中间还穿插了<code>hello</code>的状态更新的任务。这也印证了<code>useTransition</code>的实现背景：将不重要的任务通过时间切片架构，分配到多帧中，优先执行其他任务，从而实现不卡顿的目的。</p>\n<h2 id=\"注意事项\"><a href=\"#注意事项\" class=\"headerlink\" title=\"注意事项\"></a>注意事项</h2><ul>\n<li><p><code>useTransition</code>是个hook，它的返回值还包括了一个pending状态，用来表示是否处于时间切片的过程中，可以用来优化UI，比如显示一个loading。</p>\n</li>\n<li><p>你也可以使用<code>startTransition</code>这个util函数代替hook的使用。</p>\n</li>\n<li><p>时间切片架构是调度状态变化的，所以<code>startTransition</code>的入参函数里，将状态更新标记为可切片，普通的代码段不会被标记。所以简单的说，你还是得将一个状态变更的执行时间控制在5ms内。</p>\n</li>\n</ul>\n"},{"title":"React公共状态利器 - Zustand","date":"2023-12-12T22:46:26.000Z","url":"react-zustand","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/35](https://github.com/taoliujun/blog/issues/35)\n\n<!--hexo\n---\nurl: react-zustand\ntags:\n  - zustand\n  - react store\n---\n-->\n\n官方文档：https://docs.pmnd.rs/zustand\n\n# 如何使用\n\n**Zustand** 是一个非常简单粗暴的全局状态管理库，它的使用有多简单呢？如下：\n\n```bash\n> pnpm add zustand\n```\n\n```ts\n// useFormStateStore.ts\nimport { create } from 'zustand';\n\ninterface State {\n    loading: boolean;\n    disabled: boolean;\n    setLoadingByAge: (value: number) => void;\n}\n\nexport const useFormStateStore = create<State>((set) => ({\n    loading: false,\n    disabled: false,\n    setLoadingByAge: (value) => {\n        set({ loading: value > 10 });\n    },\n}));\n```\n\n```tsx\n// app.tsx\nimport { useState, type FC } from 'react';\nimport { useFormStateStore } from './useFormStateStore';\nimport { Button } from '@/components/Button';\n\nconst Loading: FC = () => {\n    const { loading } = useFormStateStore();\n    return <div>loading: {String(loading)}</div>;\n};\n\nconst Disabled: FC = () => {\n    const { disabled } = useFormStateStore();\n    return <div>disabled: {String(disabled)}</div>;\n};\n\nconst Main: FC = () => {\n    const { setLoadingByAge } = useFormStateStore();\n    const [age, setAge] = useState(0);\n\n    return (\n        <div>\n            <Loading />\n            <br />\n            <Disabled />\n            <br />\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        loading: true,\n                    });\n                }}\n            >\n                set loading true\n            </Button>\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        loading: false,\n                    });\n                }}\n            >\n                set loading false\n            </Button>\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        disabled: true,\n                    });\n                }}\n            >\n                set disabled true\n            </Button>\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        disabled: false,\n                    });\n                }}\n            >\n                set disabled false\n            </Button>\n            <br />\n            <input\n                type=\"number\"\n                value={age}\n                onChange={(e) => {\n                    setAge(Number(e.target.value));\n                }}\n            />\n            <br />\n            <Button\n                onClick={() => {\n                    setLoadingByAge(age);\n                }}\n            >\n                set loading by age\n            </Button>\n        </div>\n    );\n};\n\nexport default Main;\n```\n\n在`useFormStateStore.ts`中定义了状态，然后在`app.tsx`中使用，就是这么简单粗暴！这里有几点介绍下：\n\n- 对于简单的状态更新，使用`setState`方法就可以，它的参数是一个对象，这个对象就是你要更新的状态，它会和之前的状态进行合并，然后返回一个新的状态，从而触发组件更新。\n\n- 对于需要通用的逻辑处理的状态更新，参照`useFormStateStore.ts`中的`setLoadingByAge`方法，将它作为状态里的一个方法就行了。\n\n# Zustand\n\n使用非常简单，API也很少，它的原理是使用了`Proxy`，所以它的性能非常好。\n\n# 相比Redux\n\n相比Redux，Zustand的代码非常简单明了，不需要使用`connect`、`mapStateToProps`、`mapDispatchToProps`这些方法。\n\n# 相比React Context\n\nReact Context需要一个`Provider`包裹组件以传递状态，需要一个`useContext`使用状态，光从层级上就让人绕起来了。而Zustand只需要一个`create`方法，就可以使用了，且状态是全局的，不需要传递。\n\n\n\n\n","source":"_posts/react-zustand.md","raw":"---\ntitle: \"React公共状态利器 - Zustand\"\ndate: \"2023-12-13T06:46:26Z\"\ncategories:\n  - [React]\n\nurl: react-zustand\ntags:\n  - zustand\n  - react store\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/35](https://github.com/taoliujun/blog/issues/35)\n\n<!--hexo\n---\nurl: react-zustand\ntags:\n  - zustand\n  - react store\n---\n-->\n\n官方文档：https://docs.pmnd.rs/zustand\n\n# 如何使用\n\n**Zustand** 是一个非常简单粗暴的全局状态管理库，它的使用有多简单呢？如下：\n\n```bash\n> pnpm add zustand\n```\n\n```ts\n// useFormStateStore.ts\nimport { create } from 'zustand';\n\ninterface State {\n    loading: boolean;\n    disabled: boolean;\n    setLoadingByAge: (value: number) => void;\n}\n\nexport const useFormStateStore = create<State>((set) => ({\n    loading: false,\n    disabled: false,\n    setLoadingByAge: (value) => {\n        set({ loading: value > 10 });\n    },\n}));\n```\n\n```tsx\n// app.tsx\nimport { useState, type FC } from 'react';\nimport { useFormStateStore } from './useFormStateStore';\nimport { Button } from '@/components/Button';\n\nconst Loading: FC = () => {\n    const { loading } = useFormStateStore();\n    return <div>loading: {String(loading)}</div>;\n};\n\nconst Disabled: FC = () => {\n    const { disabled } = useFormStateStore();\n    return <div>disabled: {String(disabled)}</div>;\n};\n\nconst Main: FC = () => {\n    const { setLoadingByAge } = useFormStateStore();\n    const [age, setAge] = useState(0);\n\n    return (\n        <div>\n            <Loading />\n            <br />\n            <Disabled />\n            <br />\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        loading: true,\n                    });\n                }}\n            >\n                set loading true\n            </Button>\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        loading: false,\n                    });\n                }}\n            >\n                set loading false\n            </Button>\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        disabled: true,\n                    });\n                }}\n            >\n                set disabled true\n            </Button>\n            <Button\n                onClick={() => {\n                    useFormStateStore.setState({\n                        disabled: false,\n                    });\n                }}\n            >\n                set disabled false\n            </Button>\n            <br />\n            <input\n                type=\"number\"\n                value={age}\n                onChange={(e) => {\n                    setAge(Number(e.target.value));\n                }}\n            />\n            <br />\n            <Button\n                onClick={() => {\n                    setLoadingByAge(age);\n                }}\n            >\n                set loading by age\n            </Button>\n        </div>\n    );\n};\n\nexport default Main;\n```\n\n在`useFormStateStore.ts`中定义了状态，然后在`app.tsx`中使用，就是这么简单粗暴！这里有几点介绍下：\n\n- 对于简单的状态更新，使用`setState`方法就可以，它的参数是一个对象，这个对象就是你要更新的状态，它会和之前的状态进行合并，然后返回一个新的状态，从而触发组件更新。\n\n- 对于需要通用的逻辑处理的状态更新，参照`useFormStateStore.ts`中的`setLoadingByAge`方法，将它作为状态里的一个方法就行了。\n\n# Zustand\n\n使用非常简单，API也很少，它的原理是使用了`Proxy`，所以它的性能非常好。\n\n# 相比Redux\n\n相比Redux，Zustand的代码非常简单明了，不需要使用`connect`、`mapStateToProps`、`mapDispatchToProps`这些方法。\n\n# 相比React Context\n\nReact Context需要一个`Provider`包裹组件以传递状态，需要一个`useContext`使用状态，光从层级上就让人绕起来了。而Zustand只需要一个`create`方法，就可以使用了，且状态是全局的，不需要传递。\n\n\n\n\n","slug":"react-zustand","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne75001ji8oh9i2l3g9s","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/35\">https://github.com/taoliujun/blog/issues/35</a></p>\n<!--hexo\n---\nurl: react-zustand\ntags:\n  - zustand\n  - react store\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.pmnd.rs/zustand\">https://docs.pmnd.rs/zustand</a></p>\n<h1 id=\"如何使用\"><a href=\"#如何使用\" class=\"headerlink\" title=\"如何使用\"></a>如何使用</h1><p><strong>Zustand</strong> 是一个非常简单粗暴的全局状态管理库，它的使用有多简单呢？如下：</p>\n<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\">&gt; pnpm add zustand</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">// useFormStateStore.ts</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; create &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;zustand&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">interface</span> <span class=\"title class_\">State</span> &#123;</span><br><span class=\"line\">    <span class=\"attr\">loading</span>: <span class=\"built_in\">boolean</span>;</span><br><span class=\"line\">    <span class=\"attr\">disabled</span>: <span class=\"built_in\">boolean</span>;</span><br><span class=\"line\">    <span class=\"attr\">setLoadingByAge</span>: <span class=\"function\">(<span class=\"params\">value: <span class=\"built_in\">number</span></span>) =&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 class=\"keyword\">export</span> <span class=\"keyword\">const</span> useFormStateStore = create&lt;<span class=\"title class_\">State</span>&gt;(<span class=\"function\">(<span class=\"params\">set</span>) =&gt;</span> (&#123;</span><br><span class=\"line\">    <span class=\"attr\">loading</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\">    <span class=\"attr\">disabled</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\">    <span class=\"attr\">setLoadingByAge</span>: <span class=\"function\">(<span class=\"params\">value</span>) =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"title function_\">set</span>(&#123; <span class=\"attr\">loading</span>: value &gt; <span class=\"number\">10</span> &#125;);</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">&#125;));</span><br></pre></td></tr></table></figure>\n\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"comment\">// app.tsx</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; useState, <span class=\"keyword\">type</span> <span class=\"variable constant_\">FC</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;react&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; useFormStateStore &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;./useFormStateStore&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; <span class=\"title class_\">Button</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;@/components/Button&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title class_\">Loading</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> &#123; loading &#125; = <span class=\"title function_\">useFormStateStore</span>();</span><br><span class=\"line\">    <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>loading: &#123;String(loading)&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Disabled</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> &#123; disabled &#125; = <span class=\"title function_\">useFormStateStore</span>();</span><br><span class=\"line\">    <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>disabled: &#123;String(disabled)&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> &#123; setLoadingByAge &#125; = <span class=\"title function_\">useFormStateStore</span>();</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [age, setAge] = <span class=\"title function_\">useState</span>(<span class=\"number\">0</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</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\">Loading</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\">Disabled</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\">Button</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        loading: true,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set loading true</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        loading: false,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set loading false</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        disabled: true,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set disabled true</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        disabled: false,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set disabled false</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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\">input</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">type</span>=<span class=\"string\">&quot;number&quot;</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">value</span>=<span class=\"string\">&#123;age&#125;</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    setAge(Number(e.target.value));</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            /&gt;</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\">Button</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    setLoadingByAge(age);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set loading by age</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"title class_\">Main</span>;</span><br></pre></td></tr></table></figure>\n\n<p>在<code>useFormStateStore.ts</code>中定义了状态，然后在<code>app.tsx</code>中使用，就是这么简单粗暴！这里有几点介绍下：</p>\n<ul>\n<li><p>对于简单的状态更新，使用<code>setState</code>方法就可以，它的参数是一个对象，这个对象就是你要更新的状态，它会和之前的状态进行合并，然后返回一个新的状态，从而触发组件更新。</p>\n</li>\n<li><p>对于需要通用的逻辑处理的状态更新，参照<code>useFormStateStore.ts</code>中的<code>setLoadingByAge</code>方法，将它作为状态里的一个方法就行了。</p>\n</li>\n</ul>\n<h1 id=\"Zustand\"><a href=\"#Zustand\" class=\"headerlink\" title=\"Zustand\"></a>Zustand</h1><p>使用非常简单，API也很少，它的原理是使用了<code>Proxy</code>，所以它的性能非常好。</p>\n<h1 id=\"相比Redux\"><a href=\"#相比Redux\" class=\"headerlink\" title=\"相比Redux\"></a>相比Redux</h1><p>相比Redux，Zustand的代码非常简单明了，不需要使用<code>connect</code>、<code>mapStateToProps</code>、<code>mapDispatchToProps</code>这些方法。</p>\n<h1 id=\"相比React-Context\"><a href=\"#相比React-Context\" class=\"headerlink\" title=\"相比React Context\"></a>相比React Context</h1><p>React Context需要一个<code>Provider</code>包裹组件以传递状态，需要一个<code>useContext</code>使用状态，光从层级上就让人绕起来了。而Zustand只需要一个<code>create</code>方法，就可以使用了，且状态是全局的，不需要传递。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/35\">https://github.com/taoliujun/blog/issues/35</a></p>\n<!--hexo\n---\nurl: react-zustand\ntags:\n  - zustand\n  - react store\n---\n-->\n\n<p>官方文档：<a href=\"https://docs.pmnd.rs/zustand\">https://docs.pmnd.rs/zustand</a></p>\n<h1 id=\"如何使用\"><a href=\"#如何使用\" class=\"headerlink\" title=\"如何使用\"></a>如何使用</h1><p><strong>Zustand</strong> 是一个非常简单粗暴的全局状态管理库，它的使用有多简单呢？如下：</p>\n<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\">&gt; pnpm add zustand</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">// useFormStateStore.ts</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; create &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;zustand&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">interface</span> <span class=\"title class_\">State</span> &#123;</span><br><span class=\"line\">    <span class=\"attr\">loading</span>: <span class=\"built_in\">boolean</span>;</span><br><span class=\"line\">    <span class=\"attr\">disabled</span>: <span class=\"built_in\">boolean</span>;</span><br><span class=\"line\">    <span class=\"attr\">setLoadingByAge</span>: <span class=\"function\">(<span class=\"params\">value: <span class=\"built_in\">number</span></span>) =&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 class=\"keyword\">export</span> <span class=\"keyword\">const</span> useFormStateStore = create&lt;<span class=\"title class_\">State</span>&gt;(<span class=\"function\">(<span class=\"params\">set</span>) =&gt;</span> (&#123;</span><br><span class=\"line\">    <span class=\"attr\">loading</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\">    <span class=\"attr\">disabled</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\">    <span class=\"attr\">setLoadingByAge</span>: <span class=\"function\">(<span class=\"params\">value</span>) =&gt;</span> &#123;</span><br><span class=\"line\">        <span class=\"title function_\">set</span>(&#123; <span class=\"attr\">loading</span>: value &gt; <span class=\"number\">10</span> &#125;);</span><br><span class=\"line\">    &#125;,</span><br><span class=\"line\">&#125;));</span><br></pre></td></tr></table></figure>\n\n<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><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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=\"comment\">// app.tsx</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; useState, <span class=\"keyword\">type</span> <span class=\"variable constant_\">FC</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;react&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; useFormStateStore &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;./useFormStateStore&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; <span class=\"title class_\">Button</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;@/components/Button&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"title class_\">Loading</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> &#123; loading &#125; = <span class=\"title function_\">useFormStateStore</span>();</span><br><span class=\"line\">    <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>loading: &#123;String(loading)&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Disabled</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> &#123; disabled &#125; = <span class=\"title function_\">useFormStateStore</span>();</span><br><span class=\"line\">    <span class=\"keyword\">return</span> <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">div</span>&gt;</span>disabled: &#123;String(disabled)&#125;<span class=\"tag\">&lt;/<span class=\"name\">div</span>&gt;</span></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 class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">const</span> &#123; setLoadingByAge &#125; = <span class=\"title function_\">useFormStateStore</span>();</span><br><span class=\"line\">    <span class=\"keyword\">const</span> [age, setAge] = <span class=\"title function_\">useState</span>(<span class=\"number\">0</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"keyword\">return</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\">Loading</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\">Disabled</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\">Button</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        loading: true,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set loading true</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        loading: false,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set loading false</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        disabled: true,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set disabled true</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    useFormStateStore.setState(&#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                        disabled: false,</span></span><br><span class=\"line\"><span class=\"language-xml\">                    &#125;);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set disabled false</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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\">input</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">type</span>=<span class=\"string\">&quot;number&quot;</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">value</span>=<span class=\"string\">&#123;age&#125;</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onChange</span>=<span class=\"string\">&#123;(e)</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    setAge(Number(e.target.value));</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            /&gt;</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\">Button</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\">                <span class=\"attr\">onClick</span>=<span class=\"string\">&#123;()</span> =&gt;</span> &#123;</span></span><br><span class=\"line\"><span class=\"language-xml\">                    setLoadingByAge(age);</span></span><br><span class=\"line\"><span class=\"language-xml\">                &#125;&#125;</span></span><br><span class=\"line\"><span class=\"language-xml\">            &gt;</span></span><br><span class=\"line\"><span class=\"language-xml\">                set loading by age</span></span><br><span class=\"line\"><span class=\"language-xml\">            <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><br><span class=\"line\">&#125;;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"title class_\">Main</span>;</span><br></pre></td></tr></table></figure>\n\n<p>在<code>useFormStateStore.ts</code>中定义了状态，然后在<code>app.tsx</code>中使用，就是这么简单粗暴！这里有几点介绍下：</p>\n<ul>\n<li><p>对于简单的状态更新，使用<code>setState</code>方法就可以，它的参数是一个对象，这个对象就是你要更新的状态，它会和之前的状态进行合并，然后返回一个新的状态，从而触发组件更新。</p>\n</li>\n<li><p>对于需要通用的逻辑处理的状态更新，参照<code>useFormStateStore.ts</code>中的<code>setLoadingByAge</code>方法，将它作为状态里的一个方法就行了。</p>\n</li>\n</ul>\n<h1 id=\"Zustand\"><a href=\"#Zustand\" class=\"headerlink\" title=\"Zustand\"></a>Zustand</h1><p>使用非常简单，API也很少，它的原理是使用了<code>Proxy</code>，所以它的性能非常好。</p>\n<h1 id=\"相比Redux\"><a href=\"#相比Redux\" class=\"headerlink\" title=\"相比Redux\"></a>相比Redux</h1><p>相比Redux，Zustand的代码非常简单明了，不需要使用<code>connect</code>、<code>mapStateToProps</code>、<code>mapDispatchToProps</code>这些方法。</p>\n<h1 id=\"相比React-Context\"><a href=\"#相比React-Context\" class=\"headerlink\" title=\"相比React Context\"></a>相比React Context</h1><p>React Context需要一个<code>Provider</code>包裹组件以传递状态，需要一个<code>useContext</code>使用状态，光从层级上就让人绕起来了。而Zustand只需要一个<code>create</code>方法，就可以使用了，且状态是全局的，不需要传递。</p>\n"},{"title":"snapshot对单测覆盖率的影响以及应对方案","date":"2024-01-09T00:44:02.000Z","url":"snapshot-impact-on-coverage","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/46](https://github.com/taoliujun/blog/issues/46)\n\n<!--hexo\n---\nurl: snapshot-impact-on-coverage\ntags:\n  - jest\n---\n-->\n\nJest snapshot是把双刃剑，虽然使用它可以快速的编写测试用例，但它导致开发者忽略了测试用例的细节设计。\n\n## 问题\n\n试想一个场景，有一个方法返回了复杂的结构，开发者A由于懒惰或自信以后能根据snapshot的结果来修复问题，而只写了snapshot。过了一段时间，开发者A或B修改了该方法，发现snapshot匹配失败，那么他会这样做：\n\n1. 仔细检查匹配失败的原因，然后或修改代码、或更新snapshot。\n2. 直接更新snapshot。\n\n我相信，大部分人都会选择第二种方式，因为这样更快，更简单。但后果是，大家都只关心了方法的结果，而忽略了方法的细节设计，这样的测试用例是不可靠的。即便在pull request环节，Reviewers面对难以阅读的snapshot文件，也往往是选择了approve。\n\n所以，需要一个方案来实现几个目的：\n\n- 保留snapshot对复杂结构进行测试。\n- snapshot不提高覆盖率，因为低覆盖率会警告开发者去关注测试用例的细节设计。\n\n## 方案\n\n因为jest的限制，执行用例肯定会影响覆盖率。那么可以执行两次用例，一次是执行包含snapshot的文件来校验用例，一次是执行不包含snapshot的文件来生成测试覆盖率。\n\n于是，新增两个`script`：\n\n```json\n// package.json\n\"scripts\": {\n  \"test\": \"pnpm exec jest\",\n  \"test:coverage\": \"pnpm exec jest --config=jest.coverage.config.js\",\n},\n```\n\n默认的`jest.config.js`配置不包含覆盖率配置，而`jest.coverage.config.js`包含覆盖率配置。\n\n```js\n// jest.config.js\nmodule.exports = {\n    // ...\n};\n```\n\n```js\n// jest.coverage.config.js\nconst baseConfig = require('./jest.config');\n\nmodule.exports = {\n    ...baseConfig,\n\n    testMatch: ['**/src/**/__tests__/**/*.ts', '!**/src/**/__tests__/**/*.snap.test.ts'],\n\n    collectCoverage: true,\n    collectCoverageFrom: ['src/**/*.ts', '!src/**/*.snap.test.ts', '!src/index.ts'],\n    coverageDirectory: 'reports/jest',\n    coverageThreshold: { global: { lines: 90, branches: 50 } },\n    coverageReporters: ['html'],\n};\n```\n\n在`jest.coverage.config.js`中，`testMatch`排除执行`.snap.test.ts`用例文件，`collectCoverageFrom`也排除了`.snap.test.ts`文件本身作为源码文件被收集的问题。\n\n接下来，只需要把包含`toMatchSnapshot`等方法的测试用例，单独成文件且命名为`*.snap.test.ts`，就可以了。\n\n\n\n","source":"_posts/snapshot-impact-on-coverage.md","raw":"---\ntitle: \"snapshot对单测覆盖率的影响以及应对方案\"\ndate: \"2024-01-09T08:44:02Z\"\ncategories:\n  - [工程化]\n\nurl: snapshot-impact-on-coverage\ntags:\n  - jest\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/46](https://github.com/taoliujun/blog/issues/46)\n\n<!--hexo\n---\nurl: snapshot-impact-on-coverage\ntags:\n  - jest\n---\n-->\n\nJest snapshot是把双刃剑，虽然使用它可以快速的编写测试用例，但它导致开发者忽略了测试用例的细节设计。\n\n## 问题\n\n试想一个场景，有一个方法返回了复杂的结构，开发者A由于懒惰或自信以后能根据snapshot的结果来修复问题，而只写了snapshot。过了一段时间，开发者A或B修改了该方法，发现snapshot匹配失败，那么他会这样做：\n\n1. 仔细检查匹配失败的原因，然后或修改代码、或更新snapshot。\n2. 直接更新snapshot。\n\n我相信，大部分人都会选择第二种方式，因为这样更快，更简单。但后果是，大家都只关心了方法的结果，而忽略了方法的细节设计，这样的测试用例是不可靠的。即便在pull request环节，Reviewers面对难以阅读的snapshot文件，也往往是选择了approve。\n\n所以，需要一个方案来实现几个目的：\n\n- 保留snapshot对复杂结构进行测试。\n- snapshot不提高覆盖率，因为低覆盖率会警告开发者去关注测试用例的细节设计。\n\n## 方案\n\n因为jest的限制，执行用例肯定会影响覆盖率。那么可以执行两次用例，一次是执行包含snapshot的文件来校验用例，一次是执行不包含snapshot的文件来生成测试覆盖率。\n\n于是，新增两个`script`：\n\n```json\n// package.json\n\"scripts\": {\n  \"test\": \"pnpm exec jest\",\n  \"test:coverage\": \"pnpm exec jest --config=jest.coverage.config.js\",\n},\n```\n\n默认的`jest.config.js`配置不包含覆盖率配置，而`jest.coverage.config.js`包含覆盖率配置。\n\n```js\n// jest.config.js\nmodule.exports = {\n    // ...\n};\n```\n\n```js\n// jest.coverage.config.js\nconst baseConfig = require('./jest.config');\n\nmodule.exports = {\n    ...baseConfig,\n\n    testMatch: ['**/src/**/__tests__/**/*.ts', '!**/src/**/__tests__/**/*.snap.test.ts'],\n\n    collectCoverage: true,\n    collectCoverageFrom: ['src/**/*.ts', '!src/**/*.snap.test.ts', '!src/index.ts'],\n    coverageDirectory: 'reports/jest',\n    coverageThreshold: { global: { lines: 90, branches: 50 } },\n    coverageReporters: ['html'],\n};\n```\n\n在`jest.coverage.config.js`中，`testMatch`排除执行`.snap.test.ts`用例文件，`collectCoverageFrom`也排除了`.snap.test.ts`文件本身作为源码文件被收集的问题。\n\n接下来，只需要把包含`toMatchSnapshot`等方法的测试用例，单独成文件且命名为`*.snap.test.ts`，就可以了。\n\n\n\n","slug":"snapshot-impact-on-coverage","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne76001ni8oh2e325nn8","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/46\">https://github.com/taoliujun/blog/issues/46</a></p>\n<!--hexo\n---\nurl: snapshot-impact-on-coverage\ntags:\n  - jest\n---\n-->\n\n<p>Jest snapshot是把双刃剑，虽然使用它可以快速的编写测试用例，但它导致开发者忽略了测试用例的细节设计。</p>\n<h2 id=\"问题\"><a href=\"#问题\" class=\"headerlink\" title=\"问题\"></a>问题</h2><p>试想一个场景，有一个方法返回了复杂的结构，开发者A由于懒惰或自信以后能根据snapshot的结果来修复问题，而只写了snapshot。过了一段时间，开发者A或B修改了该方法，发现snapshot匹配失败，那么他会这样做：</p>\n<ol>\n<li>仔细检查匹配失败的原因，然后或修改代码、或更新snapshot。</li>\n<li>直接更新snapshot。</li>\n</ol>\n<p>我相信，大部分人都会选择第二种方式，因为这样更快，更简单。但后果是，大家都只关心了方法的结果，而忽略了方法的细节设计，这样的测试用例是不可靠的。即便在pull request环节，Reviewers面对难以阅读的snapshot文件，也往往是选择了approve。</p>\n<p>所以，需要一个方案来实现几个目的：</p>\n<ul>\n<li>保留snapshot对复杂结构进行测试。</li>\n<li>snapshot不提高覆盖率，因为低覆盖率会警告开发者去关注测试用例的细节设计。</li>\n</ul>\n<h2 id=\"方案\"><a href=\"#方案\" class=\"headerlink\" title=\"方案\"></a>方案</h2><p>因为jest的限制，执行用例肯定会影响覆盖率。那么可以执行两次用例，一次是执行包含snapshot的文件来校验用例，一次是执行不包含snapshot的文件来生成测试覆盖率。</p>\n<p>于是，新增两个<code>script</code>：</p>\n<figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"attr\">&quot;scripts&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;test&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;pnpm exec jest&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;test:coverage&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;pnpm exec jest --config=jest.coverage.config.js&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span><span class=\"punctuation\">,</span></span><br></pre></td></tr></table></figure>\n\n<p>默认的<code>jest.config.js</code>配置不包含覆盖率配置，而<code>jest.coverage.config.js</code>包含覆盖率配置。</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><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\">// jest.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=\"comment\">// ...</span></span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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\">// jest.coverage.config.js</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> baseConfig = <span class=\"built_in\">require</span>(<span class=\"string\">&#x27;./jest.config&#x27;</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\">    ...baseConfig,</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">testMatch</span>: [<span class=\"string\">&#x27;**/src/**/__tests__/**/*.ts&#x27;</span>, <span class=\"string\">&#x27;!**/src/**/__tests__/**/*.snap.test.ts&#x27;</span>],</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">collectCoverage</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    <span class=\"attr\">collectCoverageFrom</span>: [<span class=\"string\">&#x27;src/**/*.ts&#x27;</span>, <span class=\"string\">&#x27;!src/**/*.snap.test.ts&#x27;</span>, <span class=\"string\">&#x27;!src/index.ts&#x27;</span>],</span><br><span class=\"line\">    <span class=\"attr\">coverageDirectory</span>: <span class=\"string\">&#x27;reports/jest&#x27;</span>,</span><br><span class=\"line\">    <span class=\"attr\">coverageThreshold</span>: &#123; <span class=\"attr\">global</span>: &#123; <span class=\"attr\">lines</span>: <span class=\"number\">90</span>, <span class=\"attr\">branches</span>: <span class=\"number\">50</span> &#125; &#125;,</span><br><span class=\"line\">    <span class=\"attr\">coverageReporters</span>: [<span class=\"string\">&#x27;html&#x27;</span>],</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>在<code>jest.coverage.config.js</code>中，<code>testMatch</code>排除执行<code>.snap.test.ts</code>用例文件，<code>collectCoverageFrom</code>也排除了<code>.snap.test.ts</code>文件本身作为源码文件被收集的问题。</p>\n<p>接下来，只需要把包含<code>toMatchSnapshot</code>等方法的测试用例，单独成文件且命名为<code>*.snap.test.ts</code>，就可以了。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/46\">https://github.com/taoliujun/blog/issues/46</a></p>\n<!--hexo\n---\nurl: snapshot-impact-on-coverage\ntags:\n  - jest\n---\n-->\n\n<p>Jest snapshot是把双刃剑，虽然使用它可以快速的编写测试用例，但它导致开发者忽略了测试用例的细节设计。</p>\n<h2 id=\"问题\"><a href=\"#问题\" class=\"headerlink\" title=\"问题\"></a>问题</h2><p>试想一个场景，有一个方法返回了复杂的结构，开发者A由于懒惰或自信以后能根据snapshot的结果来修复问题，而只写了snapshot。过了一段时间，开发者A或B修改了该方法，发现snapshot匹配失败，那么他会这样做：</p>\n<ol>\n<li>仔细检查匹配失败的原因，然后或修改代码、或更新snapshot。</li>\n<li>直接更新snapshot。</li>\n</ol>\n<p>我相信，大部分人都会选择第二种方式，因为这样更快，更简单。但后果是，大家都只关心了方法的结果，而忽略了方法的细节设计，这样的测试用例是不可靠的。即便在pull request环节，Reviewers面对难以阅读的snapshot文件，也往往是选择了approve。</p>\n<p>所以，需要一个方案来实现几个目的：</p>\n<ul>\n<li>保留snapshot对复杂结构进行测试。</li>\n<li>snapshot不提高覆盖率，因为低覆盖率会警告开发者去关注测试用例的细节设计。</li>\n</ul>\n<h2 id=\"方案\"><a href=\"#方案\" class=\"headerlink\" title=\"方案\"></a>方案</h2><p>因为jest的限制，执行用例肯定会影响覆盖率。那么可以执行两次用例，一次是执行包含snapshot的文件来校验用例，一次是执行不包含snapshot的文件来生成测试覆盖率。</p>\n<p>于是，新增两个<code>script</code>：</p>\n<figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"attr\">&quot;scripts&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;test&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;pnpm exec jest&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;test:coverage&quot;</span><span class=\"punctuation\">:</span> <span class=\"string\">&quot;pnpm exec jest --config=jest.coverage.config.js&quot;</span><span class=\"punctuation\">,</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span><span class=\"punctuation\">,</span></span><br></pre></td></tr></table></figure>\n\n<p>默认的<code>jest.config.js</code>配置不包含覆盖率配置，而<code>jest.coverage.config.js</code>包含覆盖率配置。</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><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\">// jest.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=\"comment\">// ...</span></span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><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\">// jest.coverage.config.js</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> baseConfig = <span class=\"built_in\">require</span>(<span class=\"string\">&#x27;./jest.config&#x27;</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\">    ...baseConfig,</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">testMatch</span>: [<span class=\"string\">&#x27;**/src/**/__tests__/**/*.ts&#x27;</span>, <span class=\"string\">&#x27;!**/src/**/__tests__/**/*.snap.test.ts&#x27;</span>],</span><br><span class=\"line\"></span><br><span class=\"line\">    <span class=\"attr\">collectCoverage</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\">    <span class=\"attr\">collectCoverageFrom</span>: [<span class=\"string\">&#x27;src/**/*.ts&#x27;</span>, <span class=\"string\">&#x27;!src/**/*.snap.test.ts&#x27;</span>, <span class=\"string\">&#x27;!src/index.ts&#x27;</span>],</span><br><span class=\"line\">    <span class=\"attr\">coverageDirectory</span>: <span class=\"string\">&#x27;reports/jest&#x27;</span>,</span><br><span class=\"line\">    <span class=\"attr\">coverageThreshold</span>: &#123; <span class=\"attr\">global</span>: &#123; <span class=\"attr\">lines</span>: <span class=\"number\">90</span>, <span class=\"attr\">branches</span>: <span class=\"number\">50</span> &#125; &#125;,</span><br><span class=\"line\">    <span class=\"attr\">coverageReporters</span>: [<span class=\"string\">&#x27;html&#x27;</span>],</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>在<code>jest.coverage.config.js</code>中，<code>testMatch</code>排除执行<code>.snap.test.ts</code>用例文件，<code>collectCoverageFrom</code>也排除了<code>.snap.test.ts</code>文件本身作为源码文件被收集的问题。</p>\n<p>接下来，只需要把包含<code>toMatchSnapshot</code>等方法的测试用例，单独成文件且命名为<code>*.snap.test.ts</code>，就可以了。</p>\n"},{"title":"关于tsconfig.json，最后更新2023/11月...","date":"2023-09-04T18:51:45.000Z","url":"tsconfig-json","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/23](https://github.com/taoliujun/blog/issues/23)\n\n<!--hexo\n---\nurl: tsconfig-json\ntags:\n  - typescript\n---\n-->\n\n**截至TypeScript 5.2**，`tsconfig.json`的配置项已经有百十个之多，它的某些选项甚至影响了项目的执行结果，所以尽量多的了解它们能让程序员更深的了解ts，写出优美语句让CTO赞赏，甚至避免写出bug。\n\n本issue的内容，只是个人在工作经验的影响下，对官方文档的内容理解。且内容有所欠缺，基本只记录了我工作涉及到的配置项，比如不怎么使用class，对class的配置项就略过了。\n\n官方文档：https://www.typescriptlang.org/tsconfig\n\n****\n\n<!--hexo-->\n\n# Top Level\n\n一些根配置项。\n\n## extends\n\n继承另一个配置文件，推荐的一些官方的配置文件来继承使用：https://github.com/tsconfig/bases/tree/main/bases\n\n## files, include, exclude\n\n这几项指定了在项目里，被ts作用的文件集合。配置本身没什么好说的，记录下它们之间的关系。\n\n- 如果files指定了，那么include的默认值是`[]`，否则include的默认值是`**/*`；\n- exclude用于排除include已指定的文件集合，但这些文件仍然是可以在项目里被引用的；\n- exclude默认排除了`node_modules`、`outDir`；\n\n## references\n\n用于项目文件夹分别打包，并且其中有缓存机制的参与，所以编译速度会快很多。\n\n如下项目结构：\n\n```shell\n./interface\n./components\n./user\n./admin\n./tsconfig.json\n```\n\n在上面，user和admin文件夹分别是业务用户端、业务管理端，interface是接口定义，components是通用组件。在以往，改动了任何文件，都需要整个项目重新编译。而在使用references之后，将4个文件夹中放入对应的tsconfig.json并各有配置，在根tsconfig中指定好references的path后，tsc利用缓存机制，会只打包改动过的文件夹。\n<!--hexo-->\n\n# compilerOptions\n\n编译器配置项太多了，按作用拆分成几个评论来说。\n<!--hexo-->\n\n# compilerOptions - Type Checking\n\n和类型检查有关的配置项。\n\n## strict\n\nstrict是一个严格模式的快捷开关，开启后会默认打开strictNullChecks、noImplicitAny等选项。并且随着typescript的升级，它可能会默认开启新增特性，列出截至5.2默认开启的选项：\n\n[alwaysStrict](https://www.typescriptlang.org/tsconfig#alwaysStrict)\n[strictNullChecks](https://www.typescriptlang.org/tsconfig#strictNullChecks)\n[strictBindCallApply](https://www.typescriptlang.org/tsconfig#strictBindCallApply)\n[strictFunctionTypes](https://www.typescriptlang.org/tsconfig#strictFunctionTypes)\n[strictPropertyInitialization](https://www.typescriptlang.org/tsconfig#strictPropertyInitialization)\n[noImplicitAny](https://www.typescriptlang.org/tsconfig#noImplicitAny)\n[noImplicitThis](https://www.typescriptlang.org/tsconfig#noImplicitThis)\n[useUnknownInCatchVariables](https://www.typescriptlang.org/tsconfig#useUnknownInCatchVariables)\n\n## alwaysStrict\n\n对所有文件启用javascript strict模式。注意，这和typescript strict不是同一个东西。参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode\n\n## allowUnreachableCode\n\n对未使用的代码的处理策略，可设置警告(默认)、错误、忽略。\n\n## allowUnusedLabels\n\n对未使用的Label的处理策略，可设置警告(默认)、错误、忽略。\n\n## exactOptionalPropertyTypes\n\n对可选项设置为undefined的策略。\n\n举例：\n```typescript\ninterface User {\n    sex?: 1 | 0;\n}\n\nconst man: User = {};\nman.sex = 1;\nman.sex = 0;\nman.sex = undefined;\n```\n\n`User.sex`是一个可选项，它的预期值是`0|1|undefined`。但是呢，`sex`可选想表达的意思是未被定义，而不是值真的是undefined。那么开启本选项后，`man.sex = undefined`这个赋值语句会给一个报错。\n\n## noImplicitAny\n\n对推导类型为any的策略。\n\n```typescript\nfunction fn(s) {\n  console.log(s.subtr(3));\n}\n```\n\n入参`s`推导为`any`，在选项开启情况下会报错。\n\n## noImplicitReturns\n\n对函数每个分支必须有return语句的策略。\n\n```typescript\nfunction fn(s: string) {\n    if (s) {\n        return s.substring(3);\n    } else {\n        'nothing';\n    }\n}\n```\n\n开启后，ts报错认为`fn`函数的最后没有return语句。\n\n## noPropertyAccessFromIndexSignature\n\n对访问未定义的对象属性的策略。\n\n```typescript\ninterface User {\n    name?: string;\n    [key: string]: string;\n}\nconst a: User = {};\nconsole.log(a.name, a['name'], a.sex, a['sex']);\n```\n\n访问对象属性有`.`和`[index]`两个方式，访问未定义的属性，开启本选项后，在`a.sex`处会抛出一个错误。\n\n## noUncheckedIndexedAccess\n\n未定义的对象属性值类型，给追加上`undefined`类型。\n\n```typescript\ninterface User {\n    name: string;\n    [propName: string]: string;\n}\n\ndeclare const admin: User;\n\n// (property) User.name: string\nconsole.log(admin.name);\n// (index) User[string]: string\nconsole.log(admin.birthday);\n```\n\n上例中，birthday的值类型是`string`，开启本项后，类型追加上`undefined`。\n\n```typescript\n// (index) User[string]: string | undefined\nconsole.log(admin.birthday);\n```\n\n## noUnusedLocals\n\n局部变量未使用，抛出错误。\n\n```typescript\nfunction test() {\n  const defaultModelID = 23;\n// 'defaultModelID' is declared but its value is never read.\n}\n```\n\n## noUnusedParameters\n\n入参未使用，抛出错误。\n\n```typescript\nconst createDefaultKeyboard = (modelID: number) => {\n// 'modelID' is declared but its value is never read.\n  const defaultModelID = 23;\n  return { type: \"keyboard\", modelID: defaultModelID };\n};\n```\n\n## strictBindCallApply\n\n在使用函数的call、bind、apply时，是否要检查传入参数的类型。\n\n```typescript\nfunction fn(x: string) {\n    return x;\n}\nconst n1 = fn.call(undefined, '10');\nconst n2 = fn.call(undefined, false);\n```\n\n如上代码中，第二个call中的入参false和string类型不匹配而报错。\n\n## strictFunctionTypes\n\n更精确的检查函数入参类型。\n\n```typescript\ntype GetUser = (id: string | number) => any;\nfunction test(x: string) {\n    return x;\n}\nconst getUser: GetUser = test;\n```\n\n如上代码中，GetUser的入参类型`string | number`不能精确的分配给test的入参类型`string`。\n\n## strictNullChecks\n\n是否校验`null`, `undefined`的属性访问？\n\n在以往的纯js项目中，容易忽略变量为undefined后仍然访问其属性的场景，比如在如下代码中，忽略了`a`为`undefined`的情况，导致运行时引发异常。\n\n```javascript\nconst a = arr1.find();\nconsole.log(a.name)\n```\n\n本选项开启后，在静态检查时就提示开发者，变量可能是`null`, `undefined`，不能访问到`name`属性。\n\n## useUnknownInCatchVariables\n\n有时候我们并不知道catch的err类型是什么，它的类型由try里的实际运行分支决定，而如果当成any处理，那么访问它的属性是危险的。当开启本项后，err的类型是unknown，必须先限定其类型再安全的访问其属性，如：\n\n```typescript\ntry {\n  // ...\n} catch (err) {\n  if (err instanceof Error) {\n    console.log(err.message);\n  }\n}\n```\n\n<!--hexo-->\n\n# compilerOptions - Modules\n\n模块的处理策略。\n\n## allowArbitraryExtensions\n\nts默认支持了ts、js、cjs、jsx等模块的解析描述，通过`global.d.ts`的定义扩展，还可以支持css、jpg等模块的解析描述（你要自己保证webpack loader之类的解析器去真实支持加载这些模块）。而有时候，需要对特定模块文件（不管是否已全局定义过该模块的描述）做特别的描述，就可以开启该选项，并且创建一个`{file basename}.d.{extension}.ts`文件。\n\n如：\n\n```typescript\n// test.ts\n\n// 报错：Cannot find module './a.jpk' or its corresponding type declarations.ts(2307)\nimport a from './a.jpk';\n// doTest类型是any\nconsole.log(a.doTest());\n```\n\n开启该项，并增加`a.d.jpk.ts`文件：\n\n```typescript\n// a.d.jpk.ts\ndeclare const jpk: {\n    doTest: () => void;\n};\nexport default jpk;\n\n// test.ts\nimport a from './a.jpk';\n// doTest的类型：(property) doTest: () => void\nconsole.log(a.doTest());\n```\n\n## allowImportingTsExtensions\n\n是否允许在import path带入ts、tsx等后缀名。\n\nts项目需要编译成js代码后执行，如果我们使用ts-node来执行项目，可以启用`noEmit`来禁止这个编译行为，并且在项目源码中直接引入`.ts`来引入正确的、完整的路径。\n\n举例：\n\n```typescript\nimport { wait } from '@/utils/utils.ts';\n```\n\n## allowUmdGlobalAccess\n\n// TODO\n和umd的声明有关系，不过我还不明确它的意义。见：https://github.com/microsoft/TypeScript/pull/30776。\n\n## baseUrl\n\n为解析无路径修饰的模块，设置一个基础路径。 什么叫做无路径修饰？就是该模块不是一个绝对或相对路径，如`import a from '@/hello/world'`。\n\n如果配置了该项，那么ts从该项指定的目录中开始查找模块，优先级也高于`node_modules`。\n\n## module\n\n模块打包的策略，也就是指编译后的模块加载代码是require、import之类的语法。推荐大家阅读：[模块理论](https://www.typescriptlang.org/docs/handbook/modules/theory.html)。\n\n这个话题有点繁琐，也涉及到javascript的模块化amd、umd之类的历史，对于2023年这个时间点来说，关注下CommonJS、ESM即可，ESM还细分为ES2015、ES20XX等版本，他们的模块打包策略是一样的，区别是更高版本的ESM还支持了`dynamic imports`、`import.meta`和`top level await`之类的东西。\n\n补充的是，nodejs的模块打包策略也早就支持esm了，具体参照package.json的设置：https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext\n\n## moduleResolution\n\n加载模块的策略，也就是指用什么策略去解析`import xxx from 'pathA'`这里的`pathA`。**注意区分和module的关系，module指的是项目的模块化是如何打包的，而moduleResolution指的是项目如何加载模块的**。截至2023支持如下策略：\n\n* node16/nodenext，对于Node12+版本，本策略可自由根据import/require选择合适的算法去加载模块。\n* node10，对于Node12之前的版本，本策略只支持require算法加载模块。**基本不用关心了**\n* bundler，和node16一样，但不要求模块有后缀名。\n* classic，早期的策略，不用管了。\n\n**这东西还要和module搭配使用，并且！并且！和package.json还有扯不清的关系。强烈建议阅读上文提到的[模块理论](https://www.typescriptlang.org/docs/handbook/modules/theory.html)**\n\n另外，由于自己对这块的理解也不足深，还参考了这篇文章：https://zhuanlan.zhihu.com/p/621795173。\n\n## moduleSuffixes\n\n模块搜索时的文件扩展名补充，比如以下配置项：\n\n```json\n{\n  \"compilerOptions\": {\n    \"moduleSuffixes\": [\".ios\", \".native\", \"\"]\n  }\n}\n```\n\n```typescript\nimport * as foo from \"./foo\";\n```\nTypeScript 会按顺序寻找`./foo.ios.ts`、`./foo.native.ts`、`./foo.ts`。\n\n## paths\n\n在加载模块路径时，加入一个别名匹配。可以理解为webpack的alias。\n\n## resolveJsonModule\n\n允许加载json模块（文件）。\n\n## resolvePackageJsonExports\n\n引用`node_modules`包时，强制遵循包package.json的exports字段的定义。还是那句话，阅读下模块理论那篇文章，不然很难理解前面这句话的信息量。\n\n## resolvePackageJsonImports\n\n强制typescript使用package.json中imports字段的定义去加载`#`符号开头的模块路径。例：\n\n```typescript\n// package.json\n\"imports\": {\n   \"#test/*\": \"./src/test/*\"\n}\n```\n\n```typescript\n// src/test/1.ts\nexport const a = 123;\n```\n\n```typescript\n// src/b.ts\nimport { a } from '#test/1';\nconsole.log('==a', a);\n```\n\n## rootDir\n\n指定项目的根目录，默认值可以理解为所有ts文件目录的最大集。例如：\n\n```shell\nMyProj\n├── tsconfig.json\n├── core\n│   ├── a.ts\n│   ├── b.ts\n│   ├── sub\n│   │   ├── c.ts\n├── types.d.ts\n```\n\n如上的项目，rootDir的推断值是\"core\"。但是你可以手工指定为`tsconfig.json`的相对目录\"，比如.\"。\n\n另外，如果设置了`composite`，`rootDir`的默认值就是`tsconfig.json`文件的目录。\n\n## rootDirs\n\n这个属性有点拽，它可以将多个目录虚拟成一个目录。这样在`import`的时候，就当成同一个目录就行啦。\n\n## typeRoots\n\n类型定义文件的目录，默认所有@types目录都会被包含，包括node_modules下的@types目录。\n如果指定了typeRoots，那么@types目录的相关规则会被忽略。\n\n ## types\n\n类型定义文件的具体目录，规则和`typeRoots`一样，不同点是`types`只指定具体目录，而非`*`这种匹配型目录。\n\n<!--hexo-->\n\n# compilerOptions - Emit\n\n编译策略。\n\n## outDir\n\n编译文件放置的目录，默认和源码放同一个目录。\n\n## noEmit\n\n不要编译ts。\n\n项目中一般使用babel去编译，typescript仅用来做静态检查，所以设置noEmit就可以不生成js、sourcemap、declaration文件了。\n\n## noEmitOnError\n\n顾名思义，在检查到错误的时候，不要继续编译了。\n\n## declaration / emitDeclarationOnly / declarationDir\n\n生成类型描述文件。\n\n这个是typescript最重要的几个特性之一了，为`.ts`文件生成类型定义文件`.d.ts`。如果不想同时生成`.js`文件，则使用`emitDeclarationOnly`。\n\n同时，可以使用`declarationDir`指定类型定义文件的生成目录。\n\n## declarationMap\n\n给`.d.ts`文件增加一个map标识到`.ts`源文件，类似sourceMap。\n\n## sourceMap / inlineSourceMap / inlineSources / mapRoot / sourceRoot\n\ntypescript也是支持souce map的，这里就不解释sourcemap是什么了。它的相关配置项有：\n\nsourceMap，生成sourcemap文件。\ninlineSourceMap，不生成sourcemap文件，而是直接把source内容写在.js文件中。\ninlineSources，同inlineSourceMap。\nmapRoot，指定sourceMap文件的路径，比如部署到网络中，可以指定为\"[http://xxxx.com\"。](http://xxxx.com\"./)\nsourceRoot，指定source文件的路径，同mapRoot。\n\n## downlevelIteration\n\n对迭代器的降级解析。\n\n在es6中增加了for/of，spread等迭代特性，typescript在编译成es5的时候，要使用何种语法。文档中有个字符遍历的例子说明开启与否的迭代影响，这对业务计算结果是有影响的。\n\n不过项目中使用了babel之类的编译器，就不用担心这些影响了。\n\n## importHelpers\n\n引入降级解析的包。\n\n将es6的某些特新编译成es5，如迭代器、异步语法等，会将模块中每个相应的代码都编译成降级代码，使得类似代码重复。如：\n\n```typescript\nvar __read = (this && this.__read) || function (o, n) {\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n    if (!m) return o;\n    var i = m.call(o), r, ar = [], e;\n    try {\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n    }\n    catch (error) { e = { error: error }; }\n    finally {\n        try {\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\n        }\n        finally { if (e) throw e.error; }\n    }\n    return ar;\n};\nvar __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n            ar[i] = from[i];\n        }\n    }\n    return to.concat(ar || Array.prototype.slice.call(from));\n};\nexport function fn(arr) {\n    var arr2 = __spreadArray([1], __read(arr), false);\n}\n```\n\n如果同时开启了`downlevelIteration`和`importHelpers`，并且安装了`tslib`包，那么代码会编译成类似这样：\n\n```typescript\nimport { __read, __spreadArray } from \"tslib\";\nexport function fn(arr) {\n    var arr2 = __spreadArray([1], __read(arr), false);\n}\n ```\n\n## noEmitHelpers\n\ntypescript处理迭代器、异步等的降级策略是生成一堆降级代码，也可以使用\"importHelpers\"和\"tslib\"来提取公共代码。但通过这个配置，可以自定义降级代码了。具体参照文档。\n\n## preserveConstEnums\n\n是否在编辑结果中移除`const enum`的定义。因为javascript没有enum概念，typescript会将enum的引用编译成具体的值。如：\n\n```typescript\nconst enum Album {\n  JimmyEatWorldFutures = 1,\n  TubRingZooHypothesis = 2,\n  DogFashionDiscoAdultery = 3,\n}\n \nconst selectedAlbum = Album.JimmyEatWorldFutures;\nif (selectedAlbum === Album.JimmyEatWorldFutures) {\n  console.log(\"That is a great choice.\");\n}\n```\n\n编译结果如下：\n\n```javascript\n\"use strict\";\nconst selectedAlbum = 1 /* Album.JimmyEatWorldFutures */;\nif (selectedAlbum === 1 /* Album.JimmyEatWorldFutures */) {\n    console.log(\"That is a great choice.\");\n}\n```\n\n如果开启此项，则编译结果中会描述出该enum的结构。如下：\n\n```javascript\n\"use strict\";\nvar Album;\n(function (Album) {\n    Album[Album[\"JimmyEatWorldFutures\"] = 1] = \"JimmyEatWorldFutures\";\n    Album[Album[\"TubRingZooHypothesis\"] = 2] = \"TubRingZooHypothesis\";\n    Album[Album[\"DogFashionDiscoAdultery\"] = 3] = \"DogFashionDiscoAdultery\";\n})(Album || (Album = {}));\nconst selectedAlbum = 1 /* Album.JimmyEatWorldFutures */;\nif (selectedAlbum === 1 /* Album.JimmyEatWorldFutures */) {\n    console.log(\"That is a great choice.\");\n}\n\n```\n\n## preserveValueImports\n\n通常，打包器会将未使用的\"import\"移除掉，但开启了该特性后，会在编译中保留未使用的\"import\"。例如：\n\n```typescript\nimport { Animal } from \"./animal.js\";\neval(\"console.log(new Animal().isDangerous())\");\n```\n\n## removeComments\n\n移除代码中的注释。\n\n\n<!--hexo-->\n\n# compilerOptions - JavaScript Support\n\n对javascript文件的支持\n\n## allowJs\n\n允许`.ts`文件引用`.js`文件，这常用在javascript项目升级为typescript的过程中。\n\n## checkJs\n\n是否开启对`.js`文件的错误检查。\n\n## maxNodeModuleJsDepth\n\n为`.js`文件寻找类型定义文件时，允许的最大依赖深度。\n\n正常情况下，我们会在`.js`文件的同级补写`.d.ts`文件，tsc会很快找到类型定义。但有时候确实要扩大搜索范围去找部分`.js`文件的类型定义文件。\n\n<!--hexo-->\n\n# compilerOptions - Interop Constraints\n\n(模块)互相操作的约束\n\n## allowSyntheticDefaultImports\n\n允许合成`default`。\n\n如果一个模块A没有`export default`，那么另一个模块B在`import defaultA from './a'`的时候，会抛出错误说A中没有default。\n\n有一个做法是`import * as defaultA from './a'`曲线救国，但开启这个配置项后，可以直接使用`import defaultA from './a'`这样的语法了。\n\n## esModuleInterop\n\nesm在使用`import default from 'xxx'`方式导入cjs的时候会抛出一个错误，因为cjs模块中没有default。开启此选项后，typescript会使用一些helpers去兼容cjs的default问题。\n\n## forceConsistentCasingInFileNames\n\n强制引用的模块文件名，和磁盘中的文件名保持一致的大小写。\n\n<!--hexo-->\n\n# compilerOptions - Language and Environment\n\n和语言、环境有关的配置项。\n\n## jsx\n\n如何解析`.tsx`文件中jsx语法？在2023年，react17+后，用`react-jsx`就行了。\n\n## lib\n\n在项目中使用的api类型定义集合。\n\nts是需要知道你用的每一个javascript方法、属性的定义的，所以它内置了一批定义（比如Math.abs方法）。但是呢，后面新增方法的定义，需要你手工指定包含，ts才能理解了，比如Array.include方法，你就要包含ES2016。但好在你不需要记住这些，因为当你指定`target`字段时，lib会被默认设置成对应的值的。\n\n另外，大部分情况下，我们要访问一些和特定环境有关的特性，比如浏览器里的Dom特性，那么这儿额外引入`DOM`定义就行了。\n\n## target\n\n项目编译的目标javascript版本。\n\n也就是你的目标客户端支持的最低javascript版本。注意它会影响默认的`lib`配置项。\n\n\n<!--hexo-->\n\n# compilerOptions - Compiler Diagnostics\n\n编译诊断配置项。\n\n## diagnostics / extendedDiagnostics\n\n打印出编译的信息，比如多少文件、编译时间等。\n\nextendedDiagnostics包含了diagnostics给出的所有信息，所以用extendedDiagnostics就行了。这是一个开启extendedDiagnostics的编译信息：\n\n```bash\nFiles:                         143\nLines of Library:            38663\nLines of Definitions:        82578\nSymbols:                     73362\nTypes:                        1495\nParse time:                  0.50s\nResolveModule time:          0.03s\nTotal time:                  1.01s\n```\n\n## explainFiles\n\n打印出文件被编译的原因，也就是它们的引用链。\n\n## listEmittedFiles / listFiles\n\n列出参与编译的文件。\n\n## traceResolution\n\n打印每一个文件的编译流程。\n\n\n<!--hexo-->\n\n# compilerOptions - Completeness\n\n完整性检测的配置项\n\n## skipLibCheck\n\n跳过lib库的类型检测。\n\n\n\n","source":"_posts/tsconfig-json.md","raw":"---\ntitle: \"关于tsconfig.json，最后更新2023/11月...\"\ndate: \"2023-09-05T02:51:45Z\"\ncategories:\n  - [TypeScript]\n\nurl: tsconfig-json\ntags:\n  - typescript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/23](https://github.com/taoliujun/blog/issues/23)\n\n<!--hexo\n---\nurl: tsconfig-json\ntags:\n  - typescript\n---\n-->\n\n**截至TypeScript 5.2**，`tsconfig.json`的配置项已经有百十个之多，它的某些选项甚至影响了项目的执行结果，所以尽量多的了解它们能让程序员更深的了解ts，写出优美语句让CTO赞赏，甚至避免写出bug。\n\n本issue的内容，只是个人在工作经验的影响下，对官方文档的内容理解。且内容有所欠缺，基本只记录了我工作涉及到的配置项，比如不怎么使用class，对class的配置项就略过了。\n\n官方文档：https://www.typescriptlang.org/tsconfig\n\n****\n\n<!--hexo-->\n\n# Top Level\n\n一些根配置项。\n\n## extends\n\n继承另一个配置文件，推荐的一些官方的配置文件来继承使用：https://github.com/tsconfig/bases/tree/main/bases\n\n## files, include, exclude\n\n这几项指定了在项目里，被ts作用的文件集合。配置本身没什么好说的，记录下它们之间的关系。\n\n- 如果files指定了，那么include的默认值是`[]`，否则include的默认值是`**/*`；\n- exclude用于排除include已指定的文件集合，但这些文件仍然是可以在项目里被引用的；\n- exclude默认排除了`node_modules`、`outDir`；\n\n## references\n\n用于项目文件夹分别打包，并且其中有缓存机制的参与，所以编译速度会快很多。\n\n如下项目结构：\n\n```shell\n./interface\n./components\n./user\n./admin\n./tsconfig.json\n```\n\n在上面，user和admin文件夹分别是业务用户端、业务管理端，interface是接口定义，components是通用组件。在以往，改动了任何文件，都需要整个项目重新编译。而在使用references之后，将4个文件夹中放入对应的tsconfig.json并各有配置，在根tsconfig中指定好references的path后，tsc利用缓存机制，会只打包改动过的文件夹。\n<!--hexo-->\n\n# compilerOptions\n\n编译器配置项太多了，按作用拆分成几个评论来说。\n<!--hexo-->\n\n# compilerOptions - Type Checking\n\n和类型检查有关的配置项。\n\n## strict\n\nstrict是一个严格模式的快捷开关，开启后会默认打开strictNullChecks、noImplicitAny等选项。并且随着typescript的升级，它可能会默认开启新增特性，列出截至5.2默认开启的选项：\n\n[alwaysStrict](https://www.typescriptlang.org/tsconfig#alwaysStrict)\n[strictNullChecks](https://www.typescriptlang.org/tsconfig#strictNullChecks)\n[strictBindCallApply](https://www.typescriptlang.org/tsconfig#strictBindCallApply)\n[strictFunctionTypes](https://www.typescriptlang.org/tsconfig#strictFunctionTypes)\n[strictPropertyInitialization](https://www.typescriptlang.org/tsconfig#strictPropertyInitialization)\n[noImplicitAny](https://www.typescriptlang.org/tsconfig#noImplicitAny)\n[noImplicitThis](https://www.typescriptlang.org/tsconfig#noImplicitThis)\n[useUnknownInCatchVariables](https://www.typescriptlang.org/tsconfig#useUnknownInCatchVariables)\n\n## alwaysStrict\n\n对所有文件启用javascript strict模式。注意，这和typescript strict不是同一个东西。参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode\n\n## allowUnreachableCode\n\n对未使用的代码的处理策略，可设置警告(默认)、错误、忽略。\n\n## allowUnusedLabels\n\n对未使用的Label的处理策略，可设置警告(默认)、错误、忽略。\n\n## exactOptionalPropertyTypes\n\n对可选项设置为undefined的策略。\n\n举例：\n```typescript\ninterface User {\n    sex?: 1 | 0;\n}\n\nconst man: User = {};\nman.sex = 1;\nman.sex = 0;\nman.sex = undefined;\n```\n\n`User.sex`是一个可选项，它的预期值是`0|1|undefined`。但是呢，`sex`可选想表达的意思是未被定义，而不是值真的是undefined。那么开启本选项后，`man.sex = undefined`这个赋值语句会给一个报错。\n\n## noImplicitAny\n\n对推导类型为any的策略。\n\n```typescript\nfunction fn(s) {\n  console.log(s.subtr(3));\n}\n```\n\n入参`s`推导为`any`，在选项开启情况下会报错。\n\n## noImplicitReturns\n\n对函数每个分支必须有return语句的策略。\n\n```typescript\nfunction fn(s: string) {\n    if (s) {\n        return s.substring(3);\n    } else {\n        'nothing';\n    }\n}\n```\n\n开启后，ts报错认为`fn`函数的最后没有return语句。\n\n## noPropertyAccessFromIndexSignature\n\n对访问未定义的对象属性的策略。\n\n```typescript\ninterface User {\n    name?: string;\n    [key: string]: string;\n}\nconst a: User = {};\nconsole.log(a.name, a['name'], a.sex, a['sex']);\n```\n\n访问对象属性有`.`和`[index]`两个方式，访问未定义的属性，开启本选项后，在`a.sex`处会抛出一个错误。\n\n## noUncheckedIndexedAccess\n\n未定义的对象属性值类型，给追加上`undefined`类型。\n\n```typescript\ninterface User {\n    name: string;\n    [propName: string]: string;\n}\n\ndeclare const admin: User;\n\n// (property) User.name: string\nconsole.log(admin.name);\n// (index) User[string]: string\nconsole.log(admin.birthday);\n```\n\n上例中，birthday的值类型是`string`，开启本项后，类型追加上`undefined`。\n\n```typescript\n// (index) User[string]: string | undefined\nconsole.log(admin.birthday);\n```\n\n## noUnusedLocals\n\n局部变量未使用，抛出错误。\n\n```typescript\nfunction test() {\n  const defaultModelID = 23;\n// 'defaultModelID' is declared but its value is never read.\n}\n```\n\n## noUnusedParameters\n\n入参未使用，抛出错误。\n\n```typescript\nconst createDefaultKeyboard = (modelID: number) => {\n// 'modelID' is declared but its value is never read.\n  const defaultModelID = 23;\n  return { type: \"keyboard\", modelID: defaultModelID };\n};\n```\n\n## strictBindCallApply\n\n在使用函数的call、bind、apply时，是否要检查传入参数的类型。\n\n```typescript\nfunction fn(x: string) {\n    return x;\n}\nconst n1 = fn.call(undefined, '10');\nconst n2 = fn.call(undefined, false);\n```\n\n如上代码中，第二个call中的入参false和string类型不匹配而报错。\n\n## strictFunctionTypes\n\n更精确的检查函数入参类型。\n\n```typescript\ntype GetUser = (id: string | number) => any;\nfunction test(x: string) {\n    return x;\n}\nconst getUser: GetUser = test;\n```\n\n如上代码中，GetUser的入参类型`string | number`不能精确的分配给test的入参类型`string`。\n\n## strictNullChecks\n\n是否校验`null`, `undefined`的属性访问？\n\n在以往的纯js项目中，容易忽略变量为undefined后仍然访问其属性的场景，比如在如下代码中，忽略了`a`为`undefined`的情况，导致运行时引发异常。\n\n```javascript\nconst a = arr1.find();\nconsole.log(a.name)\n```\n\n本选项开启后，在静态检查时就提示开发者，变量可能是`null`, `undefined`，不能访问到`name`属性。\n\n## useUnknownInCatchVariables\n\n有时候我们并不知道catch的err类型是什么，它的类型由try里的实际运行分支决定，而如果当成any处理，那么访问它的属性是危险的。当开启本项后，err的类型是unknown，必须先限定其类型再安全的访问其属性，如：\n\n```typescript\ntry {\n  // ...\n} catch (err) {\n  if (err instanceof Error) {\n    console.log(err.message);\n  }\n}\n```\n\n<!--hexo-->\n\n# compilerOptions - Modules\n\n模块的处理策略。\n\n## allowArbitraryExtensions\n\nts默认支持了ts、js、cjs、jsx等模块的解析描述，通过`global.d.ts`的定义扩展，还可以支持css、jpg等模块的解析描述（你要自己保证webpack loader之类的解析器去真实支持加载这些模块）。而有时候，需要对特定模块文件（不管是否已全局定义过该模块的描述）做特别的描述，就可以开启该选项，并且创建一个`{file basename}.d.{extension}.ts`文件。\n\n如：\n\n```typescript\n// test.ts\n\n// 报错：Cannot find module './a.jpk' or its corresponding type declarations.ts(2307)\nimport a from './a.jpk';\n// doTest类型是any\nconsole.log(a.doTest());\n```\n\n开启该项，并增加`a.d.jpk.ts`文件：\n\n```typescript\n// a.d.jpk.ts\ndeclare const jpk: {\n    doTest: () => void;\n};\nexport default jpk;\n\n// test.ts\nimport a from './a.jpk';\n// doTest的类型：(property) doTest: () => void\nconsole.log(a.doTest());\n```\n\n## allowImportingTsExtensions\n\n是否允许在import path带入ts、tsx等后缀名。\n\nts项目需要编译成js代码后执行，如果我们使用ts-node来执行项目，可以启用`noEmit`来禁止这个编译行为，并且在项目源码中直接引入`.ts`来引入正确的、完整的路径。\n\n举例：\n\n```typescript\nimport { wait } from '@/utils/utils.ts';\n```\n\n## allowUmdGlobalAccess\n\n// TODO\n和umd的声明有关系，不过我还不明确它的意义。见：https://github.com/microsoft/TypeScript/pull/30776。\n\n## baseUrl\n\n为解析无路径修饰的模块，设置一个基础路径。 什么叫做无路径修饰？就是该模块不是一个绝对或相对路径，如`import a from '@/hello/world'`。\n\n如果配置了该项，那么ts从该项指定的目录中开始查找模块，优先级也高于`node_modules`。\n\n## module\n\n模块打包的策略，也就是指编译后的模块加载代码是require、import之类的语法。推荐大家阅读：[模块理论](https://www.typescriptlang.org/docs/handbook/modules/theory.html)。\n\n这个话题有点繁琐，也涉及到javascript的模块化amd、umd之类的历史，对于2023年这个时间点来说，关注下CommonJS、ESM即可，ESM还细分为ES2015、ES20XX等版本，他们的模块打包策略是一样的，区别是更高版本的ESM还支持了`dynamic imports`、`import.meta`和`top level await`之类的东西。\n\n补充的是，nodejs的模块打包策略也早就支持esm了，具体参照package.json的设置：https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext\n\n## moduleResolution\n\n加载模块的策略，也就是指用什么策略去解析`import xxx from 'pathA'`这里的`pathA`。**注意区分和module的关系，module指的是项目的模块化是如何打包的，而moduleResolution指的是项目如何加载模块的**。截至2023支持如下策略：\n\n* node16/nodenext，对于Node12+版本，本策略可自由根据import/require选择合适的算法去加载模块。\n* node10，对于Node12之前的版本，本策略只支持require算法加载模块。**基本不用关心了**\n* bundler，和node16一样，但不要求模块有后缀名。\n* classic，早期的策略，不用管了。\n\n**这东西还要和module搭配使用，并且！并且！和package.json还有扯不清的关系。强烈建议阅读上文提到的[模块理论](https://www.typescriptlang.org/docs/handbook/modules/theory.html)**\n\n另外，由于自己对这块的理解也不足深，还参考了这篇文章：https://zhuanlan.zhihu.com/p/621795173。\n\n## moduleSuffixes\n\n模块搜索时的文件扩展名补充，比如以下配置项：\n\n```json\n{\n  \"compilerOptions\": {\n    \"moduleSuffixes\": [\".ios\", \".native\", \"\"]\n  }\n}\n```\n\n```typescript\nimport * as foo from \"./foo\";\n```\nTypeScript 会按顺序寻找`./foo.ios.ts`、`./foo.native.ts`、`./foo.ts`。\n\n## paths\n\n在加载模块路径时，加入一个别名匹配。可以理解为webpack的alias。\n\n## resolveJsonModule\n\n允许加载json模块（文件）。\n\n## resolvePackageJsonExports\n\n引用`node_modules`包时，强制遵循包package.json的exports字段的定义。还是那句话，阅读下模块理论那篇文章，不然很难理解前面这句话的信息量。\n\n## resolvePackageJsonImports\n\n强制typescript使用package.json中imports字段的定义去加载`#`符号开头的模块路径。例：\n\n```typescript\n// package.json\n\"imports\": {\n   \"#test/*\": \"./src/test/*\"\n}\n```\n\n```typescript\n// src/test/1.ts\nexport const a = 123;\n```\n\n```typescript\n// src/b.ts\nimport { a } from '#test/1';\nconsole.log('==a', a);\n```\n\n## rootDir\n\n指定项目的根目录，默认值可以理解为所有ts文件目录的最大集。例如：\n\n```shell\nMyProj\n├── tsconfig.json\n├── core\n│   ├── a.ts\n│   ├── b.ts\n│   ├── sub\n│   │   ├── c.ts\n├── types.d.ts\n```\n\n如上的项目，rootDir的推断值是\"core\"。但是你可以手工指定为`tsconfig.json`的相对目录\"，比如.\"。\n\n另外，如果设置了`composite`，`rootDir`的默认值就是`tsconfig.json`文件的目录。\n\n## rootDirs\n\n这个属性有点拽，它可以将多个目录虚拟成一个目录。这样在`import`的时候，就当成同一个目录就行啦。\n\n## typeRoots\n\n类型定义文件的目录，默认所有@types目录都会被包含，包括node_modules下的@types目录。\n如果指定了typeRoots，那么@types目录的相关规则会被忽略。\n\n ## types\n\n类型定义文件的具体目录，规则和`typeRoots`一样，不同点是`types`只指定具体目录，而非`*`这种匹配型目录。\n\n<!--hexo-->\n\n# compilerOptions - Emit\n\n编译策略。\n\n## outDir\n\n编译文件放置的目录，默认和源码放同一个目录。\n\n## noEmit\n\n不要编译ts。\n\n项目中一般使用babel去编译，typescript仅用来做静态检查，所以设置noEmit就可以不生成js、sourcemap、declaration文件了。\n\n## noEmitOnError\n\n顾名思义，在检查到错误的时候，不要继续编译了。\n\n## declaration / emitDeclarationOnly / declarationDir\n\n生成类型描述文件。\n\n这个是typescript最重要的几个特性之一了，为`.ts`文件生成类型定义文件`.d.ts`。如果不想同时生成`.js`文件，则使用`emitDeclarationOnly`。\n\n同时，可以使用`declarationDir`指定类型定义文件的生成目录。\n\n## declarationMap\n\n给`.d.ts`文件增加一个map标识到`.ts`源文件，类似sourceMap。\n\n## sourceMap / inlineSourceMap / inlineSources / mapRoot / sourceRoot\n\ntypescript也是支持souce map的，这里就不解释sourcemap是什么了。它的相关配置项有：\n\nsourceMap，生成sourcemap文件。\ninlineSourceMap，不生成sourcemap文件，而是直接把source内容写在.js文件中。\ninlineSources，同inlineSourceMap。\nmapRoot，指定sourceMap文件的路径，比如部署到网络中，可以指定为\"[http://xxxx.com\"。](http://xxxx.com\"./)\nsourceRoot，指定source文件的路径，同mapRoot。\n\n## downlevelIteration\n\n对迭代器的降级解析。\n\n在es6中增加了for/of，spread等迭代特性，typescript在编译成es5的时候，要使用何种语法。文档中有个字符遍历的例子说明开启与否的迭代影响，这对业务计算结果是有影响的。\n\n不过项目中使用了babel之类的编译器，就不用担心这些影响了。\n\n## importHelpers\n\n引入降级解析的包。\n\n将es6的某些特新编译成es5，如迭代器、异步语法等，会将模块中每个相应的代码都编译成降级代码，使得类似代码重复。如：\n\n```typescript\nvar __read = (this && this.__read) || function (o, n) {\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n    if (!m) return o;\n    var i = m.call(o), r, ar = [], e;\n    try {\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n    }\n    catch (error) { e = { error: error }; }\n    finally {\n        try {\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\n        }\n        finally { if (e) throw e.error; }\n    }\n    return ar;\n};\nvar __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n            ar[i] = from[i];\n        }\n    }\n    return to.concat(ar || Array.prototype.slice.call(from));\n};\nexport function fn(arr) {\n    var arr2 = __spreadArray([1], __read(arr), false);\n}\n```\n\n如果同时开启了`downlevelIteration`和`importHelpers`，并且安装了`tslib`包，那么代码会编译成类似这样：\n\n```typescript\nimport { __read, __spreadArray } from \"tslib\";\nexport function fn(arr) {\n    var arr2 = __spreadArray([1], __read(arr), false);\n}\n ```\n\n## noEmitHelpers\n\ntypescript处理迭代器、异步等的降级策略是生成一堆降级代码，也可以使用\"importHelpers\"和\"tslib\"来提取公共代码。但通过这个配置，可以自定义降级代码了。具体参照文档。\n\n## preserveConstEnums\n\n是否在编辑结果中移除`const enum`的定义。因为javascript没有enum概念，typescript会将enum的引用编译成具体的值。如：\n\n```typescript\nconst enum Album {\n  JimmyEatWorldFutures = 1,\n  TubRingZooHypothesis = 2,\n  DogFashionDiscoAdultery = 3,\n}\n \nconst selectedAlbum = Album.JimmyEatWorldFutures;\nif (selectedAlbum === Album.JimmyEatWorldFutures) {\n  console.log(\"That is a great choice.\");\n}\n```\n\n编译结果如下：\n\n```javascript\n\"use strict\";\nconst selectedAlbum = 1 /* Album.JimmyEatWorldFutures */;\nif (selectedAlbum === 1 /* Album.JimmyEatWorldFutures */) {\n    console.log(\"That is a great choice.\");\n}\n```\n\n如果开启此项，则编译结果中会描述出该enum的结构。如下：\n\n```javascript\n\"use strict\";\nvar Album;\n(function (Album) {\n    Album[Album[\"JimmyEatWorldFutures\"] = 1] = \"JimmyEatWorldFutures\";\n    Album[Album[\"TubRingZooHypothesis\"] = 2] = \"TubRingZooHypothesis\";\n    Album[Album[\"DogFashionDiscoAdultery\"] = 3] = \"DogFashionDiscoAdultery\";\n})(Album || (Album = {}));\nconst selectedAlbum = 1 /* Album.JimmyEatWorldFutures */;\nif (selectedAlbum === 1 /* Album.JimmyEatWorldFutures */) {\n    console.log(\"That is a great choice.\");\n}\n\n```\n\n## preserveValueImports\n\n通常，打包器会将未使用的\"import\"移除掉，但开启了该特性后，会在编译中保留未使用的\"import\"。例如：\n\n```typescript\nimport { Animal } from \"./animal.js\";\neval(\"console.log(new Animal().isDangerous())\");\n```\n\n## removeComments\n\n移除代码中的注释。\n\n\n<!--hexo-->\n\n# compilerOptions - JavaScript Support\n\n对javascript文件的支持\n\n## allowJs\n\n允许`.ts`文件引用`.js`文件，这常用在javascript项目升级为typescript的过程中。\n\n## checkJs\n\n是否开启对`.js`文件的错误检查。\n\n## maxNodeModuleJsDepth\n\n为`.js`文件寻找类型定义文件时，允许的最大依赖深度。\n\n正常情况下，我们会在`.js`文件的同级补写`.d.ts`文件，tsc会很快找到类型定义。但有时候确实要扩大搜索范围去找部分`.js`文件的类型定义文件。\n\n<!--hexo-->\n\n# compilerOptions - Interop Constraints\n\n(模块)互相操作的约束\n\n## allowSyntheticDefaultImports\n\n允许合成`default`。\n\n如果一个模块A没有`export default`，那么另一个模块B在`import defaultA from './a'`的时候，会抛出错误说A中没有default。\n\n有一个做法是`import * as defaultA from './a'`曲线救国，但开启这个配置项后，可以直接使用`import defaultA from './a'`这样的语法了。\n\n## esModuleInterop\n\nesm在使用`import default from 'xxx'`方式导入cjs的时候会抛出一个错误，因为cjs模块中没有default。开启此选项后，typescript会使用一些helpers去兼容cjs的default问题。\n\n## forceConsistentCasingInFileNames\n\n强制引用的模块文件名，和磁盘中的文件名保持一致的大小写。\n\n<!--hexo-->\n\n# compilerOptions - Language and Environment\n\n和语言、环境有关的配置项。\n\n## jsx\n\n如何解析`.tsx`文件中jsx语法？在2023年，react17+后，用`react-jsx`就行了。\n\n## lib\n\n在项目中使用的api类型定义集合。\n\nts是需要知道你用的每一个javascript方法、属性的定义的，所以它内置了一批定义（比如Math.abs方法）。但是呢，后面新增方法的定义，需要你手工指定包含，ts才能理解了，比如Array.include方法，你就要包含ES2016。但好在你不需要记住这些，因为当你指定`target`字段时，lib会被默认设置成对应的值的。\n\n另外，大部分情况下，我们要访问一些和特定环境有关的特性，比如浏览器里的Dom特性，那么这儿额外引入`DOM`定义就行了。\n\n## target\n\n项目编译的目标javascript版本。\n\n也就是你的目标客户端支持的最低javascript版本。注意它会影响默认的`lib`配置项。\n\n\n<!--hexo-->\n\n# compilerOptions - Compiler Diagnostics\n\n编译诊断配置项。\n\n## diagnostics / extendedDiagnostics\n\n打印出编译的信息，比如多少文件、编译时间等。\n\nextendedDiagnostics包含了diagnostics给出的所有信息，所以用extendedDiagnostics就行了。这是一个开启extendedDiagnostics的编译信息：\n\n```bash\nFiles:                         143\nLines of Library:            38663\nLines of Definitions:        82578\nSymbols:                     73362\nTypes:                        1495\nParse time:                  0.50s\nResolveModule time:          0.03s\nTotal time:                  1.01s\n```\n\n## explainFiles\n\n打印出文件被编译的原因，也就是它们的引用链。\n\n## listEmittedFiles / listFiles\n\n列出参与编译的文件。\n\n## traceResolution\n\n打印每一个文件的编译流程。\n\n\n<!--hexo-->\n\n# compilerOptions - Completeness\n\n完整性检测的配置项\n\n## skipLibCheck\n\n跳过lib库的类型检测。\n\n\n\n","slug":"tsconfig-json","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne77001ri8oh2t85c2e4","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/23\">https://github.com/taoliujun/blog/issues/23</a></p>\n<!--hexo\n---\nurl: tsconfig-json\ntags:\n  - typescript\n---\n-->\n\n<p><strong>截至TypeScript 5.2</strong>，<code>tsconfig.json</code>的配置项已经有百十个之多，它的某些选项甚至影响了项目的执行结果，所以尽量多的了解它们能让程序员更深的了解ts，写出优美语句让CTO赞赏，甚至避免写出bug。</p>\n<p>本issue的内容，只是个人在工作经验的影响下，对官方文档的内容理解。且内容有所欠缺，基本只记录了我工作涉及到的配置项，比如不怎么使用class，对class的配置项就略过了。</p>\n<p>官方文档：<a href=\"https://www.typescriptlang.org/tsconfig\">https://www.typescriptlang.org/tsconfig</a></p>\n<hr>\n<!--hexo-->\n\n<h1 id=\"Top-Level\"><a href=\"#Top-Level\" class=\"headerlink\" title=\"Top Level\"></a>Top Level</h1><p>一些根配置项。</p>\n<h2 id=\"extends\"><a href=\"#extends\" class=\"headerlink\" title=\"extends\"></a>extends</h2><p>继承另一个配置文件，推荐的一些官方的配置文件来继承使用：<a href=\"https://github.com/tsconfig/bases/tree/main/bases\">https://github.com/tsconfig/bases/tree/main/bases</a></p>\n<h2 id=\"files-include-exclude\"><a href=\"#files-include-exclude\" class=\"headerlink\" title=\"files, include, exclude\"></a>files, include, exclude</h2><p>这几项指定了在项目里，被ts作用的文件集合。配置本身没什么好说的，记录下它们之间的关系。</p>\n<ul>\n<li>如果files指定了，那么include的默认值是<code>[]</code>，否则include的默认值是<code>**/*</code>；</li>\n<li>exclude用于排除include已指定的文件集合，但这些文件仍然是可以在项目里被引用的；</li>\n<li>exclude默认排除了<code>node_modules</code>、<code>outDir</code>；</li>\n</ul>\n<h2 id=\"references\"><a href=\"#references\" class=\"headerlink\" title=\"references\"></a>references</h2><p>用于项目文件夹分别打包，并且其中有缓存机制的参与，所以编译速度会快很多。</p>\n<p>如下项目结构：</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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\">./interface</span><br><span class=\"line\">./components</span><br><span class=\"line\">./user</span><br><span class=\"line\">./admin</span><br><span class=\"line\">./tsconfig.json</span><br></pre></td></tr></table></figure>\n\n<p>在上面，user和admin文件夹分别是业务用户端、业务管理端，interface是接口定义，components是通用组件。在以往，改动了任何文件，都需要整个项目重新编译。而在使用references之后，将4个文件夹中放入对应的tsconfig.json并各有配置，在根tsconfig中指定好references的path后，tsc利用缓存机制，会只打包改动过的文件夹。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions\"><a href=\"#compilerOptions\" class=\"headerlink\" title=\"compilerOptions\"></a>compilerOptions</h1><p>编译器配置项太多了，按作用拆分成几个评论来说。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Type-Checking\"><a href=\"#compilerOptions-Type-Checking\" class=\"headerlink\" title=\"compilerOptions - Type Checking\"></a>compilerOptions - Type Checking</h1><p>和类型检查有关的配置项。</p>\n<h2 id=\"strict\"><a href=\"#strict\" class=\"headerlink\" title=\"strict\"></a>strict</h2><p>strict是一个严格模式的快捷开关，开启后会默认打开strictNullChecks、noImplicitAny等选项。并且随着typescript的升级，它可能会默认开启新增特性，列出截至5.2默认开启的选项：</p>\n<p><a href=\"https://www.typescriptlang.org/tsconfig#alwaysStrict\">alwaysStrict</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictNullChecks\">strictNullChecks</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictBindCallApply\">strictBindCallApply</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictFunctionTypes\">strictFunctionTypes</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictPropertyInitialization\">strictPropertyInitialization</a><br><a href=\"https://www.typescriptlang.org/tsconfig#noImplicitAny\">noImplicitAny</a><br><a href=\"https://www.typescriptlang.org/tsconfig#noImplicitThis\">noImplicitThis</a><br><a href=\"https://www.typescriptlang.org/tsconfig#useUnknownInCatchVariables\">useUnknownInCatchVariables</a></p>\n<h2 id=\"alwaysStrict\"><a href=\"#alwaysStrict\" class=\"headerlink\" title=\"alwaysStrict\"></a>alwaysStrict</h2><p>对所有文件启用javascript strict模式。注意，这和typescript strict不是同一个东西。参考：<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode\">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode</a></p>\n<h2 id=\"allowUnreachableCode\"><a href=\"#allowUnreachableCode\" class=\"headerlink\" title=\"allowUnreachableCode\"></a>allowUnreachableCode</h2><p>对未使用的代码的处理策略，可设置警告(默认)、错误、忽略。</p>\n<h2 id=\"allowUnusedLabels\"><a href=\"#allowUnusedLabels\" class=\"headerlink\" title=\"allowUnusedLabels\"></a>allowUnusedLabels</h2><p>对未使用的Label的处理策略，可设置警告(默认)、错误、忽略。</p>\n<h2 id=\"exactOptionalPropertyTypes\"><a href=\"#exactOptionalPropertyTypes\" class=\"headerlink\" title=\"exactOptionalPropertyTypes\"></a>exactOptionalPropertyTypes</h2><p>对可选项设置为undefined的策略。</p>\n<p>举例：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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\">interface</span> <span class=\"title class_\">User</span> &#123;</span><br><span class=\"line\">    sex?: <span class=\"number\">1</span> | <span class=\"number\">0</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\">man</span>: <span class=\"title class_\">User</span> = &#123;&#125;;</span><br><span class=\"line\">man.<span class=\"property\">sex</span> = <span class=\"number\">1</span>;</span><br><span class=\"line\">man.<span class=\"property\">sex</span> = <span class=\"number\">0</span>;</span><br><span class=\"line\">man.<span class=\"property\">sex</span> = <span class=\"literal\">undefined</span>;</span><br></pre></td></tr></table></figure>\n\n<p><code>User.sex</code>是一个可选项，它的预期值是<code>0|1|undefined</code>。但是呢，<code>sex</code>可选想表达的意思是未被定义，而不是值真的是undefined。那么开启本选项后，<code>man.sex = undefined</code>这个赋值语句会给一个报错。</p>\n<h2 id=\"noImplicitAny\"><a href=\"#noImplicitAny\" class=\"headerlink\" title=\"noImplicitAny\"></a>noImplicitAny</h2><p>对推导类型为any的策略。</p>\n<figure class=\"highlight typescript\"><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\">function</span> <span class=\"title function_\">fn</span>(<span class=\"params\">s</span>) &#123;</span><br><span class=\"line\">  <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(s.<span class=\"title function_\">subtr</span>(<span class=\"number\">3</span>));</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>入参<code>s</code>推导为<code>any</code>，在选项开启情况下会报错。</p>\n<h2 id=\"noImplicitReturns\"><a href=\"#noImplicitReturns\" class=\"headerlink\" title=\"noImplicitReturns\"></a>noImplicitReturns</h2><p>对函数每个分支必须有return语句的策略。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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_\">fn</span>(<span class=\"params\">s: <span class=\"built_in\">string</span></span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (s) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> s.<span class=\"title function_\">substring</span>(<span class=\"number\">3</span>);</span><br><span class=\"line\">    &#125; <span class=\"keyword\">else</span> &#123;</span><br><span class=\"line\">        <span class=\"string\">&#x27;nothing&#x27;</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>开启后，ts报错认为<code>fn</code>函数的最后没有return语句。</p>\n<h2 id=\"noPropertyAccessFromIndexSignature\"><a href=\"#noPropertyAccessFromIndexSignature\" class=\"headerlink\" title=\"noPropertyAccessFromIndexSignature\"></a>noPropertyAccessFromIndexSignature</h2><p>对访问未定义的对象属性的策略。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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_\">User</span> &#123;</span><br><span class=\"line\">    name?: <span class=\"built_in\">string</span>;</span><br><span class=\"line\">    [<span class=\"attr\">key</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 class=\"keyword\">const</span> <span class=\"attr\">a</span>: <span class=\"title class_\">User</span> = &#123;&#125;;</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"property\">name</span>, a[<span class=\"string\">&#x27;name&#x27;</span>], a.<span class=\"property\">sex</span>, a[<span class=\"string\">&#x27;sex&#x27;</span>]);</span><br></pre></td></tr></table></figure>\n\n<p>访问对象属性有<code>.</code>和<code>[index]</code>两个方式，访问未定义的属性，开启本选项后，在<code>a.sex</code>处会抛出一个错误。</p>\n<h2 id=\"noUncheckedIndexedAccess\"><a href=\"#noUncheckedIndexedAccess\" class=\"headerlink\" title=\"noUncheckedIndexedAccess\"></a>noUncheckedIndexedAccess</h2><p>未定义的对象属性值类型，给追加上<code>undefined</code>类型。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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_\">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\">propName</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\">declare</span> <span class=\"keyword\">const</span> <span class=\"attr\">admin</span>: <span class=\"title class_\">User</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// (property) User.name: string</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(admin.<span class=\"property\">name</span>);</span><br><span class=\"line\"><span class=\"comment\">// (index) User[string]: string</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(admin.<span class=\"property\">birthday</span>);</span><br></pre></td></tr></table></figure>\n\n<p>上例中，birthday的值类型是<code>string</code>，开启本项后，类型追加上<code>undefined</code>。</p>\n<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=\"comment\">// (index) User[string]: string | undefined</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(admin.<span class=\"property\">birthday</span>);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"noUnusedLocals\"><a href=\"#noUnusedLocals\" class=\"headerlink\" title=\"noUnusedLocals\"></a>noUnusedLocals</h2><p>局部变量未使用，抛出错误。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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_\">test</span>(<span class=\"params\"></span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">const</span> defaultModelID = <span class=\"number\">23</span>;</span><br><span class=\"line\"><span class=\"comment\">// &#x27;defaultModelID&#x27; is declared but its value is never read.</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"noUnusedParameters\"><a href=\"#noUnusedParameters\" class=\"headerlink\" title=\"noUnusedParameters\"></a>noUnusedParameters</h2><p>入参未使用，抛出错误。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"title function_\">createDefaultKeyboard</span> = (<span class=\"params\">modelID: <span class=\"built_in\">number</span></span>) =&gt; &#123;</span><br><span class=\"line\"><span class=\"comment\">// &#x27;modelID&#x27; is declared but its value is never read.</span></span><br><span class=\"line\">  <span class=\"keyword\">const</span> defaultModelID = <span class=\"number\">23</span>;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> &#123; <span class=\"attr\">type</span>: <span class=\"string\">&quot;keyboard&quot;</span>, <span class=\"attr\">modelID</span>: defaultModelID &#125;;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"strictBindCallApply\"><a href=\"#strictBindCallApply\" class=\"headerlink\" title=\"strictBindCallApply\"></a>strictBindCallApply</h2><p>在使用函数的call、bind、apply时，是否要检查传入参数的类型。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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_\">fn</span>(<span class=\"params\">x: <span class=\"built_in\">string</span></span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> x;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> n1 = fn.<span class=\"title function_\">call</span>(<span class=\"literal\">undefined</span>, <span class=\"string\">&#x27;10&#x27;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> n2 = fn.<span class=\"title function_\">call</span>(<span class=\"literal\">undefined</span>, <span class=\"literal\">false</span>);</span><br></pre></td></tr></table></figure>\n\n<p>如上代码中，第二个call中的入参false和string类型不匹配而报错。</p>\n<h2 id=\"strictFunctionTypes\"><a href=\"#strictFunctionTypes\" class=\"headerlink\" title=\"strictFunctionTypes\"></a>strictFunctionTypes</h2><p>更精确的检查函数入参类型。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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> <span class=\"title class_\">GetUser</span> = <span class=\"function\">(<span class=\"params\">id: <span class=\"built_in\">string</span> | <span class=\"built_in\">number</span></span>) =&gt;</span> <span class=\"built_in\">any</span>;</span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">test</span>(<span class=\"params\">x: <span class=\"built_in\">string</span></span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> x;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"attr\">getUser</span>: <span class=\"title class_\">GetUser</span> = test;</span><br></pre></td></tr></table></figure>\n\n<p>如上代码中，GetUser的入参类型<code>string | number</code>不能精确的分配给test的入参类型<code>string</code>。</p>\n<h2 id=\"strictNullChecks\"><a href=\"#strictNullChecks\" class=\"headerlink\" title=\"strictNullChecks\"></a>strictNullChecks</h2><p>是否校验<code>null</code>, <code>undefined</code>的属性访问？</p>\n<p>在以往的纯js项目中，容易忽略变量为undefined后仍然访问其属性的场景，比如在如下代码中，忽略了<code>a</code>为<code>undefined</code>的情况，导致运行时引发异常。</p>\n<figure class=\"highlight javascript\"><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> a = arr1.<span class=\"title function_\">find</span>();</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"property\">name</span>)</span><br></pre></td></tr></table></figure>\n\n<p>本选项开启后，在静态检查时就提示开发者，变量可能是<code>null</code>, <code>undefined</code>，不能访问到<code>name</code>属性。</p>\n<h2 id=\"useUnknownInCatchVariables\"><a href=\"#useUnknownInCatchVariables\" class=\"headerlink\" title=\"useUnknownInCatchVariables\"></a>useUnknownInCatchVariables</h2><p>有时候我们并不知道catch的err类型是什么，它的类型由try里的实际运行分支决定，而如果当成any处理，那么访问它的属性是危险的。当开启本项后，err的类型是unknown，必须先限定其类型再安全的访问其属性，如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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\">try</span> &#123;</span><br><span class=\"line\">  <span class=\"comment\">// ...</span></span><br><span class=\"line\">&#125; <span class=\"keyword\">catch</span> (err) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (err <span class=\"keyword\">instanceof</span> <span class=\"title class_\">Error</span>) &#123;</span><br><span class=\"line\">    <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(err.<span class=\"property\">message</span>);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Modules\"><a href=\"#compilerOptions-Modules\" class=\"headerlink\" title=\"compilerOptions - Modules\"></a>compilerOptions - Modules</h1><p>模块的处理策略。</p>\n<h2 id=\"allowArbitraryExtensions\"><a href=\"#allowArbitraryExtensions\" class=\"headerlink\" title=\"allowArbitraryExtensions\"></a>allowArbitraryExtensions</h2><p>ts默认支持了ts、js、cjs、jsx等模块的解析描述，通过<code>global.d.ts</code>的定义扩展，还可以支持css、jpg等模块的解析描述（你要自己保证webpack loader之类的解析器去真实支持加载这些模块）。而有时候，需要对特定模块文件（不管是否已全局定义过该模块的描述）做特别的描述，就可以开启该选项，并且创建一个<code>&#123;file basename&#125;.d.&#123;extension&#125;.ts</code>文件。</p>\n<p>如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\">// test.ts</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 报错：Cannot find module &#x27;./a.jpk&#x27; or its corresponding type declarations.ts(2307)</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> a <span class=\"keyword\">from</span> <span class=\"string\">&#x27;./a.jpk&#x27;</span>;</span><br><span class=\"line\"><span class=\"comment\">// doTest类型是any</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"title function_\">doTest</span>());</span><br></pre></td></tr></table></figure>\n\n<p>开启该项，并增加<code>a.d.jpk.ts</code>文件：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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\">// a.d.jpk.ts</span></span><br><span class=\"line\"><span class=\"keyword\">declare</span> <span class=\"keyword\">const</span> <span class=\"attr\">jpk</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">doTest</span>: <span class=\"function\">() =&gt;</span> <span class=\"built_in\">void</span>;</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> jpk;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// test.ts</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> a <span class=\"keyword\">from</span> <span class=\"string\">&#x27;./a.jpk&#x27;</span>;</span><br><span class=\"line\"><span class=\"comment\">// doTest的类型：(property) doTest: () =&gt; void</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"title function_\">doTest</span>());</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"allowImportingTsExtensions\"><a href=\"#allowImportingTsExtensions\" class=\"headerlink\" title=\"allowImportingTsExtensions\"></a>allowImportingTsExtensions</h2><p>是否允许在import path带入ts、tsx等后缀名。</p>\n<p>ts项目需要编译成js代码后执行，如果我们使用ts-node来执行项目，可以启用<code>noEmit</code>来禁止这个编译行为，并且在项目源码中直接引入<code>.ts</code>来引入正确的、完整的路径。</p>\n<p>举例：</p>\n<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\">import</span> &#123; wait &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;@/utils/utils.ts&#x27;</span>;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"allowUmdGlobalAccess\"><a href=\"#allowUmdGlobalAccess\" class=\"headerlink\" title=\"allowUmdGlobalAccess\"></a>allowUmdGlobalAccess</h2><p>&#x2F;&#x2F; TODO<br>和umd的声明有关系，不过我还不明确它的意义。见：<a href=\"https://github.com/microsoft/TypeScript/pull/30776%E3%80%82\">https://github.com/microsoft/TypeScript/pull/30776。</a></p>\n<h2 id=\"baseUrl\"><a href=\"#baseUrl\" class=\"headerlink\" title=\"baseUrl\"></a>baseUrl</h2><p>为解析无路径修饰的模块，设置一个基础路径。 什么叫做无路径修饰？就是该模块不是一个绝对或相对路径，如<code>import a from &#39;@/hello/world&#39;</code>。</p>\n<p>如果配置了该项，那么ts从该项指定的目录中开始查找模块，优先级也高于<code>node_modules</code>。</p>\n<h2 id=\"module\"><a href=\"#module\" class=\"headerlink\" title=\"module\"></a>module</h2><p>模块打包的策略，也就是指编译后的模块加载代码是require、import之类的语法。推荐大家阅读：<a href=\"https://www.typescriptlang.org/docs/handbook/modules/theory.html\">模块理论</a>。</p>\n<p>这个话题有点繁琐，也涉及到javascript的模块化amd、umd之类的历史，对于2023年这个时间点来说，关注下CommonJS、ESM即可，ESM还细分为ES2015、ES20XX等版本，他们的模块打包策略是一样的，区别是更高版本的ESM还支持了<code>dynamic imports</code>、<code>import.meta</code>和<code>top level await</code>之类的东西。</p>\n<p>补充的是，nodejs的模块打包策略也早就支持esm了，具体参照package.json的设置：<a href=\"https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext\">https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext</a></p>\n<h2 id=\"moduleResolution\"><a href=\"#moduleResolution\" class=\"headerlink\" title=\"moduleResolution\"></a>moduleResolution</h2><p>加载模块的策略，也就是指用什么策略去解析<code>import xxx from &#39;pathA&#39;</code>这里的<code>pathA</code>。<strong>注意区分和module的关系，module指的是项目的模块化是如何打包的，而moduleResolution指的是项目如何加载模块的</strong>。截至2023支持如下策略：</p>\n<ul>\n<li>node16&#x2F;nodenext，对于Node12+版本，本策略可自由根据import&#x2F;require选择合适的算法去加载模块。</li>\n<li>node10，对于Node12之前的版本，本策略只支持require算法加载模块。<strong>基本不用关心了</strong></li>\n<li>bundler，和node16一样，但不要求模块有后缀名。</li>\n<li>classic，早期的策略，不用管了。</li>\n</ul>\n<p><strong>这东西还要和module搭配使用，并且！并且！和package.json还有扯不清的关系。强烈建议阅读上文提到的<a href=\"https://www.typescriptlang.org/docs/handbook/modules/theory.html\">模块理论</a></strong></p>\n<p>另外，由于自己对这块的理解也不足深，还参考了这篇文章：<a href=\"https://zhuanlan.zhihu.com/p/621795173%E3%80%82\">https://zhuanlan.zhihu.com/p/621795173。</a></p>\n<h2 id=\"moduleSuffixes\"><a href=\"#moduleSuffixes\" class=\"headerlink\" title=\"moduleSuffixes\"></a>moduleSuffixes</h2><p>模块搜索时的文件扩展名补充，比如以下配置项：</p>\n<figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;compilerOptions&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;moduleSuffixes&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"string\">&quot;.ios&quot;</span><span class=\"punctuation\">,</span> <span class=\"string\">&quot;.native&quot;</span><span class=\"punctuation\">,</span> <span class=\"string\">&quot;&quot;</span><span class=\"punctuation\">]</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span></span><br></pre></td></tr></table></figure>\n\n<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\">import</span> * <span class=\"keyword\">as</span> foo <span class=\"keyword\">from</span> <span class=\"string\">&quot;./foo&quot;</span>;</span><br></pre></td></tr></table></figure>\n<p>TypeScript 会按顺序寻找<code>./foo.ios.ts</code>、<code>./foo.native.ts</code>、<code>./foo.ts</code>。</p>\n<h2 id=\"paths\"><a href=\"#paths\" class=\"headerlink\" title=\"paths\"></a>paths</h2><p>在加载模块路径时，加入一个别名匹配。可以理解为webpack的alias。</p>\n<h2 id=\"resolveJsonModule\"><a href=\"#resolveJsonModule\" class=\"headerlink\" title=\"resolveJsonModule\"></a>resolveJsonModule</h2><p>允许加载json模块（文件）。</p>\n<h2 id=\"resolvePackageJsonExports\"><a href=\"#resolvePackageJsonExports\" class=\"headerlink\" title=\"resolvePackageJsonExports\"></a>resolvePackageJsonExports</h2><p>引用<code>node_modules</code>包时，强制遵循包package.json的exports字段的定义。还是那句话，阅读下模块理论那篇文章，不然很难理解前面这句话的信息量。</p>\n<h2 id=\"resolvePackageJsonImports\"><a href=\"#resolvePackageJsonImports\" class=\"headerlink\" title=\"resolvePackageJsonImports\"></a>resolvePackageJsonImports</h2><p>强制typescript使用package.json中imports字段的定义去加载<code>#</code>符号开头的模块路径。例：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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;imports&quot;</span>: &#123;</span><br><span class=\"line\">   <span class=\"string\">&quot;#test/*&quot;</span>: <span class=\"string\">&quot;./src/test/*&quot;</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<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=\"comment\">// src/test/1.ts</span></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">const</span> a = <span class=\"number\">123</span>;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight typescript\"><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\">// src/b.ts</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; a &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;#test/1&#x27;</span>;</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&#x27;==a&#x27;</span>, a);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"rootDir\"><a href=\"#rootDir\" class=\"headerlink\" title=\"rootDir\"></a>rootDir</h2><p>指定项目的根目录，默认值可以理解为所有ts文件目录的最大集。例如：</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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\">MyProj</span><br><span class=\"line\">├── tsconfig.json</span><br><span class=\"line\">├── core</span><br><span class=\"line\">│   ├── a.ts</span><br><span class=\"line\">│   ├── b.ts</span><br><span class=\"line\">│   ├── sub</span><br><span class=\"line\">│   │   ├── c.ts</span><br><span class=\"line\">├── types.d.ts</span><br></pre></td></tr></table></figure>\n\n<p>如上的项目，rootDir的推断值是”core”。但是你可以手工指定为<code>tsconfig.json</code>的相对目录”，比如.”。</p>\n<p>另外，如果设置了<code>composite</code>，<code>rootDir</code>的默认值就是<code>tsconfig.json</code>文件的目录。</p>\n<h2 id=\"rootDirs\"><a href=\"#rootDirs\" class=\"headerlink\" title=\"rootDirs\"></a>rootDirs</h2><p>这个属性有点拽，它可以将多个目录虚拟成一个目录。这样在<code>import</code>的时候，就当成同一个目录就行啦。</p>\n<h2 id=\"typeRoots\"><a href=\"#typeRoots\" class=\"headerlink\" title=\"typeRoots\"></a>typeRoots</h2><p>类型定义文件的目录，默认所有@types目录都会被包含，包括node_modules下的@types目录。<br>如果指定了typeRoots，那么@types目录的相关规则会被忽略。</p>\n<h2 id=\"types\"><a href=\"#types\" class=\"headerlink\" title=\"types\"></a>types</h2><p>类型定义文件的具体目录，规则和<code>typeRoots</code>一样，不同点是<code>types</code>只指定具体目录，而非<code>*</code>这种匹配型目录。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Emit\"><a href=\"#compilerOptions-Emit\" class=\"headerlink\" title=\"compilerOptions - Emit\"></a>compilerOptions - Emit</h1><p>编译策略。</p>\n<h2 id=\"outDir\"><a href=\"#outDir\" class=\"headerlink\" title=\"outDir\"></a>outDir</h2><p>编译文件放置的目录，默认和源码放同一个目录。</p>\n<h2 id=\"noEmit\"><a href=\"#noEmit\" class=\"headerlink\" title=\"noEmit\"></a>noEmit</h2><p>不要编译ts。</p>\n<p>项目中一般使用babel去编译，typescript仅用来做静态检查，所以设置noEmit就可以不生成js、sourcemap、declaration文件了。</p>\n<h2 id=\"noEmitOnError\"><a href=\"#noEmitOnError\" class=\"headerlink\" title=\"noEmitOnError\"></a>noEmitOnError</h2><p>顾名思义，在检查到错误的时候，不要继续编译了。</p>\n<h2 id=\"declaration-x2F-emitDeclarationOnly-x2F-declarationDir\"><a href=\"#declaration-x2F-emitDeclarationOnly-x2F-declarationDir\" class=\"headerlink\" title=\"declaration &#x2F; emitDeclarationOnly &#x2F; declarationDir\"></a>declaration &#x2F; emitDeclarationOnly &#x2F; declarationDir</h2><p>生成类型描述文件。</p>\n<p>这个是typescript最重要的几个特性之一了，为<code>.ts</code>文件生成类型定义文件<code>.d.ts</code>。如果不想同时生成<code>.js</code>文件，则使用<code>emitDeclarationOnly</code>。</p>\n<p>同时，可以使用<code>declarationDir</code>指定类型定义文件的生成目录。</p>\n<h2 id=\"declarationMap\"><a href=\"#declarationMap\" class=\"headerlink\" title=\"declarationMap\"></a>declarationMap</h2><p>给<code>.d.ts</code>文件增加一个map标识到<code>.ts</code>源文件，类似sourceMap。</p>\n<h2 id=\"sourceMap-x2F-inlineSourceMap-x2F-inlineSources-x2F-mapRoot-x2F-sourceRoot\"><a href=\"#sourceMap-x2F-inlineSourceMap-x2F-inlineSources-x2F-mapRoot-x2F-sourceRoot\" class=\"headerlink\" title=\"sourceMap &#x2F; inlineSourceMap &#x2F; inlineSources &#x2F; mapRoot &#x2F; sourceRoot\"></a>sourceMap &#x2F; inlineSourceMap &#x2F; inlineSources &#x2F; mapRoot &#x2F; sourceRoot</h2><p>typescript也是支持souce map的，这里就不解释sourcemap是什么了。它的相关配置项有：</p>\n<p>sourceMap，生成sourcemap文件。<br>inlineSourceMap，不生成sourcemap文件，而是直接把source内容写在.js文件中。<br>inlineSources，同inlineSourceMap。<br>mapRoot，指定sourceMap文件的路径，比如部署到网络中，可以指定为”<a href=\"http://xxxx.com\"./\">http://xxxx.com\"。</a><br>sourceRoot，指定source文件的路径，同mapRoot。</p>\n<h2 id=\"downlevelIteration\"><a href=\"#downlevelIteration\" class=\"headerlink\" title=\"downlevelIteration\"></a>downlevelIteration</h2><p>对迭代器的降级解析。</p>\n<p>在es6中增加了for&#x2F;of，spread等迭代特性，typescript在编译成es5的时候，要使用何种语法。文档中有个字符遍历的例子说明开启与否的迭代影响，这对业务计算结果是有影响的。</p>\n<p>不过项目中使用了babel之类的编译器，就不用担心这些影响了。</p>\n<h2 id=\"importHelpers\"><a href=\"#importHelpers\" class=\"headerlink\" title=\"importHelpers\"></a>importHelpers</h2><p>引入降级解析的包。</p>\n<p>将es6的某些特新编译成es5，如迭代器、异步语法等，会将模块中每个相应的代码都编译成降级代码，使得类似代码重复。如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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\">var</span> __read = (<span class=\"variable language_\">this</span> &amp;&amp; <span class=\"variable language_\">this</span>.<span class=\"property\">__read</span>) || <span class=\"keyword\">function</span> (<span class=\"params\">o, n</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> m = <span class=\"keyword\">typeof</span> <span class=\"title class_\">Symbol</span> === <span class=\"string\">&quot;function&quot;</span> &amp;&amp; o[<span class=\"title class_\">Symbol</span>.<span class=\"property\">iterator</span>];</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (!m) <span class=\"keyword\">return</span> o;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> i = m.<span class=\"title function_\">call</span>(o), r, ar = [], e;</span><br><span class=\"line\">    <span class=\"keyword\">try</span> &#123;</span><br><span class=\"line\">        <span class=\"keyword\">while</span> ((n === <span class=\"built_in\">void</span> <span class=\"number\">0</span> || n-- &gt; <span class=\"number\">0</span>) &amp;&amp; !(r = i.<span class=\"title function_\">next</span>()).<span class=\"property\">done</span>) ar.<span class=\"title function_\">push</span>(r.<span class=\"property\">value</span>);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">catch</span> (error) &#123; e = &#123; <span class=\"attr\">error</span>: error &#125;; &#125;</span><br><span class=\"line\">    <span class=\"keyword\">finally</span> &#123;</span><br><span class=\"line\">        <span class=\"keyword\">try</span> &#123;</span><br><span class=\"line\">            <span class=\"keyword\">if</span> (r &amp;&amp; !r.<span class=\"property\">done</span> &amp;&amp; (m = i[<span class=\"string\">&quot;return&quot;</span>])) m.<span class=\"title function_\">call</span>(i);</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">        <span class=\"keyword\">finally</span> &#123; <span class=\"keyword\">if</span> (e) <span class=\"keyword\">throw</span> e.<span class=\"property\">error</span>; &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> ar;</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"><span class=\"keyword\">var</span> __spreadArray = (<span class=\"variable language_\">this</span> &amp;&amp; <span class=\"variable language_\">this</span>.<span class=\"property\">__spreadArray</span>) || <span class=\"keyword\">function</span> (<span class=\"params\">to, <span class=\"keyword\">from</span>, pack</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (pack || <span class=\"variable language_\">arguments</span>.<span class=\"property\">length</span> === <span class=\"number\">2</span>) <span class=\"keyword\">for</span> (<span class=\"keyword\">var</span> i = <span class=\"number\">0</span>, l = <span class=\"keyword\">from</span>.<span class=\"property\">length</span>, ar; i &lt; l; i++) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">if</span> (ar || !(i <span class=\"keyword\">in</span> <span class=\"keyword\">from</span>)) &#123;</span><br><span class=\"line\">            <span class=\"keyword\">if</span> (!ar) ar = <span class=\"title class_\">Array</span>.<span class=\"property\"><span class=\"keyword\">prototype</span></span>.<span class=\"property\">slice</span>.<span class=\"title function_\">call</span>(<span class=\"keyword\">from</span>, <span class=\"number\">0</span>, i);</span><br><span class=\"line\">            ar[i] = <span class=\"keyword\">from</span>[i];</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> to.<span class=\"title function_\">concat</span>(ar || <span class=\"title class_\">Array</span>.<span class=\"property\"><span class=\"keyword\">prototype</span></span>.<span class=\"property\">slice</span>.<span class=\"title function_\">call</span>(<span class=\"keyword\">from</span>));</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">function</span> <span class=\"title function_\">fn</span>(<span class=\"params\">arr</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> arr2 = <span class=\"title function_\">__spreadArray</span>([<span class=\"number\">1</span>], <span class=\"title function_\">__read</span>(arr), <span class=\"literal\">false</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>如果同时开启了<code>downlevelIteration</code>和<code>importHelpers</code>，并且安装了<code>tslib</code>包，那么代码会编译成类似这样：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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\">import</span> &#123; __read, __spreadArray &#125; <span class=\"keyword\">from</span> <span class=\"string\">&quot;tslib&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">function</span> <span class=\"title function_\">fn</span>(<span class=\"params\">arr</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> arr2 = <span class=\"title function_\">__spreadArray</span>([<span class=\"number\">1</span>], <span class=\"title function_\">__read</span>(arr), <span class=\"literal\">false</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"noEmitHelpers\"><a href=\"#noEmitHelpers\" class=\"headerlink\" title=\"noEmitHelpers\"></a>noEmitHelpers</h2><p>typescript处理迭代器、异步等的降级策略是生成一堆降级代码，也可以使用”importHelpers”和”tslib”来提取公共代码。但通过这个配置，可以自定义降级代码了。具体参照文档。</p>\n<h2 id=\"preserveConstEnums\"><a href=\"#preserveConstEnums\" class=\"headerlink\" title=\"preserveConstEnums\"></a>preserveConstEnums</h2><p>是否在编辑结果中移除<code>const enum</code>的定义。因为javascript没有enum概念，typescript会将enum的引用编译成具体的值。如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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=\"keyword\">enum</span> <span class=\"title class_\">Album</span> &#123;</span><br><span class=\"line\">  <span class=\"title class_\">JimmyEatWorldFutures</span> = <span class=\"number\">1</span>,</span><br><span class=\"line\">  <span class=\"title class_\">TubRingZooHypothesis</span> = <span class=\"number\">2</span>,</span><br><span class=\"line\">  <span class=\"title class_\">DogFashionDiscoAdultery</span> = <span class=\"number\">3</span>,</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"> </span><br><span class=\"line\"><span class=\"keyword\">const</span> selectedAlbum = <span class=\"title class_\">Album</span>.<span class=\"property\">JimmyEatWorldFutures</span>;</span><br><span class=\"line\"><span class=\"keyword\">if</span> (selectedAlbum === <span class=\"title class_\">Album</span>.<span class=\"property\">JimmyEatWorldFutures</span>) &#123;</span><br><span class=\"line\">  <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;That is a great choice.&quot;</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>编译结果如下：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&quot;use strict&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">const</span> selectedAlbum = <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>;</span><br><span class=\"line\"><span class=\"keyword\">if</span> (selectedAlbum === <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>) &#123;</span><br><span class=\"line\">    <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;That is a great choice.&quot;</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>如果开启此项，则编译结果中会描述出该enum的结构。如下：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&quot;use strict&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">var</span> <span class=\"title class_\">Album</span>;</span><br><span class=\"line\">(<span class=\"keyword\">function</span> (<span class=\"params\">Album</span>) &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Album</span>[<span class=\"title class_\">Album</span>[<span class=\"string\">&quot;JimmyEatWorldFutures&quot;</span>] = <span class=\"number\">1</span>] = <span class=\"string\">&quot;JimmyEatWorldFutures&quot;</span>;</span><br><span class=\"line\">    <span class=\"title class_\">Album</span>[<span class=\"title class_\">Album</span>[<span class=\"string\">&quot;TubRingZooHypothesis&quot;</span>] = <span class=\"number\">2</span>] = <span class=\"string\">&quot;TubRingZooHypothesis&quot;</span>;</span><br><span class=\"line\">    <span class=\"title class_\">Album</span>[<span class=\"title class_\">Album</span>[<span class=\"string\">&quot;DogFashionDiscoAdultery&quot;</span>] = <span class=\"number\">3</span>] = <span class=\"string\">&quot;DogFashionDiscoAdultery&quot;</span>;</span><br><span class=\"line\">&#125;)(<span class=\"title class_\">Album</span> || (<span class=\"title class_\">Album</span> = &#123;&#125;));</span><br><span class=\"line\"><span class=\"keyword\">const</span> selectedAlbum = <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>;</span><br><span class=\"line\"><span class=\"keyword\">if</span> (selectedAlbum === <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>) &#123;</span><br><span class=\"line\">    <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;That is a great choice.&quot;</span>);</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"preserveValueImports\"><a href=\"#preserveValueImports\" class=\"headerlink\" title=\"preserveValueImports\"></a>preserveValueImports</h2><p>通常，打包器会将未使用的”import”移除掉，但开启了该特性后，会在编译中保留未使用的”import”。例如：</p>\n<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\">import</span> &#123; <span class=\"title class_\">Animal</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&quot;./animal.js&quot;</span>;</span><br><span class=\"line\"><span class=\"built_in\">eval</span>(<span class=\"string\">&quot;console.log(new Animal().isDangerous())&quot;</span>);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"removeComments\"><a href=\"#removeComments\" class=\"headerlink\" title=\"removeComments\"></a>removeComments</h2><p>移除代码中的注释。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-JavaScript-Support\"><a href=\"#compilerOptions-JavaScript-Support\" class=\"headerlink\" title=\"compilerOptions - JavaScript Support\"></a>compilerOptions - JavaScript Support</h1><p>对javascript文件的支持</p>\n<h2 id=\"allowJs\"><a href=\"#allowJs\" class=\"headerlink\" title=\"allowJs\"></a>allowJs</h2><p>允许<code>.ts</code>文件引用<code>.js</code>文件，这常用在javascript项目升级为typescript的过程中。</p>\n<h2 id=\"checkJs\"><a href=\"#checkJs\" class=\"headerlink\" title=\"checkJs\"></a>checkJs</h2><p>是否开启对<code>.js</code>文件的错误检查。</p>\n<h2 id=\"maxNodeModuleJsDepth\"><a href=\"#maxNodeModuleJsDepth\" class=\"headerlink\" title=\"maxNodeModuleJsDepth\"></a>maxNodeModuleJsDepth</h2><p>为<code>.js</code>文件寻找类型定义文件时，允许的最大依赖深度。</p>\n<p>正常情况下，我们会在<code>.js</code>文件的同级补写<code>.d.ts</code>文件，tsc会很快找到类型定义。但有时候确实要扩大搜索范围去找部分<code>.js</code>文件的类型定义文件。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Interop-Constraints\"><a href=\"#compilerOptions-Interop-Constraints\" class=\"headerlink\" title=\"compilerOptions - Interop Constraints\"></a>compilerOptions - Interop Constraints</h1><p>(模块)互相操作的约束</p>\n<h2 id=\"allowSyntheticDefaultImports\"><a href=\"#allowSyntheticDefaultImports\" class=\"headerlink\" title=\"allowSyntheticDefaultImports\"></a>allowSyntheticDefaultImports</h2><p>允许合成<code>default</code>。</p>\n<p>如果一个模块A没有<code>export default</code>，那么另一个模块B在<code>import defaultA from &#39;./a&#39;</code>的时候，会抛出错误说A中没有default。</p>\n<p>有一个做法是<code>import * as defaultA from &#39;./a&#39;</code>曲线救国，但开启这个配置项后，可以直接使用<code>import defaultA from &#39;./a&#39;</code>这样的语法了。</p>\n<h2 id=\"esModuleInterop\"><a href=\"#esModuleInterop\" class=\"headerlink\" title=\"esModuleInterop\"></a>esModuleInterop</h2><p>esm在使用<code>import default from &#39;xxx&#39;</code>方式导入cjs的时候会抛出一个错误，因为cjs模块中没有default。开启此选项后，typescript会使用一些helpers去兼容cjs的default问题。</p>\n<h2 id=\"forceConsistentCasingInFileNames\"><a href=\"#forceConsistentCasingInFileNames\" class=\"headerlink\" title=\"forceConsistentCasingInFileNames\"></a>forceConsistentCasingInFileNames</h2><p>强制引用的模块文件名，和磁盘中的文件名保持一致的大小写。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Language-and-Environment\"><a href=\"#compilerOptions-Language-and-Environment\" class=\"headerlink\" title=\"compilerOptions - Language and Environment\"></a>compilerOptions - Language and Environment</h1><p>和语言、环境有关的配置项。</p>\n<h2 id=\"jsx\"><a href=\"#jsx\" class=\"headerlink\" title=\"jsx\"></a>jsx</h2><p>如何解析<code>.tsx</code>文件中jsx语法？在2023年，react17+后，用<code>react-jsx</code>就行了。</p>\n<h2 id=\"lib\"><a href=\"#lib\" class=\"headerlink\" title=\"lib\"></a>lib</h2><p>在项目中使用的api类型定义集合。</p>\n<p>ts是需要知道你用的每一个javascript方法、属性的定义的，所以它内置了一批定义（比如Math.abs方法）。但是呢，后面新增方法的定义，需要你手工指定包含，ts才能理解了，比如Array.include方法，你就要包含ES2016。但好在你不需要记住这些，因为当你指定<code>target</code>字段时，lib会被默认设置成对应的值的。</p>\n<p>另外，大部分情况下，我们要访问一些和特定环境有关的特性，比如浏览器里的Dom特性，那么这儿额外引入<code>DOM</code>定义就行了。</p>\n<h2 id=\"target\"><a href=\"#target\" class=\"headerlink\" title=\"target\"></a>target</h2><p>项目编译的目标javascript版本。</p>\n<p>也就是你的目标客户端支持的最低javascript版本。注意它会影响默认的<code>lib</code>配置项。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Compiler-Diagnostics\"><a href=\"#compilerOptions-Compiler-Diagnostics\" class=\"headerlink\" title=\"compilerOptions - Compiler Diagnostics\"></a>compilerOptions - Compiler Diagnostics</h1><p>编译诊断配置项。</p>\n<h2 id=\"diagnostics-x2F-extendedDiagnostics\"><a href=\"#diagnostics-x2F-extendedDiagnostics\" class=\"headerlink\" title=\"diagnostics &#x2F; extendedDiagnostics\"></a>diagnostics &#x2F; extendedDiagnostics</h2><p>打印出编译的信息，比如多少文件、编译时间等。</p>\n<p>extendedDiagnostics包含了diagnostics给出的所有信息，所以用extendedDiagnostics就行了。这是一个开启extendedDiagnostics的编译信息：</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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\">Files:                         143</span><br><span class=\"line\">Lines of Library:            38663</span><br><span class=\"line\">Lines of Definitions:        82578</span><br><span class=\"line\">Symbols:                     73362</span><br><span class=\"line\">Types:                        1495</span><br><span class=\"line\">Parse time:                  0.50s</span><br><span class=\"line\">ResolveModule time:          0.03s</span><br><span class=\"line\">Total time:                  1.01s</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"explainFiles\"><a href=\"#explainFiles\" class=\"headerlink\" title=\"explainFiles\"></a>explainFiles</h2><p>打印出文件被编译的原因，也就是它们的引用链。</p>\n<h2 id=\"listEmittedFiles-x2F-listFiles\"><a href=\"#listEmittedFiles-x2F-listFiles\" class=\"headerlink\" title=\"listEmittedFiles &#x2F; listFiles\"></a>listEmittedFiles &#x2F; listFiles</h2><p>列出参与编译的文件。</p>\n<h2 id=\"traceResolution\"><a href=\"#traceResolution\" class=\"headerlink\" title=\"traceResolution\"></a>traceResolution</h2><p>打印每一个文件的编译流程。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Completeness\"><a href=\"#compilerOptions-Completeness\" class=\"headerlink\" title=\"compilerOptions - Completeness\"></a>compilerOptions - Completeness</h1><p>完整性检测的配置项</p>\n<h2 id=\"skipLibCheck\"><a href=\"#skipLibCheck\" class=\"headerlink\" title=\"skipLibCheck\"></a>skipLibCheck</h2><p>跳过lib库的类型检测。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/23\">https://github.com/taoliujun/blog/issues/23</a></p>\n<!--hexo\n---\nurl: tsconfig-json\ntags:\n  - typescript\n---\n-->\n\n<p><strong>截至TypeScript 5.2</strong>，<code>tsconfig.json</code>的配置项已经有百十个之多，它的某些选项甚至影响了项目的执行结果，所以尽量多的了解它们能让程序员更深的了解ts，写出优美语句让CTO赞赏，甚至避免写出bug。</p>\n<p>本issue的内容，只是个人在工作经验的影响下，对官方文档的内容理解。且内容有所欠缺，基本只记录了我工作涉及到的配置项，比如不怎么使用class，对class的配置项就略过了。</p>\n<p>官方文档：<a href=\"https://www.typescriptlang.org/tsconfig\">https://www.typescriptlang.org/tsconfig</a></p>\n<hr>\n<!--hexo-->\n\n<h1 id=\"Top-Level\"><a href=\"#Top-Level\" class=\"headerlink\" title=\"Top Level\"></a>Top Level</h1><p>一些根配置项。</p>\n<h2 id=\"extends\"><a href=\"#extends\" class=\"headerlink\" title=\"extends\"></a>extends</h2><p>继承另一个配置文件，推荐的一些官方的配置文件来继承使用：<a href=\"https://github.com/tsconfig/bases/tree/main/bases\">https://github.com/tsconfig/bases/tree/main/bases</a></p>\n<h2 id=\"files-include-exclude\"><a href=\"#files-include-exclude\" class=\"headerlink\" title=\"files, include, exclude\"></a>files, include, exclude</h2><p>这几项指定了在项目里，被ts作用的文件集合。配置本身没什么好说的，记录下它们之间的关系。</p>\n<ul>\n<li>如果files指定了，那么include的默认值是<code>[]</code>，否则include的默认值是<code>**/*</code>；</li>\n<li>exclude用于排除include已指定的文件集合，但这些文件仍然是可以在项目里被引用的；</li>\n<li>exclude默认排除了<code>node_modules</code>、<code>outDir</code>；</li>\n</ul>\n<h2 id=\"references\"><a href=\"#references\" class=\"headerlink\" title=\"references\"></a>references</h2><p>用于项目文件夹分别打包，并且其中有缓存机制的参与，所以编译速度会快很多。</p>\n<p>如下项目结构：</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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\">./interface</span><br><span class=\"line\">./components</span><br><span class=\"line\">./user</span><br><span class=\"line\">./admin</span><br><span class=\"line\">./tsconfig.json</span><br></pre></td></tr></table></figure>\n\n<p>在上面，user和admin文件夹分别是业务用户端、业务管理端，interface是接口定义，components是通用组件。在以往，改动了任何文件，都需要整个项目重新编译。而在使用references之后，将4个文件夹中放入对应的tsconfig.json并各有配置，在根tsconfig中指定好references的path后，tsc利用缓存机制，会只打包改动过的文件夹。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions\"><a href=\"#compilerOptions\" class=\"headerlink\" title=\"compilerOptions\"></a>compilerOptions</h1><p>编译器配置项太多了，按作用拆分成几个评论来说。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Type-Checking\"><a href=\"#compilerOptions-Type-Checking\" class=\"headerlink\" title=\"compilerOptions - Type Checking\"></a>compilerOptions - Type Checking</h1><p>和类型检查有关的配置项。</p>\n<h2 id=\"strict\"><a href=\"#strict\" class=\"headerlink\" title=\"strict\"></a>strict</h2><p>strict是一个严格模式的快捷开关，开启后会默认打开strictNullChecks、noImplicitAny等选项。并且随着typescript的升级，它可能会默认开启新增特性，列出截至5.2默认开启的选项：</p>\n<p><a href=\"https://www.typescriptlang.org/tsconfig#alwaysStrict\">alwaysStrict</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictNullChecks\">strictNullChecks</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictBindCallApply\">strictBindCallApply</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictFunctionTypes\">strictFunctionTypes</a><br><a href=\"https://www.typescriptlang.org/tsconfig#strictPropertyInitialization\">strictPropertyInitialization</a><br><a href=\"https://www.typescriptlang.org/tsconfig#noImplicitAny\">noImplicitAny</a><br><a href=\"https://www.typescriptlang.org/tsconfig#noImplicitThis\">noImplicitThis</a><br><a href=\"https://www.typescriptlang.org/tsconfig#useUnknownInCatchVariables\">useUnknownInCatchVariables</a></p>\n<h2 id=\"alwaysStrict\"><a href=\"#alwaysStrict\" class=\"headerlink\" title=\"alwaysStrict\"></a>alwaysStrict</h2><p>对所有文件启用javascript strict模式。注意，这和typescript strict不是同一个东西。参考：<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode\">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode</a></p>\n<h2 id=\"allowUnreachableCode\"><a href=\"#allowUnreachableCode\" class=\"headerlink\" title=\"allowUnreachableCode\"></a>allowUnreachableCode</h2><p>对未使用的代码的处理策略，可设置警告(默认)、错误、忽略。</p>\n<h2 id=\"allowUnusedLabels\"><a href=\"#allowUnusedLabels\" class=\"headerlink\" title=\"allowUnusedLabels\"></a>allowUnusedLabels</h2><p>对未使用的Label的处理策略，可设置警告(默认)、错误、忽略。</p>\n<h2 id=\"exactOptionalPropertyTypes\"><a href=\"#exactOptionalPropertyTypes\" class=\"headerlink\" title=\"exactOptionalPropertyTypes\"></a>exactOptionalPropertyTypes</h2><p>对可选项设置为undefined的策略。</p>\n<p>举例：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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\">interface</span> <span class=\"title class_\">User</span> &#123;</span><br><span class=\"line\">    sex?: <span class=\"number\">1</span> | <span class=\"number\">0</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\">man</span>: <span class=\"title class_\">User</span> = &#123;&#125;;</span><br><span class=\"line\">man.<span class=\"property\">sex</span> = <span class=\"number\">1</span>;</span><br><span class=\"line\">man.<span class=\"property\">sex</span> = <span class=\"number\">0</span>;</span><br><span class=\"line\">man.<span class=\"property\">sex</span> = <span class=\"literal\">undefined</span>;</span><br></pre></td></tr></table></figure>\n\n<p><code>User.sex</code>是一个可选项，它的预期值是<code>0|1|undefined</code>。但是呢，<code>sex</code>可选想表达的意思是未被定义，而不是值真的是undefined。那么开启本选项后，<code>man.sex = undefined</code>这个赋值语句会给一个报错。</p>\n<h2 id=\"noImplicitAny\"><a href=\"#noImplicitAny\" class=\"headerlink\" title=\"noImplicitAny\"></a>noImplicitAny</h2><p>对推导类型为any的策略。</p>\n<figure class=\"highlight typescript\"><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\">function</span> <span class=\"title function_\">fn</span>(<span class=\"params\">s</span>) &#123;</span><br><span class=\"line\">  <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(s.<span class=\"title function_\">subtr</span>(<span class=\"number\">3</span>));</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>入参<code>s</code>推导为<code>any</code>，在选项开启情况下会报错。</p>\n<h2 id=\"noImplicitReturns\"><a href=\"#noImplicitReturns\" class=\"headerlink\" title=\"noImplicitReturns\"></a>noImplicitReturns</h2><p>对函数每个分支必须有return语句的策略。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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_\">fn</span>(<span class=\"params\">s: <span class=\"built_in\">string</span></span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (s) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">return</span> s.<span class=\"title function_\">substring</span>(<span class=\"number\">3</span>);</span><br><span class=\"line\">    &#125; <span class=\"keyword\">else</span> &#123;</span><br><span class=\"line\">        <span class=\"string\">&#x27;nothing&#x27;</span>;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>开启后，ts报错认为<code>fn</code>函数的最后没有return语句。</p>\n<h2 id=\"noPropertyAccessFromIndexSignature\"><a href=\"#noPropertyAccessFromIndexSignature\" class=\"headerlink\" title=\"noPropertyAccessFromIndexSignature\"></a>noPropertyAccessFromIndexSignature</h2><p>对访问未定义的对象属性的策略。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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_\">User</span> &#123;</span><br><span class=\"line\">    name?: <span class=\"built_in\">string</span>;</span><br><span class=\"line\">    [<span class=\"attr\">key</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 class=\"keyword\">const</span> <span class=\"attr\">a</span>: <span class=\"title class_\">User</span> = &#123;&#125;;</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"property\">name</span>, a[<span class=\"string\">&#x27;name&#x27;</span>], a.<span class=\"property\">sex</span>, a[<span class=\"string\">&#x27;sex&#x27;</span>]);</span><br></pre></td></tr></table></figure>\n\n<p>访问对象属性有<code>.</code>和<code>[index]</code>两个方式，访问未定义的属性，开启本选项后，在<code>a.sex</code>处会抛出一个错误。</p>\n<h2 id=\"noUncheckedIndexedAccess\"><a href=\"#noUncheckedIndexedAccess\" class=\"headerlink\" title=\"noUncheckedIndexedAccess\"></a>noUncheckedIndexedAccess</h2><p>未定义的对象属性值类型，给追加上<code>undefined</code>类型。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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_\">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\">propName</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\">declare</span> <span class=\"keyword\">const</span> <span class=\"attr\">admin</span>: <span class=\"title class_\">User</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// (property) User.name: string</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(admin.<span class=\"property\">name</span>);</span><br><span class=\"line\"><span class=\"comment\">// (index) User[string]: string</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(admin.<span class=\"property\">birthday</span>);</span><br></pre></td></tr></table></figure>\n\n<p>上例中，birthday的值类型是<code>string</code>，开启本项后，类型追加上<code>undefined</code>。</p>\n<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=\"comment\">// (index) User[string]: string | undefined</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(admin.<span class=\"property\">birthday</span>);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"noUnusedLocals\"><a href=\"#noUnusedLocals\" class=\"headerlink\" title=\"noUnusedLocals\"></a>noUnusedLocals</h2><p>局部变量未使用，抛出错误。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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_\">test</span>(<span class=\"params\"></span>) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">const</span> defaultModelID = <span class=\"number\">23</span>;</span><br><span class=\"line\"><span class=\"comment\">// &#x27;defaultModelID&#x27; is declared but its value is never read.</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"noUnusedParameters\"><a href=\"#noUnusedParameters\" class=\"headerlink\" title=\"noUnusedParameters\"></a>noUnusedParameters</h2><p>入参未使用，抛出错误。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"title function_\">createDefaultKeyboard</span> = (<span class=\"params\">modelID: <span class=\"built_in\">number</span></span>) =&gt; &#123;</span><br><span class=\"line\"><span class=\"comment\">// &#x27;modelID&#x27; is declared but its value is never read.</span></span><br><span class=\"line\">  <span class=\"keyword\">const</span> defaultModelID = <span class=\"number\">23</span>;</span><br><span class=\"line\">  <span class=\"keyword\">return</span> &#123; <span class=\"attr\">type</span>: <span class=\"string\">&quot;keyboard&quot;</span>, <span class=\"attr\">modelID</span>: defaultModelID &#125;;</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"strictBindCallApply\"><a href=\"#strictBindCallApply\" class=\"headerlink\" title=\"strictBindCallApply\"></a>strictBindCallApply</h2><p>在使用函数的call、bind、apply时，是否要检查传入参数的类型。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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_\">fn</span>(<span class=\"params\">x: <span class=\"built_in\">string</span></span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> x;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> n1 = fn.<span class=\"title function_\">call</span>(<span class=\"literal\">undefined</span>, <span class=\"string\">&#x27;10&#x27;</span>);</span><br><span class=\"line\"><span class=\"keyword\">const</span> n2 = fn.<span class=\"title function_\">call</span>(<span class=\"literal\">undefined</span>, <span class=\"literal\">false</span>);</span><br></pre></td></tr></table></figure>\n\n<p>如上代码中，第二个call中的入参false和string类型不匹配而报错。</p>\n<h2 id=\"strictFunctionTypes\"><a href=\"#strictFunctionTypes\" class=\"headerlink\" title=\"strictFunctionTypes\"></a>strictFunctionTypes</h2><p>更精确的检查函数入参类型。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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> <span class=\"title class_\">GetUser</span> = <span class=\"function\">(<span class=\"params\">id: <span class=\"built_in\">string</span> | <span class=\"built_in\">number</span></span>) =&gt;</span> <span class=\"built_in\">any</span>;</span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">test</span>(<span class=\"params\">x: <span class=\"built_in\">string</span></span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> x;</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> <span class=\"attr\">getUser</span>: <span class=\"title class_\">GetUser</span> = test;</span><br></pre></td></tr></table></figure>\n\n<p>如上代码中，GetUser的入参类型<code>string | number</code>不能精确的分配给test的入参类型<code>string</code>。</p>\n<h2 id=\"strictNullChecks\"><a href=\"#strictNullChecks\" class=\"headerlink\" title=\"strictNullChecks\"></a>strictNullChecks</h2><p>是否校验<code>null</code>, <code>undefined</code>的属性访问？</p>\n<p>在以往的纯js项目中，容易忽略变量为undefined后仍然访问其属性的场景，比如在如下代码中，忽略了<code>a</code>为<code>undefined</code>的情况，导致运行时引发异常。</p>\n<figure class=\"highlight javascript\"><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> a = arr1.<span class=\"title function_\">find</span>();</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"property\">name</span>)</span><br></pre></td></tr></table></figure>\n\n<p>本选项开启后，在静态检查时就提示开发者，变量可能是<code>null</code>, <code>undefined</code>，不能访问到<code>name</code>属性。</p>\n<h2 id=\"useUnknownInCatchVariables\"><a href=\"#useUnknownInCatchVariables\" class=\"headerlink\" title=\"useUnknownInCatchVariables\"></a>useUnknownInCatchVariables</h2><p>有时候我们并不知道catch的err类型是什么，它的类型由try里的实际运行分支决定，而如果当成any处理，那么访问它的属性是危险的。当开启本项后，err的类型是unknown，必须先限定其类型再安全的访问其属性，如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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\">try</span> &#123;</span><br><span class=\"line\">  <span class=\"comment\">// ...</span></span><br><span class=\"line\">&#125; <span class=\"keyword\">catch</span> (err) &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (err <span class=\"keyword\">instanceof</span> <span class=\"title class_\">Error</span>) &#123;</span><br><span class=\"line\">    <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(err.<span class=\"property\">message</span>);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Modules\"><a href=\"#compilerOptions-Modules\" class=\"headerlink\" title=\"compilerOptions - Modules\"></a>compilerOptions - Modules</h1><p>模块的处理策略。</p>\n<h2 id=\"allowArbitraryExtensions\"><a href=\"#allowArbitraryExtensions\" class=\"headerlink\" title=\"allowArbitraryExtensions\"></a>allowArbitraryExtensions</h2><p>ts默认支持了ts、js、cjs、jsx等模块的解析描述，通过<code>global.d.ts</code>的定义扩展，还可以支持css、jpg等模块的解析描述（你要自己保证webpack loader之类的解析器去真实支持加载这些模块）。而有时候，需要对特定模块文件（不管是否已全局定义过该模块的描述）做特别的描述，就可以开启该选项，并且创建一个<code>&#123;file basename&#125;.d.&#123;extension&#125;.ts</code>文件。</p>\n<p>如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\">// test.ts</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 报错：Cannot find module &#x27;./a.jpk&#x27; or its corresponding type declarations.ts(2307)</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> a <span class=\"keyword\">from</span> <span class=\"string\">&#x27;./a.jpk&#x27;</span>;</span><br><span class=\"line\"><span class=\"comment\">// doTest类型是any</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"title function_\">doTest</span>());</span><br></pre></td></tr></table></figure>\n\n<p>开启该项，并增加<code>a.d.jpk.ts</code>文件：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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\">// a.d.jpk.ts</span></span><br><span class=\"line\"><span class=\"keyword\">declare</span> <span class=\"keyword\">const</span> <span class=\"attr\">jpk</span>: &#123;</span><br><span class=\"line\">    <span class=\"attr\">doTest</span>: <span class=\"function\">() =&gt;</span> <span class=\"built_in\">void</span>;</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> jpk;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// test.ts</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> a <span class=\"keyword\">from</span> <span class=\"string\">&#x27;./a.jpk&#x27;</span>;</span><br><span class=\"line\"><span class=\"comment\">// doTest的类型：(property) doTest: () =&gt; void</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(a.<span class=\"title function_\">doTest</span>());</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"allowImportingTsExtensions\"><a href=\"#allowImportingTsExtensions\" class=\"headerlink\" title=\"allowImportingTsExtensions\"></a>allowImportingTsExtensions</h2><p>是否允许在import path带入ts、tsx等后缀名。</p>\n<p>ts项目需要编译成js代码后执行，如果我们使用ts-node来执行项目，可以启用<code>noEmit</code>来禁止这个编译行为，并且在项目源码中直接引入<code>.ts</code>来引入正确的、完整的路径。</p>\n<p>举例：</p>\n<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\">import</span> &#123; wait &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;@/utils/utils.ts&#x27;</span>;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"allowUmdGlobalAccess\"><a href=\"#allowUmdGlobalAccess\" class=\"headerlink\" title=\"allowUmdGlobalAccess\"></a>allowUmdGlobalAccess</h2><p>&#x2F;&#x2F; TODO<br>和umd的声明有关系，不过我还不明确它的意义。见：<a href=\"https://github.com/microsoft/TypeScript/pull/30776%E3%80%82\">https://github.com/microsoft/TypeScript/pull/30776。</a></p>\n<h2 id=\"baseUrl\"><a href=\"#baseUrl\" class=\"headerlink\" title=\"baseUrl\"></a>baseUrl</h2><p>为解析无路径修饰的模块，设置一个基础路径。 什么叫做无路径修饰？就是该模块不是一个绝对或相对路径，如<code>import a from &#39;@/hello/world&#39;</code>。</p>\n<p>如果配置了该项，那么ts从该项指定的目录中开始查找模块，优先级也高于<code>node_modules</code>。</p>\n<h2 id=\"module\"><a href=\"#module\" class=\"headerlink\" title=\"module\"></a>module</h2><p>模块打包的策略，也就是指编译后的模块加载代码是require、import之类的语法。推荐大家阅读：<a href=\"https://www.typescriptlang.org/docs/handbook/modules/theory.html\">模块理论</a>。</p>\n<p>这个话题有点繁琐，也涉及到javascript的模块化amd、umd之类的历史，对于2023年这个时间点来说，关注下CommonJS、ESM即可，ESM还细分为ES2015、ES20XX等版本，他们的模块打包策略是一样的，区别是更高版本的ESM还支持了<code>dynamic imports</code>、<code>import.meta</code>和<code>top level await</code>之类的东西。</p>\n<p>补充的是，nodejs的模块打包策略也早就支持esm了，具体参照package.json的设置：<a href=\"https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext\">https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-nodenext</a></p>\n<h2 id=\"moduleResolution\"><a href=\"#moduleResolution\" class=\"headerlink\" title=\"moduleResolution\"></a>moduleResolution</h2><p>加载模块的策略，也就是指用什么策略去解析<code>import xxx from &#39;pathA&#39;</code>这里的<code>pathA</code>。<strong>注意区分和module的关系，module指的是项目的模块化是如何打包的，而moduleResolution指的是项目如何加载模块的</strong>。截至2023支持如下策略：</p>\n<ul>\n<li>node16&#x2F;nodenext，对于Node12+版本，本策略可自由根据import&#x2F;require选择合适的算法去加载模块。</li>\n<li>node10，对于Node12之前的版本，本策略只支持require算法加载模块。<strong>基本不用关心了</strong></li>\n<li>bundler，和node16一样，但不要求模块有后缀名。</li>\n<li>classic，早期的策略，不用管了。</li>\n</ul>\n<p><strong>这东西还要和module搭配使用，并且！并且！和package.json还有扯不清的关系。强烈建议阅读上文提到的<a href=\"https://www.typescriptlang.org/docs/handbook/modules/theory.html\">模块理论</a></strong></p>\n<p>另外，由于自己对这块的理解也不足深，还参考了这篇文章：<a href=\"https://zhuanlan.zhihu.com/p/621795173%E3%80%82\">https://zhuanlan.zhihu.com/p/621795173。</a></p>\n<h2 id=\"moduleSuffixes\"><a href=\"#moduleSuffixes\" class=\"headerlink\" title=\"moduleSuffixes\"></a>moduleSuffixes</h2><p>模块搜索时的文件扩展名补充，比如以下配置项：</p>\n<figure class=\"highlight json\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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=\"punctuation\">&#123;</span></span><br><span class=\"line\">  <span class=\"attr\">&quot;compilerOptions&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">&#123;</span></span><br><span class=\"line\">    <span class=\"attr\">&quot;moduleSuffixes&quot;</span><span class=\"punctuation\">:</span> <span class=\"punctuation\">[</span><span class=\"string\">&quot;.ios&quot;</span><span class=\"punctuation\">,</span> <span class=\"string\">&quot;.native&quot;</span><span class=\"punctuation\">,</span> <span class=\"string\">&quot;&quot;</span><span class=\"punctuation\">]</span></span><br><span class=\"line\">  <span class=\"punctuation\">&#125;</span></span><br><span class=\"line\"><span class=\"punctuation\">&#125;</span></span><br></pre></td></tr></table></figure>\n\n<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\">import</span> * <span class=\"keyword\">as</span> foo <span class=\"keyword\">from</span> <span class=\"string\">&quot;./foo&quot;</span>;</span><br></pre></td></tr></table></figure>\n<p>TypeScript 会按顺序寻找<code>./foo.ios.ts</code>、<code>./foo.native.ts</code>、<code>./foo.ts</code>。</p>\n<h2 id=\"paths\"><a href=\"#paths\" class=\"headerlink\" title=\"paths\"></a>paths</h2><p>在加载模块路径时，加入一个别名匹配。可以理解为webpack的alias。</p>\n<h2 id=\"resolveJsonModule\"><a href=\"#resolveJsonModule\" class=\"headerlink\" title=\"resolveJsonModule\"></a>resolveJsonModule</h2><p>允许加载json模块（文件）。</p>\n<h2 id=\"resolvePackageJsonExports\"><a href=\"#resolvePackageJsonExports\" class=\"headerlink\" title=\"resolvePackageJsonExports\"></a>resolvePackageJsonExports</h2><p>引用<code>node_modules</code>包时，强制遵循包package.json的exports字段的定义。还是那句话，阅读下模块理论那篇文章，不然很难理解前面这句话的信息量。</p>\n<h2 id=\"resolvePackageJsonImports\"><a href=\"#resolvePackageJsonImports\" class=\"headerlink\" title=\"resolvePackageJsonImports\"></a>resolvePackageJsonImports</h2><p>强制typescript使用package.json中imports字段的定义去加载<code>#</code>符号开头的模块路径。例：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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;imports&quot;</span>: &#123;</span><br><span class=\"line\">   <span class=\"string\">&quot;#test/*&quot;</span>: <span class=\"string\">&quot;./src/test/*&quot;</span></span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<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=\"comment\">// src/test/1.ts</span></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">const</span> a = <span class=\"number\">123</span>;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight typescript\"><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\">// src/b.ts</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; a &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;#test/1&#x27;</span>;</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&#x27;==a&#x27;</span>, a);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"rootDir\"><a href=\"#rootDir\" class=\"headerlink\" title=\"rootDir\"></a>rootDir</h2><p>指定项目的根目录，默认值可以理解为所有ts文件目录的最大集。例如：</p>\n<figure class=\"highlight shell\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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\">MyProj</span><br><span class=\"line\">├── tsconfig.json</span><br><span class=\"line\">├── core</span><br><span class=\"line\">│   ├── a.ts</span><br><span class=\"line\">│   ├── b.ts</span><br><span class=\"line\">│   ├── sub</span><br><span class=\"line\">│   │   ├── c.ts</span><br><span class=\"line\">├── types.d.ts</span><br></pre></td></tr></table></figure>\n\n<p>如上的项目，rootDir的推断值是”core”。但是你可以手工指定为<code>tsconfig.json</code>的相对目录”，比如.”。</p>\n<p>另外，如果设置了<code>composite</code>，<code>rootDir</code>的默认值就是<code>tsconfig.json</code>文件的目录。</p>\n<h2 id=\"rootDirs\"><a href=\"#rootDirs\" class=\"headerlink\" title=\"rootDirs\"></a>rootDirs</h2><p>这个属性有点拽，它可以将多个目录虚拟成一个目录。这样在<code>import</code>的时候，就当成同一个目录就行啦。</p>\n<h2 id=\"typeRoots\"><a href=\"#typeRoots\" class=\"headerlink\" title=\"typeRoots\"></a>typeRoots</h2><p>类型定义文件的目录，默认所有@types目录都会被包含，包括node_modules下的@types目录。<br>如果指定了typeRoots，那么@types目录的相关规则会被忽略。</p>\n<h2 id=\"types\"><a href=\"#types\" class=\"headerlink\" title=\"types\"></a>types</h2><p>类型定义文件的具体目录，规则和<code>typeRoots</code>一样，不同点是<code>types</code>只指定具体目录，而非<code>*</code>这种匹配型目录。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Emit\"><a href=\"#compilerOptions-Emit\" class=\"headerlink\" title=\"compilerOptions - Emit\"></a>compilerOptions - Emit</h1><p>编译策略。</p>\n<h2 id=\"outDir\"><a href=\"#outDir\" class=\"headerlink\" title=\"outDir\"></a>outDir</h2><p>编译文件放置的目录，默认和源码放同一个目录。</p>\n<h2 id=\"noEmit\"><a href=\"#noEmit\" class=\"headerlink\" title=\"noEmit\"></a>noEmit</h2><p>不要编译ts。</p>\n<p>项目中一般使用babel去编译，typescript仅用来做静态检查，所以设置noEmit就可以不生成js、sourcemap、declaration文件了。</p>\n<h2 id=\"noEmitOnError\"><a href=\"#noEmitOnError\" class=\"headerlink\" title=\"noEmitOnError\"></a>noEmitOnError</h2><p>顾名思义，在检查到错误的时候，不要继续编译了。</p>\n<h2 id=\"declaration-x2F-emitDeclarationOnly-x2F-declarationDir\"><a href=\"#declaration-x2F-emitDeclarationOnly-x2F-declarationDir\" class=\"headerlink\" title=\"declaration &#x2F; emitDeclarationOnly &#x2F; declarationDir\"></a>declaration &#x2F; emitDeclarationOnly &#x2F; declarationDir</h2><p>生成类型描述文件。</p>\n<p>这个是typescript最重要的几个特性之一了，为<code>.ts</code>文件生成类型定义文件<code>.d.ts</code>。如果不想同时生成<code>.js</code>文件，则使用<code>emitDeclarationOnly</code>。</p>\n<p>同时，可以使用<code>declarationDir</code>指定类型定义文件的生成目录。</p>\n<h2 id=\"declarationMap\"><a href=\"#declarationMap\" class=\"headerlink\" title=\"declarationMap\"></a>declarationMap</h2><p>给<code>.d.ts</code>文件增加一个map标识到<code>.ts</code>源文件，类似sourceMap。</p>\n<h2 id=\"sourceMap-x2F-inlineSourceMap-x2F-inlineSources-x2F-mapRoot-x2F-sourceRoot\"><a href=\"#sourceMap-x2F-inlineSourceMap-x2F-inlineSources-x2F-mapRoot-x2F-sourceRoot\" class=\"headerlink\" title=\"sourceMap &#x2F; inlineSourceMap &#x2F; inlineSources &#x2F; mapRoot &#x2F; sourceRoot\"></a>sourceMap &#x2F; inlineSourceMap &#x2F; inlineSources &#x2F; mapRoot &#x2F; sourceRoot</h2><p>typescript也是支持souce map的，这里就不解释sourcemap是什么了。它的相关配置项有：</p>\n<p>sourceMap，生成sourcemap文件。<br>inlineSourceMap，不生成sourcemap文件，而是直接把source内容写在.js文件中。<br>inlineSources，同inlineSourceMap。<br>mapRoot，指定sourceMap文件的路径，比如部署到网络中，可以指定为”<a href=\"http://xxxx.com\"./\">http://xxxx.com\"。</a><br>sourceRoot，指定source文件的路径，同mapRoot。</p>\n<h2 id=\"downlevelIteration\"><a href=\"#downlevelIteration\" class=\"headerlink\" title=\"downlevelIteration\"></a>downlevelIteration</h2><p>对迭代器的降级解析。</p>\n<p>在es6中增加了for&#x2F;of，spread等迭代特性，typescript在编译成es5的时候，要使用何种语法。文档中有个字符遍历的例子说明开启与否的迭代影响，这对业务计算结果是有影响的。</p>\n<p>不过项目中使用了babel之类的编译器，就不用担心这些影响了。</p>\n<h2 id=\"importHelpers\"><a href=\"#importHelpers\" class=\"headerlink\" title=\"importHelpers\"></a>importHelpers</h2><p>引入降级解析的包。</p>\n<p>将es6的某些特新编译成es5，如迭代器、异步语法等，会将模块中每个相应的代码都编译成降级代码，使得类似代码重复。如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><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\">var</span> __read = (<span class=\"variable language_\">this</span> &amp;&amp; <span class=\"variable language_\">this</span>.<span class=\"property\">__read</span>) || <span class=\"keyword\">function</span> (<span class=\"params\">o, n</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> m = <span class=\"keyword\">typeof</span> <span class=\"title class_\">Symbol</span> === <span class=\"string\">&quot;function&quot;</span> &amp;&amp; o[<span class=\"title class_\">Symbol</span>.<span class=\"property\">iterator</span>];</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (!m) <span class=\"keyword\">return</span> o;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> i = m.<span class=\"title function_\">call</span>(o), r, ar = [], e;</span><br><span class=\"line\">    <span class=\"keyword\">try</span> &#123;</span><br><span class=\"line\">        <span class=\"keyword\">while</span> ((n === <span class=\"built_in\">void</span> <span class=\"number\">0</span> || n-- &gt; <span class=\"number\">0</span>) &amp;&amp; !(r = i.<span class=\"title function_\">next</span>()).<span class=\"property\">done</span>) ar.<span class=\"title function_\">push</span>(r.<span class=\"property\">value</span>);</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">catch</span> (error) &#123; e = &#123; <span class=\"attr\">error</span>: error &#125;; &#125;</span><br><span class=\"line\">    <span class=\"keyword\">finally</span> &#123;</span><br><span class=\"line\">        <span class=\"keyword\">try</span> &#123;</span><br><span class=\"line\">            <span class=\"keyword\">if</span> (r &amp;&amp; !r.<span class=\"property\">done</span> &amp;&amp; (m = i[<span class=\"string\">&quot;return&quot;</span>])) m.<span class=\"title function_\">call</span>(i);</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">        <span class=\"keyword\">finally</span> &#123; <span class=\"keyword\">if</span> (e) <span class=\"keyword\">throw</span> e.<span class=\"property\">error</span>; &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> ar;</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"><span class=\"keyword\">var</span> __spreadArray = (<span class=\"variable language_\">this</span> &amp;&amp; <span class=\"variable language_\">this</span>.<span class=\"property\">__spreadArray</span>) || <span class=\"keyword\">function</span> (<span class=\"params\">to, <span class=\"keyword\">from</span>, pack</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">if</span> (pack || <span class=\"variable language_\">arguments</span>.<span class=\"property\">length</span> === <span class=\"number\">2</span>) <span class=\"keyword\">for</span> (<span class=\"keyword\">var</span> i = <span class=\"number\">0</span>, l = <span class=\"keyword\">from</span>.<span class=\"property\">length</span>, ar; i &lt; l; i++) &#123;</span><br><span class=\"line\">        <span class=\"keyword\">if</span> (ar || !(i <span class=\"keyword\">in</span> <span class=\"keyword\">from</span>)) &#123;</span><br><span class=\"line\">            <span class=\"keyword\">if</span> (!ar) ar = <span class=\"title class_\">Array</span>.<span class=\"property\"><span class=\"keyword\">prototype</span></span>.<span class=\"property\">slice</span>.<span class=\"title function_\">call</span>(<span class=\"keyword\">from</span>, <span class=\"number\">0</span>, i);</span><br><span class=\"line\">            ar[i] = <span class=\"keyword\">from</span>[i];</span><br><span class=\"line\">        &#125;</span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> to.<span class=\"title function_\">concat</span>(ar || <span class=\"title class_\">Array</span>.<span class=\"property\"><span class=\"keyword\">prototype</span></span>.<span class=\"property\">slice</span>.<span class=\"title function_\">call</span>(<span class=\"keyword\">from</span>));</span><br><span class=\"line\">&#125;;</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">function</span> <span class=\"title function_\">fn</span>(<span class=\"params\">arr</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> arr2 = <span class=\"title function_\">__spreadArray</span>([<span class=\"number\">1</span>], <span class=\"title function_\">__read</span>(arr), <span class=\"literal\">false</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>如果同时开启了<code>downlevelIteration</code>和<code>importHelpers</code>，并且安装了<code>tslib</code>包，那么代码会编译成类似这样：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><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\">import</span> &#123; __read, __spreadArray &#125; <span class=\"keyword\">from</span> <span class=\"string\">&quot;tslib&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">function</span> <span class=\"title function_\">fn</span>(<span class=\"params\">arr</span>) &#123;</span><br><span class=\"line\">    <span class=\"keyword\">var</span> arr2 = <span class=\"title function_\">__spreadArray</span>([<span class=\"number\">1</span>], <span class=\"title function_\">__read</span>(arr), <span class=\"literal\">false</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"noEmitHelpers\"><a href=\"#noEmitHelpers\" class=\"headerlink\" title=\"noEmitHelpers\"></a>noEmitHelpers</h2><p>typescript处理迭代器、异步等的降级策略是生成一堆降级代码，也可以使用”importHelpers”和”tslib”来提取公共代码。但通过这个配置，可以自定义降级代码了。具体参照文档。</p>\n<h2 id=\"preserveConstEnums\"><a href=\"#preserveConstEnums\" class=\"headerlink\" title=\"preserveConstEnums\"></a>preserveConstEnums</h2><p>是否在编辑结果中移除<code>const enum</code>的定义。因为javascript没有enum概念，typescript会将enum的引用编译成具体的值。如：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><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=\"keyword\">enum</span> <span class=\"title class_\">Album</span> &#123;</span><br><span class=\"line\">  <span class=\"title class_\">JimmyEatWorldFutures</span> = <span class=\"number\">1</span>,</span><br><span class=\"line\">  <span class=\"title class_\">TubRingZooHypothesis</span> = <span class=\"number\">2</span>,</span><br><span class=\"line\">  <span class=\"title class_\">DogFashionDiscoAdultery</span> = <span class=\"number\">3</span>,</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"> </span><br><span class=\"line\"><span class=\"keyword\">const</span> selectedAlbum = <span class=\"title class_\">Album</span>.<span class=\"property\">JimmyEatWorldFutures</span>;</span><br><span class=\"line\"><span class=\"keyword\">if</span> (selectedAlbum === <span class=\"title class_\">Album</span>.<span class=\"property\">JimmyEatWorldFutures</span>) &#123;</span><br><span class=\"line\">  <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;That is a great choice.&quot;</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>编译结果如下：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&quot;use strict&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">const</span> selectedAlbum = <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>;</span><br><span class=\"line\"><span class=\"keyword\">if</span> (selectedAlbum === <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>) &#123;</span><br><span class=\"line\">    <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;That is a great choice.&quot;</span>);</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<p>如果开启此项，则编译结果中会描述出该enum的结构。如下：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">&quot;use strict&quot;</span>;</span><br><span class=\"line\"><span class=\"keyword\">var</span> <span class=\"title class_\">Album</span>;</span><br><span class=\"line\">(<span class=\"keyword\">function</span> (<span class=\"params\">Album</span>) &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Album</span>[<span class=\"title class_\">Album</span>[<span class=\"string\">&quot;JimmyEatWorldFutures&quot;</span>] = <span class=\"number\">1</span>] = <span class=\"string\">&quot;JimmyEatWorldFutures&quot;</span>;</span><br><span class=\"line\">    <span class=\"title class_\">Album</span>[<span class=\"title class_\">Album</span>[<span class=\"string\">&quot;TubRingZooHypothesis&quot;</span>] = <span class=\"number\">2</span>] = <span class=\"string\">&quot;TubRingZooHypothesis&quot;</span>;</span><br><span class=\"line\">    <span class=\"title class_\">Album</span>[<span class=\"title class_\">Album</span>[<span class=\"string\">&quot;DogFashionDiscoAdultery&quot;</span>] = <span class=\"number\">3</span>] = <span class=\"string\">&quot;DogFashionDiscoAdultery&quot;</span>;</span><br><span class=\"line\">&#125;)(<span class=\"title class_\">Album</span> || (<span class=\"title class_\">Album</span> = &#123;&#125;));</span><br><span class=\"line\"><span class=\"keyword\">const</span> selectedAlbum = <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>;</span><br><span class=\"line\"><span class=\"keyword\">if</span> (selectedAlbum === <span class=\"number\">1</span> <span class=\"comment\">/* Album.JimmyEatWorldFutures */</span>) &#123;</span><br><span class=\"line\">    <span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&quot;That is a great choice.&quot;</span>);</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"preserveValueImports\"><a href=\"#preserveValueImports\" class=\"headerlink\" title=\"preserveValueImports\"></a>preserveValueImports</h2><p>通常，打包器会将未使用的”import”移除掉，但开启了该特性后，会在编译中保留未使用的”import”。例如：</p>\n<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\">import</span> &#123; <span class=\"title class_\">Animal</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&quot;./animal.js&quot;</span>;</span><br><span class=\"line\"><span class=\"built_in\">eval</span>(<span class=\"string\">&quot;console.log(new Animal().isDangerous())&quot;</span>);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"removeComments\"><a href=\"#removeComments\" class=\"headerlink\" title=\"removeComments\"></a>removeComments</h2><p>移除代码中的注释。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-JavaScript-Support\"><a href=\"#compilerOptions-JavaScript-Support\" class=\"headerlink\" title=\"compilerOptions - JavaScript Support\"></a>compilerOptions - JavaScript Support</h1><p>对javascript文件的支持</p>\n<h2 id=\"allowJs\"><a href=\"#allowJs\" class=\"headerlink\" title=\"allowJs\"></a>allowJs</h2><p>允许<code>.ts</code>文件引用<code>.js</code>文件，这常用在javascript项目升级为typescript的过程中。</p>\n<h2 id=\"checkJs\"><a href=\"#checkJs\" class=\"headerlink\" title=\"checkJs\"></a>checkJs</h2><p>是否开启对<code>.js</code>文件的错误检查。</p>\n<h2 id=\"maxNodeModuleJsDepth\"><a href=\"#maxNodeModuleJsDepth\" class=\"headerlink\" title=\"maxNodeModuleJsDepth\"></a>maxNodeModuleJsDepth</h2><p>为<code>.js</code>文件寻找类型定义文件时，允许的最大依赖深度。</p>\n<p>正常情况下，我们会在<code>.js</code>文件的同级补写<code>.d.ts</code>文件，tsc会很快找到类型定义。但有时候确实要扩大搜索范围去找部分<code>.js</code>文件的类型定义文件。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Interop-Constraints\"><a href=\"#compilerOptions-Interop-Constraints\" class=\"headerlink\" title=\"compilerOptions - Interop Constraints\"></a>compilerOptions - Interop Constraints</h1><p>(模块)互相操作的约束</p>\n<h2 id=\"allowSyntheticDefaultImports\"><a href=\"#allowSyntheticDefaultImports\" class=\"headerlink\" title=\"allowSyntheticDefaultImports\"></a>allowSyntheticDefaultImports</h2><p>允许合成<code>default</code>。</p>\n<p>如果一个模块A没有<code>export default</code>，那么另一个模块B在<code>import defaultA from &#39;./a&#39;</code>的时候，会抛出错误说A中没有default。</p>\n<p>有一个做法是<code>import * as defaultA from &#39;./a&#39;</code>曲线救国，但开启这个配置项后，可以直接使用<code>import defaultA from &#39;./a&#39;</code>这样的语法了。</p>\n<h2 id=\"esModuleInterop\"><a href=\"#esModuleInterop\" class=\"headerlink\" title=\"esModuleInterop\"></a>esModuleInterop</h2><p>esm在使用<code>import default from &#39;xxx&#39;</code>方式导入cjs的时候会抛出一个错误，因为cjs模块中没有default。开启此选项后，typescript会使用一些helpers去兼容cjs的default问题。</p>\n<h2 id=\"forceConsistentCasingInFileNames\"><a href=\"#forceConsistentCasingInFileNames\" class=\"headerlink\" title=\"forceConsistentCasingInFileNames\"></a>forceConsistentCasingInFileNames</h2><p>强制引用的模块文件名，和磁盘中的文件名保持一致的大小写。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Language-and-Environment\"><a href=\"#compilerOptions-Language-and-Environment\" class=\"headerlink\" title=\"compilerOptions - Language and Environment\"></a>compilerOptions - Language and Environment</h1><p>和语言、环境有关的配置项。</p>\n<h2 id=\"jsx\"><a href=\"#jsx\" class=\"headerlink\" title=\"jsx\"></a>jsx</h2><p>如何解析<code>.tsx</code>文件中jsx语法？在2023年，react17+后，用<code>react-jsx</code>就行了。</p>\n<h2 id=\"lib\"><a href=\"#lib\" class=\"headerlink\" title=\"lib\"></a>lib</h2><p>在项目中使用的api类型定义集合。</p>\n<p>ts是需要知道你用的每一个javascript方法、属性的定义的，所以它内置了一批定义（比如Math.abs方法）。但是呢，后面新增方法的定义，需要你手工指定包含，ts才能理解了，比如Array.include方法，你就要包含ES2016。但好在你不需要记住这些，因为当你指定<code>target</code>字段时，lib会被默认设置成对应的值的。</p>\n<p>另外，大部分情况下，我们要访问一些和特定环境有关的特性，比如浏览器里的Dom特性，那么这儿额外引入<code>DOM</code>定义就行了。</p>\n<h2 id=\"target\"><a href=\"#target\" class=\"headerlink\" title=\"target\"></a>target</h2><p>项目编译的目标javascript版本。</p>\n<p>也就是你的目标客户端支持的最低javascript版本。注意它会影响默认的<code>lib</code>配置项。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Compiler-Diagnostics\"><a href=\"#compilerOptions-Compiler-Diagnostics\" class=\"headerlink\" title=\"compilerOptions - Compiler Diagnostics\"></a>compilerOptions - Compiler Diagnostics</h1><p>编译诊断配置项。</p>\n<h2 id=\"diagnostics-x2F-extendedDiagnostics\"><a href=\"#diagnostics-x2F-extendedDiagnostics\" class=\"headerlink\" title=\"diagnostics &#x2F; extendedDiagnostics\"></a>diagnostics &#x2F; extendedDiagnostics</h2><p>打印出编译的信息，比如多少文件、编译时间等。</p>\n<p>extendedDiagnostics包含了diagnostics给出的所有信息，所以用extendedDiagnostics就行了。这是一个开启extendedDiagnostics的编译信息：</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><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\">Files:                         143</span><br><span class=\"line\">Lines of Library:            38663</span><br><span class=\"line\">Lines of Definitions:        82578</span><br><span class=\"line\">Symbols:                     73362</span><br><span class=\"line\">Types:                        1495</span><br><span class=\"line\">Parse time:                  0.50s</span><br><span class=\"line\">ResolveModule time:          0.03s</span><br><span class=\"line\">Total time:                  1.01s</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"explainFiles\"><a href=\"#explainFiles\" class=\"headerlink\" title=\"explainFiles\"></a>explainFiles</h2><p>打印出文件被编译的原因，也就是它们的引用链。</p>\n<h2 id=\"listEmittedFiles-x2F-listFiles\"><a href=\"#listEmittedFiles-x2F-listFiles\" class=\"headerlink\" title=\"listEmittedFiles &#x2F; listFiles\"></a>listEmittedFiles &#x2F; listFiles</h2><p>列出参与编译的文件。</p>\n<h2 id=\"traceResolution\"><a href=\"#traceResolution\" class=\"headerlink\" title=\"traceResolution\"></a>traceResolution</h2><p>打印每一个文件的编译流程。</p>\n<!--hexo-->\n\n<h1 id=\"compilerOptions-Completeness\"><a href=\"#compilerOptions-Completeness\" class=\"headerlink\" title=\"compilerOptions - Completeness\"></a>compilerOptions - Completeness</h1><p>完整性检测的配置项</p>\n<h2 id=\"skipLibCheck\"><a href=\"#skipLibCheck\" class=\"headerlink\" title=\"skipLibCheck\"></a>skipLibCheck</h2><p>跳过lib库的类型检测。</p>\n"},{"title":"TypeScript的小手段，最后更新2023/12月...","date":"2023-08-02T17:52:04.000Z","url":"typescript-means","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/22](https://github.com/taoliujun/blog/issues/22)\n\n<!--hexo\n---\nurl: typescript-means\ntags:\n  - typescript\n---\n-->\n\nTypeScript有一些小手段，评论区见。\n\n\n- [as断言的另外写法](#issuecomment-1663199481)\n- [as const](#issuecomment-1663206615)\n- [非null | undefined声明](#issuecomment-1663206898)\n- [const enum](#issuecomment-1838108783)\n- [@ts-expect-error](#issuecomment-1841954904)\n- [解构变量可标记为“不使用”](#issuecomment-1842016788)\n\n<!--hexo-->\n\n# as断言的另外写法\n\n```typescript\nconst myCanvas = <HTMLCanvasElement>document.getElementById(\"main_canvas\");\n```\n\n将断言类型写在前面的括号里，等同于：\n\n```typescript\nconst myCanvas = document.getElementById(\"main_canvas\") as HTMLCanvasElement;\n```\n\n但是不能再`.tsx`中使用。\n<!--hexo-->\n\n# as const\n\n```typescript\nfunction test1(name: 'html' | 'css') {\n    console.log(name);\n}\n\nconst obj1 = { name: 'html' };\ntest1(obj1.name);\n```\n\n上面的例子有一个类型错误：`Argument of type 'string' is not assignable to parameter of type '\"html\" | \"css\"'.`，这是因为，ts对可读写的变量，推断出的类型是非字面类型。\n\n改下代码：\n\n```typescript\nconst obj1 = { name: 'html' } as const;\n```\n\n`as const`是断言成该变量的字面类型，关于`const`的字面类型断言解释如下。\n\n```typescript\nlet a = '1';\nconst b = '2';\n```\n\nts对`a`的推断是`string`，对`b`的推断是`'2'`。在ts的类型推断的设计中，它总是尽可能的推断出更广的类型，但是对于`readOnly variable`，因为不可变，它的更广的类型就是字面类型。\n\n得益于 https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481 ，还可以写成`let a = <const>'1';` \n<!--hexo-->\n\n# 非null | undefined声明\n\n有时候虽然声明一个变量类型是`null`，但在某个逻辑中它不可能是`null`，可以使用`!`来表示它不是`null`。\n\n```typescript\nconst d1 = document.getElementById('test1');\n// 'd1' is possibly 'null'\nconsole.log(d1.getBoundingClientRect());\n// it is fine\nconsole.log(d1!.getBoundingClientRect());\n```\n<!--hexo-->\n\n# const enum\n\nts会将`enum`完整的编译出来，如下分别是ts源码和编译后的代码：\n\n```ts\n// 源码\nenum Sex {\n    Man,\n    Woman,\n}\nconst sex = Sex.Man;\n```\n\n```javascript\n// 编译结果\nvar Sex;\n(function (Sex) {\n    Sex[Sex[\"Man\"] = 0] = \"Man\";\n    Sex[Sex[\"Woman\"] = 1] = \"Woman\";\n})(Sex || (Sex = {}));\nconst sex = Sex.Man;\n```\n\n而很多时候，我们只是将`enum`当安全值来用，编译后只保留安全值就行了。加上`const`就可以：\n\n```typescript\n// 源码\nconst enum Sex {\n    Man,\n    Woman,\n}\nconst sex = Sex.Man;\n```\n\n```javascript\n// 编译结果\nconst sex = 0;\n```\n<!--hexo-->\n\n# @ts-expect-error\n\n在一些场景下，我们需要故意传一个错误类型的变量，比如在写单元测试的时候。如下：\n\n```ts\n// util.ts\nfunction test1(p1: number) {\n  // do\n}\n\n// __test__\ntest1('hello');\n```\n\n在如上的单元测试代码中，ts会反馈`'hello'`不是一个number，但这个类型错误正是我们期望的。那么就增加一个标记来处理它：\n\n```ts\n// __test__\n\n// @ts-expect-error\ntest1('hello');\n```\n\n并且，如果这行语句没有类型错误的话，该注释本身会被认为是一个错误，以及时提醒开发者。\n\n```ts\n// Unused '@ts-expect-error' directive.ts(2578)\n// @ts-expect-error\ntest1(123);\n```\n\n它和`ts-ignore`的区别在这：https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error\n<!--hexo-->\n\n# 解构变量可标记为“不使用”\n\n如下语句，ts会告诉你`first`未使用。\n\n```ts\n// 'first' is declared but its value is never read.ts(6133)\nconst [first, second] = [1, 2];\nconsole.log('==', second);\n```\n\n但在场景里，就不需要使用第一个变量，ts提供了一个写法标记来忽略检查未使用的解构变量，就是在变量前加`_`。\n\n```ts\nconst [_first, second] = [1, 2];\nconsole.log('==', second);\n```\n\n**补充：** 以上是ts4.2的特性，在更新的版本里，只要这样写就行了：`const [, second] = [1, 2]`。\n\n\n","source":"_posts/typescript-means.md","raw":"---\ntitle: \"TypeScript的小手段，最后更新2023/12月...\"\ndate: \"2023-08-03T01:52:04Z\"\ncategories:\n  - [TypeScript]\n\nurl: typescript-means\ntags:\n  - typescript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/22](https://github.com/taoliujun/blog/issues/22)\n\n<!--hexo\n---\nurl: typescript-means\ntags:\n  - typescript\n---\n-->\n\nTypeScript有一些小手段，评论区见。\n\n\n- [as断言的另外写法](#issuecomment-1663199481)\n- [as const](#issuecomment-1663206615)\n- [非null | undefined声明](#issuecomment-1663206898)\n- [const enum](#issuecomment-1838108783)\n- [@ts-expect-error](#issuecomment-1841954904)\n- [解构变量可标记为“不使用”](#issuecomment-1842016788)\n\n<!--hexo-->\n\n# as断言的另外写法\n\n```typescript\nconst myCanvas = <HTMLCanvasElement>document.getElementById(\"main_canvas\");\n```\n\n将断言类型写在前面的括号里，等同于：\n\n```typescript\nconst myCanvas = document.getElementById(\"main_canvas\") as HTMLCanvasElement;\n```\n\n但是不能再`.tsx`中使用。\n<!--hexo-->\n\n# as const\n\n```typescript\nfunction test1(name: 'html' | 'css') {\n    console.log(name);\n}\n\nconst obj1 = { name: 'html' };\ntest1(obj1.name);\n```\n\n上面的例子有一个类型错误：`Argument of type 'string' is not assignable to parameter of type '\"html\" | \"css\"'.`，这是因为，ts对可读写的变量，推断出的类型是非字面类型。\n\n改下代码：\n\n```typescript\nconst obj1 = { name: 'html' } as const;\n```\n\n`as const`是断言成该变量的字面类型，关于`const`的字面类型断言解释如下。\n\n```typescript\nlet a = '1';\nconst b = '2';\n```\n\nts对`a`的推断是`string`，对`b`的推断是`'2'`。在ts的类型推断的设计中，它总是尽可能的推断出更广的类型，但是对于`readOnly variable`，因为不可变，它的更广的类型就是字面类型。\n\n得益于 https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481 ，还可以写成`let a = <const>'1';` \n<!--hexo-->\n\n# 非null | undefined声明\n\n有时候虽然声明一个变量类型是`null`，但在某个逻辑中它不可能是`null`，可以使用`!`来表示它不是`null`。\n\n```typescript\nconst d1 = document.getElementById('test1');\n// 'd1' is possibly 'null'\nconsole.log(d1.getBoundingClientRect());\n// it is fine\nconsole.log(d1!.getBoundingClientRect());\n```\n<!--hexo-->\n\n# const enum\n\nts会将`enum`完整的编译出来，如下分别是ts源码和编译后的代码：\n\n```ts\n// 源码\nenum Sex {\n    Man,\n    Woman,\n}\nconst sex = Sex.Man;\n```\n\n```javascript\n// 编译结果\nvar Sex;\n(function (Sex) {\n    Sex[Sex[\"Man\"] = 0] = \"Man\";\n    Sex[Sex[\"Woman\"] = 1] = \"Woman\";\n})(Sex || (Sex = {}));\nconst sex = Sex.Man;\n```\n\n而很多时候，我们只是将`enum`当安全值来用，编译后只保留安全值就行了。加上`const`就可以：\n\n```typescript\n// 源码\nconst enum Sex {\n    Man,\n    Woman,\n}\nconst sex = Sex.Man;\n```\n\n```javascript\n// 编译结果\nconst sex = 0;\n```\n<!--hexo-->\n\n# @ts-expect-error\n\n在一些场景下，我们需要故意传一个错误类型的变量，比如在写单元测试的时候。如下：\n\n```ts\n// util.ts\nfunction test1(p1: number) {\n  // do\n}\n\n// __test__\ntest1('hello');\n```\n\n在如上的单元测试代码中，ts会反馈`'hello'`不是一个number，但这个类型错误正是我们期望的。那么就增加一个标记来处理它：\n\n```ts\n// __test__\n\n// @ts-expect-error\ntest1('hello');\n```\n\n并且，如果这行语句没有类型错误的话，该注释本身会被认为是一个错误，以及时提醒开发者。\n\n```ts\n// Unused '@ts-expect-error' directive.ts(2578)\n// @ts-expect-error\ntest1(123);\n```\n\n它和`ts-ignore`的区别在这：https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error\n<!--hexo-->\n\n# 解构变量可标记为“不使用”\n\n如下语句，ts会告诉你`first`未使用。\n\n```ts\n// 'first' is declared but its value is never read.ts(6133)\nconst [first, second] = [1, 2];\nconsole.log('==', second);\n```\n\n但在场景里，就不需要使用第一个变量，ts提供了一个写法标记来忽略检查未使用的解构变量，就是在变量前加`_`。\n\n```ts\nconst [_first, second] = [1, 2];\nconsole.log('==', second);\n```\n\n**补充：** 以上是ts4.2的特性，在更新的版本里，只要这样写就行了：`const [, second] = [1, 2]`。\n\n\n","slug":"typescript-means","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne78001ui8ohbxt1guu9","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/22\">https://github.com/taoliujun/blog/issues/22</a></p>\n<!--hexo\n---\nurl: typescript-means\ntags:\n  - typescript\n---\n-->\n\n<p>TypeScript有一些小手段，评论区见。</p>\n<ul>\n<li><a href=\"#issuecomment-1663199481\">as断言的另外写法</a></li>\n<li><a href=\"#issuecomment-1663206615\">as const</a></li>\n<li><a href=\"#issuecomment-1663206898\">非null | undefined声明</a></li>\n<li><a href=\"#issuecomment-1838108783\">const enum</a></li>\n<li><a href=\"#issuecomment-1841954904\">@ts-expect-error</a></li>\n<li><a href=\"#issuecomment-1842016788\">解构变量可标记为“不使用”</a></li>\n</ul>\n<!--hexo-->\n\n<h1 id=\"as断言的另外写法\"><a href=\"#as断言的另外写法\" class=\"headerlink\" title=\"as断言的另外写法\"></a>as断言的另外写法</h1><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\">const</span> myCanvas = &lt;<span class=\"title class_\">HTMLCanvasElement</span>&gt;<span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementById</span>(<span class=\"string\">&quot;main_canvas&quot;</span>);</span><br></pre></td></tr></table></figure>\n\n<p>将断言类型写在前面的括号里，等同于：</p>\n<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\">const</span> myCanvas = <span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementById</span>(<span class=\"string\">&quot;main_canvas&quot;</span>) <span class=\"keyword\">as</span> <span class=\"title class_\">HTMLCanvasElement</span>;</span><br></pre></td></tr></table></figure>\n\n<p>但是不能再<code>.tsx</code>中使用。</p>\n<!--hexo-->\n\n<h1 id=\"as-const\"><a href=\"#as-const\" class=\"headerlink\" title=\"as const\"></a>as const</h1><figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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_\">test1</span>(<span class=\"params\">name: <span class=\"string\">&#x27;html&#x27;</span> | <span class=\"string\">&#x27;css&#x27;</span></span>) &#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><br><span class=\"line\"><span class=\"keyword\">const</span> obj1 = &#123; <span class=\"attr\">name</span>: <span class=\"string\">&#x27;html&#x27;</span> &#125;;</span><br><span class=\"line\"><span class=\"title function_\">test1</span>(obj1.<span class=\"property\">name</span>);</span><br></pre></td></tr></table></figure>\n\n<p>上面的例子有一个类型错误：<code>Argument of type &#39;string&#39; is not assignable to parameter of type &#39;&quot;html&quot; | &quot;css&quot;&#39;.</code>，这是因为，ts对可读写的变量，推断出的类型是非字面类型。</p>\n<p>改下代码：</p>\n<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\">const</span> obj1 = &#123; <span class=\"attr\">name</span>: <span class=\"string\">&#x27;html&#x27;</span> &#125; <span class=\"keyword\">as</span> <span class=\"keyword\">const</span>;</span><br></pre></td></tr></table></figure>\n\n<p><code>as const</code>是断言成该变量的字面类型，关于<code>const</code>的字面类型断言解释如下。</p>\n<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> a = <span class=\"string\">&#x27;1&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">const</span> b = <span class=\"string\">&#x27;2&#x27;</span>;</span><br></pre></td></tr></table></figure>\n\n<p>ts对<code>a</code>的推断是<code>string</code>，对<code>b</code>的推断是<code>&#39;2&#39;</code>。在ts的类型推断的设计中，它总是尽可能的推断出更广的类型，但是对于<code>readOnly variable</code>，因为不可变，它的更广的类型就是字面类型。</p>\n<p>得益于 <a href=\"https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481\">https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481</a> ，还可以写成<code>let a = &lt;const&gt;&#39;1&#39;;</code> </p>\n<!--hexo-->\n\n<h1 id=\"非null-undefined声明\"><a href=\"#非null-undefined声明\" class=\"headerlink\" title=\"非null | undefined声明\"></a>非null | undefined声明</h1><p>有时候虽然声明一个变量类型是<code>null</code>，但在某个逻辑中它不可能是<code>null</code>，可以使用<code>!</code>来表示它不是<code>null</code>。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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> d1 = <span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementById</span>(<span class=\"string\">&#x27;test1&#x27;</span>);</span><br><span class=\"line\"><span class=\"comment\">// &#x27;d1&#x27; is possibly &#x27;null&#x27;</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(d1.<span class=\"title function_\">getBoundingClientRect</span>());</span><br><span class=\"line\"><span class=\"comment\">// it is fine</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(d1!.<span class=\"title function_\">getBoundingClientRect</span>());</span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"const-enum\"><a href=\"#const-enum\" class=\"headerlink\" title=\"const enum\"></a>const enum</h1><p>ts会将<code>enum</code>完整的编译出来，如下分别是ts源码和编译后的代码：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\">enum</span> <span class=\"title class_\">Sex</span> &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Man</span>,</span><br><span class=\"line\">    <span class=\"title class_\">Woman</span>,</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> sex = <span class=\"title class_\">Sex</span>.<span class=\"property\">Man</span>;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 编译结果</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> <span class=\"title class_\">Sex</span>;</span><br><span class=\"line\">(<span class=\"keyword\">function</span> (<span class=\"params\">Sex</span>) &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Sex</span>[<span class=\"title class_\">Sex</span>[<span class=\"string\">&quot;Man&quot;</span>] = <span class=\"number\">0</span>] = <span class=\"string\">&quot;Man&quot;</span>;</span><br><span class=\"line\">    <span class=\"title class_\">Sex</span>[<span class=\"title class_\">Sex</span>[<span class=\"string\">&quot;Woman&quot;</span>] = <span class=\"number\">1</span>] = <span class=\"string\">&quot;Woman&quot;</span>;</span><br><span class=\"line\">&#125;)(<span class=\"title class_\">Sex</span> || (<span class=\"title class_\">Sex</span> = &#123;&#125;));</span><br><span class=\"line\"><span class=\"keyword\">const</span> sex = <span class=\"title class_\">Sex</span>.<span class=\"property\">Man</span>;</span><br></pre></td></tr></table></figure>\n\n<p>而很多时候，我们只是将<code>enum</code>当安全值来用，编译后只保留安全值就行了。加上<code>const</code>就可以：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\">const</span> <span class=\"keyword\">enum</span> <span class=\"title class_\">Sex</span> &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Man</span>,</span><br><span class=\"line\">    <span class=\"title class_\">Woman</span>,</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> sex = <span class=\"title class_\">Sex</span>.<span class=\"property\">Man</span>;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight javascript\"><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\"><span class=\"keyword\">const</span> sex = <span class=\"number\">0</span>;</span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"ts-expect-error\"><a href=\"#ts-expect-error\" class=\"headerlink\" title=\"@ts-expect-error\"></a>@ts-expect-error</h1><p>在一些场景下，我们需要故意传一个错误类型的变量，比如在写单元测试的时候。如下：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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\">// util.ts</span></span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">test1</span>(<span class=\"params\">p1: <span class=\"built_in\">number</span></span>) &#123;</span><br><span class=\"line\">  <span class=\"comment\">// do</span></span><br><span class=\"line\">&#125;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// __test__</span></span><br><span class=\"line\"><span class=\"title function_\">test1</span>(<span class=\"string\">&#x27;hello&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<p>在如上的单元测试代码中，ts会反馈<code>&#39;hello&#39;</code>不是一个number，但这个类型错误正是我们期望的。那么就增加一个标记来处理它：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><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\">// __test__</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// @ts-expect-error</span></span><br><span class=\"line\"><span class=\"title function_\">test1</span>(<span class=\"string\">&#x27;hello&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<p>并且，如果这行语句没有类型错误的话，该注释本身会被认为是一个错误，以及时提醒开发者。</p>\n<figure class=\"highlight ts\"><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\">// Unused &#x27;@ts-expect-error&#x27; directive.ts(2578)</span></span><br><span class=\"line\"><span class=\"comment\">// @ts-expect-error</span></span><br><span class=\"line\"><span class=\"title function_\">test1</span>(<span class=\"number\">123</span>);</span><br></pre></td></tr></table></figure>\n\n<p>它和<code>ts-ignore</code>的区别在这：<a href=\"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error\">https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error</a></p>\n<!--hexo-->\n\n<h1 id=\"解构变量可标记为“不使用”\"><a href=\"#解构变量可标记为“不使用”\" class=\"headerlink\" title=\"解构变量可标记为“不使用”\"></a>解构变量可标记为“不使用”</h1><p>如下语句，ts会告诉你<code>first</code>未使用。</p>\n<figure class=\"highlight ts\"><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\">// &#x27;first&#x27; is declared but its value is never read.ts(6133)</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> [first, second] = [<span class=\"number\">1</span>, <span class=\"number\">2</span>];</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&#x27;==&#x27;</span>, second);</span><br></pre></td></tr></table></figure>\n\n<p>但在场景里，就不需要使用第一个变量，ts提供了一个写法标记来忽略检查未使用的解构变量，就是在变量前加<code>_</code>。</p>\n<figure class=\"highlight ts\"><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> [_first, second] = [<span class=\"number\">1</span>, <span class=\"number\">2</span>];</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&#x27;==&#x27;</span>, second);</span><br></pre></td></tr></table></figure>\n\n<p><strong>补充：</strong> 以上是ts4.2的特性，在更新的版本里，只要这样写就行了：<code>const [, second] = [1, 2]</code>。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/22\">https://github.com/taoliujun/blog/issues/22</a></p>\n<!--hexo\n---\nurl: typescript-means\ntags:\n  - typescript\n---\n-->\n\n<p>TypeScript有一些小手段，评论区见。</p>\n<ul>\n<li><a href=\"#issuecomment-1663199481\">as断言的另外写法</a></li>\n<li><a href=\"#issuecomment-1663206615\">as const</a></li>\n<li><a href=\"#issuecomment-1663206898\">非null | undefined声明</a></li>\n<li><a href=\"#issuecomment-1838108783\">const enum</a></li>\n<li><a href=\"#issuecomment-1841954904\">@ts-expect-error</a></li>\n<li><a href=\"#issuecomment-1842016788\">解构变量可标记为“不使用”</a></li>\n</ul>\n<!--hexo-->\n\n<h1 id=\"as断言的另外写法\"><a href=\"#as断言的另外写法\" class=\"headerlink\" title=\"as断言的另外写法\"></a>as断言的另外写法</h1><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\">const</span> myCanvas = &lt;<span class=\"title class_\">HTMLCanvasElement</span>&gt;<span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementById</span>(<span class=\"string\">&quot;main_canvas&quot;</span>);</span><br></pre></td></tr></table></figure>\n\n<p>将断言类型写在前面的括号里，等同于：</p>\n<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\">const</span> myCanvas = <span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementById</span>(<span class=\"string\">&quot;main_canvas&quot;</span>) <span class=\"keyword\">as</span> <span class=\"title class_\">HTMLCanvasElement</span>;</span><br></pre></td></tr></table></figure>\n\n<p>但是不能再<code>.tsx</code>中使用。</p>\n<!--hexo-->\n\n<h1 id=\"as-const\"><a href=\"#as-const\" class=\"headerlink\" title=\"as const\"></a>as const</h1><figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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_\">test1</span>(<span class=\"params\">name: <span class=\"string\">&#x27;html&#x27;</span> | <span class=\"string\">&#x27;css&#x27;</span></span>) &#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><br><span class=\"line\"><span class=\"keyword\">const</span> obj1 = &#123; <span class=\"attr\">name</span>: <span class=\"string\">&#x27;html&#x27;</span> &#125;;</span><br><span class=\"line\"><span class=\"title function_\">test1</span>(obj1.<span class=\"property\">name</span>);</span><br></pre></td></tr></table></figure>\n\n<p>上面的例子有一个类型错误：<code>Argument of type &#39;string&#39; is not assignable to parameter of type &#39;&quot;html&quot; | &quot;css&quot;&#39;.</code>，这是因为，ts对可读写的变量，推断出的类型是非字面类型。</p>\n<p>改下代码：</p>\n<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\">const</span> obj1 = &#123; <span class=\"attr\">name</span>: <span class=\"string\">&#x27;html&#x27;</span> &#125; <span class=\"keyword\">as</span> <span class=\"keyword\">const</span>;</span><br></pre></td></tr></table></figure>\n\n<p><code>as const</code>是断言成该变量的字面类型，关于<code>const</code>的字面类型断言解释如下。</p>\n<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> a = <span class=\"string\">&#x27;1&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">const</span> b = <span class=\"string\">&#x27;2&#x27;</span>;</span><br></pre></td></tr></table></figure>\n\n<p>ts对<code>a</code>的推断是<code>string</code>，对<code>b</code>的推断是<code>&#39;2&#39;</code>。在ts的类型推断的设计中，它总是尽可能的推断出更广的类型，但是对于<code>readOnly variable</code>，因为不可变，它的更广的类型就是字面类型。</p>\n<p>得益于 <a href=\"https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481\">https://github.com/taoliujun/blog/issues/22#issuecomment-1663199481</a> ，还可以写成<code>let a = &lt;const&gt;&#39;1&#39;;</code> </p>\n<!--hexo-->\n\n<h1 id=\"非null-undefined声明\"><a href=\"#非null-undefined声明\" class=\"headerlink\" title=\"非null | undefined声明\"></a>非null | undefined声明</h1><p>有时候虽然声明一个变量类型是<code>null</code>，但在某个逻辑中它不可能是<code>null</code>，可以使用<code>!</code>来表示它不是<code>null</code>。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><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> d1 = <span class=\"variable language_\">document</span>.<span class=\"title function_\">getElementById</span>(<span class=\"string\">&#x27;test1&#x27;</span>);</span><br><span class=\"line\"><span class=\"comment\">// &#x27;d1&#x27; is possibly &#x27;null&#x27;</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(d1.<span class=\"title function_\">getBoundingClientRect</span>());</span><br><span class=\"line\"><span class=\"comment\">// it is fine</span></span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(d1!.<span class=\"title function_\">getBoundingClientRect</span>());</span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"const-enum\"><a href=\"#const-enum\" class=\"headerlink\" title=\"const enum\"></a>const enum</h1><p>ts会将<code>enum</code>完整的编译出来，如下分别是ts源码和编译后的代码：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\">enum</span> <span class=\"title class_\">Sex</span> &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Man</span>,</span><br><span class=\"line\">    <span class=\"title class_\">Woman</span>,</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> sex = <span class=\"title class_\">Sex</span>.<span class=\"property\">Man</span>;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 编译结果</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> <span class=\"title class_\">Sex</span>;</span><br><span class=\"line\">(<span class=\"keyword\">function</span> (<span class=\"params\">Sex</span>) &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Sex</span>[<span class=\"title class_\">Sex</span>[<span class=\"string\">&quot;Man&quot;</span>] = <span class=\"number\">0</span>] = <span class=\"string\">&quot;Man&quot;</span>;</span><br><span class=\"line\">    <span class=\"title class_\">Sex</span>[<span class=\"title class_\">Sex</span>[<span class=\"string\">&quot;Woman&quot;</span>] = <span class=\"number\">1</span>] = <span class=\"string\">&quot;Woman&quot;</span>;</span><br><span class=\"line\">&#125;)(<span class=\"title class_\">Sex</span> || (<span class=\"title class_\">Sex</span> = &#123;&#125;));</span><br><span class=\"line\"><span class=\"keyword\">const</span> sex = <span class=\"title class_\">Sex</span>.<span class=\"property\">Man</span>;</span><br></pre></td></tr></table></figure>\n\n<p>而很多时候，我们只是将<code>enum</code>当安全值来用，编译后只保留安全值就行了。加上<code>const</code>就可以：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><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\">const</span> <span class=\"keyword\">enum</span> <span class=\"title class_\">Sex</span> &#123;</span><br><span class=\"line\">    <span class=\"title class_\">Man</span>,</span><br><span class=\"line\">    <span class=\"title class_\">Woman</span>,</span><br><span class=\"line\">&#125;</span><br><span class=\"line\"><span class=\"keyword\">const</span> sex = <span class=\"title class_\">Sex</span>.<span class=\"property\">Man</span>;</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight javascript\"><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\"><span class=\"keyword\">const</span> sex = <span class=\"number\">0</span>;</span><br></pre></td></tr></table></figure>\n<!--hexo-->\n\n<h1 id=\"ts-expect-error\"><a href=\"#ts-expect-error\" class=\"headerlink\" title=\"@ts-expect-error\"></a>@ts-expect-error</h1><p>在一些场景下，我们需要故意传一个错误类型的变量，比如在写单元测试的时候。如下：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><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\">// util.ts</span></span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">test1</span>(<span class=\"params\">p1: <span class=\"built_in\">number</span></span>) &#123;</span><br><span class=\"line\">  <span class=\"comment\">// do</span></span><br><span class=\"line\">&#125;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// __test__</span></span><br><span class=\"line\"><span class=\"title function_\">test1</span>(<span class=\"string\">&#x27;hello&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<p>在如上的单元测试代码中，ts会反馈<code>&#39;hello&#39;</code>不是一个number，但这个类型错误正是我们期望的。那么就增加一个标记来处理它：</p>\n<figure class=\"highlight ts\"><table><tr><td class=\"gutter\"><pre><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\">// __test__</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// @ts-expect-error</span></span><br><span class=\"line\"><span class=\"title function_\">test1</span>(<span class=\"string\">&#x27;hello&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<p>并且，如果这行语句没有类型错误的话，该注释本身会被认为是一个错误，以及时提醒开发者。</p>\n<figure class=\"highlight ts\"><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\">// Unused &#x27;@ts-expect-error&#x27; directive.ts(2578)</span></span><br><span class=\"line\"><span class=\"comment\">// @ts-expect-error</span></span><br><span class=\"line\"><span class=\"title function_\">test1</span>(<span class=\"number\">123</span>);</span><br></pre></td></tr></table></figure>\n\n<p>它和<code>ts-ignore</code>的区别在这：<a href=\"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error\">https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#ts-ignore-or-ts-expect-error</a></p>\n<!--hexo-->\n\n<h1 id=\"解构变量可标记为“不使用”\"><a href=\"#解构变量可标记为“不使用”\" class=\"headerlink\" title=\"解构变量可标记为“不使用”\"></a>解构变量可标记为“不使用”</h1><p>如下语句，ts会告诉你<code>first</code>未使用。</p>\n<figure class=\"highlight ts\"><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\">// &#x27;first&#x27; is declared but its value is never read.ts(6133)</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> [first, second] = [<span class=\"number\">1</span>, <span class=\"number\">2</span>];</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&#x27;==&#x27;</span>, second);</span><br></pre></td></tr></table></figure>\n\n<p>但在场景里，就不需要使用第一个变量，ts提供了一个写法标记来忽略检查未使用的解构变量，就是在变量前加<code>_</code>。</p>\n<figure class=\"highlight ts\"><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> [_first, second] = [<span class=\"number\">1</span>, <span class=\"number\">2</span>];</span><br><span class=\"line\"><span class=\"variable language_\">console</span>.<span class=\"title function_\">log</span>(<span class=\"string\">&#x27;==&#x27;</span>, second);</span><br></pre></td></tr></table></figure>\n\n<p><strong>补充：</strong> 以上是ts4.2的特性，在更新的版本里，只要这样写就行了：<code>const [, second] = [1, 2]</code>。</p>\n"},{"title":"Web API - Background Tasks","date":"2024-02-29T19:56:11.000Z","url":"web-api-Background_Tasks_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/55](https://github.com/taoliujun/blog/issues/55)\n\n<!--hexo\n---\nurl: web-api-Background_Tasks_API\ntags:\n  - webapi\n  - Background Tasks\n---\n-->\n\n# Background Task\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API\n\n**Background Tasks**用于在空闲时间执行队列任务，从而**不阻塞事件处理和屏幕更新**。\n\n我们遇到的大部分浏览器卡顿场景是因为代码执行时间太长，阻塞了用户交互、DOM绘制。\n\n在以前，可以将耗时任务分为若干份，每一份执行N次任务，每M毫秒执行一份代码，直至所有任务被执行完成。虽然减轻了卡顿率，但存在以下问题：\n\n-   要主观判断N次任务的耗时不超过10ms，在一帧中留下充足的时间去处理交互、DOM绘制等。\n-   不超过10ms的N次任务，在每一帧的瞬时性能中，实际耗时是不一样的。所以如何定义N的值，也是主观而不科学的。\n-   在每一帧中，任务仍然会耗时过长而阻塞交互、绘制。\n\n现在，Background Task提供了方法，获取到当前留下了多少空闲时间，在这段时间里可以尽量的执行若干次任务。但仍需注意，只运行那些**单次耗时时间很短的任务**。\n\n> “单次耗时时间很短”是什么意思？在不同的场景中，这个时间是可以浮动的。\n>\n> -   在用户点击按钮以查看最新文本信息的场景中，这个时间可以定义为100ms，因为用户在此时间后得到反馈，是不觉得卡顿的。\n> -   在用户快速输入文本以反馈到屏幕上、或滚动订单列表的场景中，这个时间要定义为10ms，因为用户在快速的操作中得不到瞬间反馈就容易感受到卡顿。\n\n## 方法\n\n### requestIdleCallback\n\n在空闲时间执行回调。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Background_Tasks_API/index.html\n\n1. 点击几次\"add task\"按钮，此时没有任务在运行，发现每一秒都流畅打印出任务量。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/342d899c-45cf-4f61-a529-8846282f2028)\n\n2. 点击\"run all tasks\"按钮，发现一次跑完所有任务，耗时几千毫秒，此过程中因为DOM绘制被阻塞，打印也卡住了。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/485c6005-7543-42ab-9096-c5b4fcc9681b)\n\n3. 点击\"run tasks\"按钮，让其循环在空闲时间中跑完所有任务，发现每次执行很少个任务，耗时在几十毫秒，不会阻塞DOM绘制，打印毫无卡顿。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/3b67b0ff-df48-45e9-8c34-6d7327bea1c9)\n\n\n\n\n","source":"_posts/web-api-Background_Tasks_API.md","raw":"---\ntitle: \"Web API - Background Tasks\"\ndate: \"2024-03-01T03:56:11Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-Background_Tasks_API\ntags:\n  - webapi\n  - Background Tasks\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/55](https://github.com/taoliujun/blog/issues/55)\n\n<!--hexo\n---\nurl: web-api-Background_Tasks_API\ntags:\n  - webapi\n  - Background Tasks\n---\n-->\n\n# Background Task\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API\n\n**Background Tasks**用于在空闲时间执行队列任务，从而**不阻塞事件处理和屏幕更新**。\n\n我们遇到的大部分浏览器卡顿场景是因为代码执行时间太长，阻塞了用户交互、DOM绘制。\n\n在以前，可以将耗时任务分为若干份，每一份执行N次任务，每M毫秒执行一份代码，直至所有任务被执行完成。虽然减轻了卡顿率，但存在以下问题：\n\n-   要主观判断N次任务的耗时不超过10ms，在一帧中留下充足的时间去处理交互、DOM绘制等。\n-   不超过10ms的N次任务，在每一帧的瞬时性能中，实际耗时是不一样的。所以如何定义N的值，也是主观而不科学的。\n-   在每一帧中，任务仍然会耗时过长而阻塞交互、绘制。\n\n现在，Background Task提供了方法，获取到当前留下了多少空闲时间，在这段时间里可以尽量的执行若干次任务。但仍需注意，只运行那些**单次耗时时间很短的任务**。\n\n> “单次耗时时间很短”是什么意思？在不同的场景中，这个时间是可以浮动的。\n>\n> -   在用户点击按钮以查看最新文本信息的场景中，这个时间可以定义为100ms，因为用户在此时间后得到反馈，是不觉得卡顿的。\n> -   在用户快速输入文本以反馈到屏幕上、或滚动订单列表的场景中，这个时间要定义为10ms，因为用户在快速的操作中得不到瞬间反馈就容易感受到卡顿。\n\n## 方法\n\n### requestIdleCallback\n\n在空闲时间执行回调。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Background_Tasks_API/index.html\n\n1. 点击几次\"add task\"按钮，此时没有任务在运行，发现每一秒都流畅打印出任务量。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/342d899c-45cf-4f61-a529-8846282f2028)\n\n2. 点击\"run all tasks\"按钮，发现一次跑完所有任务，耗时几千毫秒，此过程中因为DOM绘制被阻塞，打印也卡住了。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/485c6005-7543-42ab-9096-c5b4fcc9681b)\n\n3. 点击\"run tasks\"按钮，让其循环在空闲时间中跑完所有任务，发现每次执行很少个任务，耗时在几十毫秒，不会阻塞DOM绘制，打印毫无卡顿。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/3b67b0ff-df48-45e9-8c34-6d7327bea1c9)\n\n\n\n\n","slug":"web-api-Background_Tasks_API","published":1,"updated":"2024-03-01T10:05:05.916Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne79001xi8oh5ietgq6s","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/55\">https://github.com/taoliujun/blog/issues/55</a></p>\n<!--hexo\n---\nurl: web-api-Background_Tasks_API\ntags:\n  - webapi\n  - Background Tasks\n---\n-->\n\n<h1 id=\"Background-Task\"><a href=\"#Background-Task\" class=\"headerlink\" title=\"Background Task\"></a>Background Task</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API\">https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API</a></p>\n</blockquote>\n<p><strong>Background Tasks</strong>用于在空闲时间执行队列任务，从而<strong>不阻塞事件处理和屏幕更新</strong>。</p>\n<p>我们遇到的大部分浏览器卡顿场景是因为代码执行时间太长，阻塞了用户交互、DOM绘制。</p>\n<p>在以前，可以将耗时任务分为若干份，每一份执行N次任务，每M毫秒执行一份代码，直至所有任务被执行完成。虽然减轻了卡顿率，但存在以下问题：</p>\n<ul>\n<li>要主观判断N次任务的耗时不超过10ms，在一帧中留下充足的时间去处理交互、DOM绘制等。</li>\n<li>不超过10ms的N次任务，在每一帧的瞬时性能中，实际耗时是不一样的。所以如何定义N的值，也是主观而不科学的。</li>\n<li>在每一帧中，任务仍然会耗时过长而阻塞交互、绘制。</li>\n</ul>\n<p>现在，Background Task提供了方法，获取到当前留下了多少空闲时间，在这段时间里可以尽量的执行若干次任务。但仍需注意，只运行那些<strong>单次耗时时间很短的任务</strong>。</p>\n<blockquote>\n<p>“单次耗时时间很短”是什么意思？在不同的场景中，这个时间是可以浮动的。</p>\n<ul>\n<li>在用户点击按钮以查看最新文本信息的场景中，这个时间可以定义为100ms，因为用户在此时间后得到反馈，是不觉得卡顿的。</li>\n<li>在用户快速输入文本以反馈到屏幕上、或滚动订单列表的场景中，这个时间要定义为10ms，因为用户在快速的操作中得不到瞬间反馈就容易感受到卡顿。</li>\n</ul>\n</blockquote>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"requestIdleCallback\"><a href=\"#requestIdleCallback\" class=\"headerlink\" title=\"requestIdleCallback\"></a>requestIdleCallback</h3><p>在空闲时间执行回调。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Background_Tasks_API/index.html\">https://taoliujun.github.io/example/web-api/Background_Tasks_API/index.html</a></p>\n<ol>\n<li>点击几次”add task”按钮，此时没有任务在运行，发现每一秒都流畅打印出任务量。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/342d899c-45cf-4f61-a529-8846282f2028\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>点击”run all tasks”按钮，发现一次跑完所有任务，耗时几千毫秒，此过程中因为DOM绘制被阻塞，打印也卡住了。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/485c6005-7543-42ab-9096-c5b4fcc9681b\" alt=\"image\"></p>\n<ol start=\"3\">\n<li>点击”run tasks”按钮，让其循环在空闲时间中跑完所有任务，发现每次执行很少个任务，耗时在几十毫秒，不会阻塞DOM绘制，打印毫无卡顿。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/3b67b0ff-df48-45e9-8c34-6d7327bea1c9\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/55\">https://github.com/taoliujun/blog/issues/55</a></p>\n<!--hexo\n---\nurl: web-api-Background_Tasks_API\ntags:\n  - webapi\n  - Background Tasks\n---\n-->\n\n<h1 id=\"Background-Task\"><a href=\"#Background-Task\" class=\"headerlink\" title=\"Background Task\"></a>Background Task</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API\">https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API</a></p>\n</blockquote>\n<p><strong>Background Tasks</strong>用于在空闲时间执行队列任务，从而<strong>不阻塞事件处理和屏幕更新</strong>。</p>\n<p>我们遇到的大部分浏览器卡顿场景是因为代码执行时间太长，阻塞了用户交互、DOM绘制。</p>\n<p>在以前，可以将耗时任务分为若干份，每一份执行N次任务，每M毫秒执行一份代码，直至所有任务被执行完成。虽然减轻了卡顿率，但存在以下问题：</p>\n<ul>\n<li>要主观判断N次任务的耗时不超过10ms，在一帧中留下充足的时间去处理交互、DOM绘制等。</li>\n<li>不超过10ms的N次任务，在每一帧的瞬时性能中，实际耗时是不一样的。所以如何定义N的值，也是主观而不科学的。</li>\n<li>在每一帧中，任务仍然会耗时过长而阻塞交互、绘制。</li>\n</ul>\n<p>现在，Background Task提供了方法，获取到当前留下了多少空闲时间，在这段时间里可以尽量的执行若干次任务。但仍需注意，只运行那些<strong>单次耗时时间很短的任务</strong>。</p>\n<blockquote>\n<p>“单次耗时时间很短”是什么意思？在不同的场景中，这个时间是可以浮动的。</p>\n<ul>\n<li>在用户点击按钮以查看最新文本信息的场景中，这个时间可以定义为100ms，因为用户在此时间后得到反馈，是不觉得卡顿的。</li>\n<li>在用户快速输入文本以反馈到屏幕上、或滚动订单列表的场景中，这个时间要定义为10ms，因为用户在快速的操作中得不到瞬间反馈就容易感受到卡顿。</li>\n</ul>\n</blockquote>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"requestIdleCallback\"><a href=\"#requestIdleCallback\" class=\"headerlink\" title=\"requestIdleCallback\"></a>requestIdleCallback</h3><p>在空闲时间执行回调。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Background_Tasks_API/index.html\">https://taoliujun.github.io/example/web-api/Background_Tasks_API/index.html</a></p>\n<ol>\n<li>点击几次”add task”按钮，此时没有任务在运行，发现每一秒都流畅打印出任务量。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/342d899c-45cf-4f61-a529-8846282f2028\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>点击”run all tasks”按钮，发现一次跑完所有任务，耗时几千毫秒，此过程中因为DOM绘制被阻塞，打印也卡住了。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/485c6005-7543-42ab-9096-c5b4fcc9681b\" alt=\"image\"></p>\n<ol start=\"3\">\n<li>点击”run tasks”按钮，让其循环在空闲时间中跑完所有任务，发现每次执行很少个任务，耗时在几十毫秒，不会阻塞DOM绘制，打印毫无卡顿。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/3b67b0ff-df48-45e9-8c34-6d7327bea1c9\" alt=\"image\"></p>\n"},{"title":"Web API - Battery Status","date":"2024-03-01T01:34:25.000Z","url":"web-api-Battery_Status_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/58](https://github.com/taoliujun/blog/issues/58)\n\n<!--hexo\n---\nurl: web-api-Battery_Status_API\ntags:\n  - webapi\n  - Battery Status\n---\n-->\n\n# Battery Status\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API\n\n**Battery Status**可以查看电池信息、监听充电状态变化。\n\n## 接口\n\n### BatteryManager\n\n设备电池对象。\n\n## 方法\n\n### getBattery\n\n返回`Promise<BatteryManager>`\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-apis/Battery_Status_API/index.html\n\n1. 拔掉笔记本充电线，再插上充电线，可以看到监听到充电状态变化。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9944f20b-95b2-4bc2-b2c6-01c7cdcdf80d)\n\n\n\n\n","source":"_posts/web-api-Battery_Status_API.md","raw":"---\ntitle: \"Web API - Battery Status\"\ndate: \"2024-03-01T09:34:25Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-Battery_Status_API\ntags:\n  - webapi\n  - Battery Status\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/58](https://github.com/taoliujun/blog/issues/58)\n\n<!--hexo\n---\nurl: web-api-Battery_Status_API\ntags:\n  - webapi\n  - Battery Status\n---\n-->\n\n# Battery Status\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API\n\n**Battery Status**可以查看电池信息、监听充电状态变化。\n\n## 接口\n\n### BatteryManager\n\n设备电池对象。\n\n## 方法\n\n### getBattery\n\n返回`Promise<BatteryManager>`\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-apis/Battery_Status_API/index.html\n\n1. 拔掉笔记本充电线，再插上充电线，可以看到监听到充电状态变化。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9944f20b-95b2-4bc2-b2c6-01c7cdcdf80d)\n\n\n\n\n","slug":"web-api-Battery_Status_API","published":1,"updated":"2024-03-01T10:05:05.932Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne7a0021i8ohdd78avcq","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/58\">https://github.com/taoliujun/blog/issues/58</a></p>\n<!--hexo\n---\nurl: web-api-Battery_Status_API\ntags:\n  - webapi\n  - Battery Status\n---\n-->\n\n<h1 id=\"Battery-Status\"><a href=\"#Battery-Status\" class=\"headerlink\" title=\"Battery Status\"></a>Battery Status</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API\">https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API</a></p>\n</blockquote>\n<p><strong>Battery Status</strong>可以查看电池信息、监听充电状态变化。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"BatteryManager\"><a href=\"#BatteryManager\" class=\"headerlink\" title=\"BatteryManager\"></a>BatteryManager</h3><p>设备电池对象。</p>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"getBattery\"><a href=\"#getBattery\" class=\"headerlink\" title=\"getBattery\"></a>getBattery</h3><p>返回<code>Promise&lt;BatteryManager&gt;</code></p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-apis/Battery_Status_API/index.html\">https://taoliujun.github.io/example/web-apis/Battery_Status_API/index.html</a></p>\n<ol>\n<li>拔掉笔记本充电线，再插上充电线，可以看到监听到充电状态变化。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9944f20b-95b2-4bc2-b2c6-01c7cdcdf80d\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/58\">https://github.com/taoliujun/blog/issues/58</a></p>\n<!--hexo\n---\nurl: web-api-Battery_Status_API\ntags:\n  - webapi\n  - Battery Status\n---\n-->\n\n<h1 id=\"Battery-Status\"><a href=\"#Battery-Status\" class=\"headerlink\" title=\"Battery Status\"></a>Battery Status</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API\">https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API</a></p>\n</blockquote>\n<p><strong>Battery Status</strong>可以查看电池信息、监听充电状态变化。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"BatteryManager\"><a href=\"#BatteryManager\" class=\"headerlink\" title=\"BatteryManager\"></a>BatteryManager</h3><p>设备电池对象。</p>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"getBattery\"><a href=\"#getBattery\" class=\"headerlink\" title=\"getBattery\"></a>getBattery</h3><p>返回<code>Promise&lt;BatteryManager&gt;</code></p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-apis/Battery_Status_API/index.html\">https://taoliujun.github.io/example/web-apis/Battery_Status_API/index.html</a></p>\n<ol>\n<li>拔掉笔记本充电线，再插上充电线，可以看到监听到充电状态变化。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9944f20b-95b2-4bc2-b2c6-01c7cdcdf80d\" alt=\"image\"></p>\n"},{"title":"Web API - Badging","date":"2024-02-28T00:22:00.000Z","url":"web-api-Badging_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/50](https://github.com/taoliujun/blog/issues/50)\n\n<!--hexo\n---\nurl: web-api-Badging_API\ntags:\n  - webapi\n  - Badging\n---\n-->\n\n# Badging\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Badging_API\n\n**Badging**用于在Web APP的图标上**标记徽章**，常用于通知用户有新消息啦，它有3种状态：\n\n\n| 状态 | 描述 | 效果 |\n| --- | --- | --- |\n| nothing | 什么都没有 | ![image](https://github.com/taoliujun/blog/assets/5689134/0410ffdf-fbf3-41aa-b3b5-de0aa2ceb671) |\n| flag | 一个圆点 | ![image](https://github.com/taoliujun/blog/assets/5689134/965f2c77-8b85-443f-8f97-da491df88354) |\n| integer | 一个数字，最大显示99+ | ![image](https://github.com/taoliujun/blog/assets/5689134/f0333758-125b-40b9-a88b-285346730816) |\n\n## 方法\n\n### setAppBadge\n\n设置徽章。\n\n```javascript\n// 设置圆点\nnavigator.setAppBadge();\n// 设置数字\nnavigator.setAppBadge(12);\n// 设置大数字\nnavigator.setAppBadge(1234);\n```\n\n### clearAppBadge\n\n清空徽章。\n\n```javascript\nnavigator.clearAppBadge();\n```\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Badging_API/index.html\n\n本示例代码较为简单，直接打开查看源码即可。\n\n\n\n","source":"_posts/web-api-Badging_API.md","raw":"---\ntitle: \"Web API - Badging\"\ndate: \"2024-02-28T08:22:00Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-Badging_API\ntags:\n  - webapi\n  - Badging\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/50](https://github.com/taoliujun/blog/issues/50)\n\n<!--hexo\n---\nurl: web-api-Badging_API\ntags:\n  - webapi\n  - Badging\n---\n-->\n\n# Badging\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Badging_API\n\n**Badging**用于在Web APP的图标上**标记徽章**，常用于通知用户有新消息啦，它有3种状态：\n\n\n| 状态 | 描述 | 效果 |\n| --- | --- | --- |\n| nothing | 什么都没有 | ![image](https://github.com/taoliujun/blog/assets/5689134/0410ffdf-fbf3-41aa-b3b5-de0aa2ceb671) |\n| flag | 一个圆点 | ![image](https://github.com/taoliujun/blog/assets/5689134/965f2c77-8b85-443f-8f97-da491df88354) |\n| integer | 一个数字，最大显示99+ | ![image](https://github.com/taoliujun/blog/assets/5689134/f0333758-125b-40b9-a88b-285346730816) |\n\n## 方法\n\n### setAppBadge\n\n设置徽章。\n\n```javascript\n// 设置圆点\nnavigator.setAppBadge();\n// 设置数字\nnavigator.setAppBadge(12);\n// 设置大数字\nnavigator.setAppBadge(1234);\n```\n\n### clearAppBadge\n\n清空徽章。\n\n```javascript\nnavigator.clearAppBadge();\n```\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Badging_API/index.html\n\n本示例代码较为简单，直接打开查看源码即可。\n\n\n\n","slug":"web-api-Badging_API","published":1,"updated":"2024-03-01T10:05:05.952Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne7a0025i8ohhasq15oj","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/50\">https://github.com/taoliujun/blog/issues/50</a></p>\n<!--hexo\n---\nurl: web-api-Badging_API\ntags:\n  - webapi\n  - Badging\n---\n-->\n\n<h1 id=\"Badging\"><a href=\"#Badging\" class=\"headerlink\" title=\"Badging\"></a>Badging</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Badging_API\">https://developer.mozilla.org/en-US/docs/Web/API/Badging_API</a></p>\n</blockquote>\n<p><strong>Badging</strong>用于在Web APP的图标上<strong>标记徽章</strong>，常用于通知用户有新消息啦，它有3种状态：</p>\n<table>\n<thead>\n<tr>\n<th>状态</th>\n<th>描述</th>\n<th>效果</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>nothing</td>\n<td>什么都没有</td>\n<td><img src=\"https://github.com/taoliujun/blog/assets/5689134/0410ffdf-fbf3-41aa-b3b5-de0aa2ceb671\" alt=\"image\"></td>\n</tr>\n<tr>\n<td>flag</td>\n<td>一个圆点</td>\n<td><img src=\"https://github.com/taoliujun/blog/assets/5689134/965f2c77-8b85-443f-8f97-da491df88354\" alt=\"image\"></td>\n</tr>\n<tr>\n<td>integer</td>\n<td>一个数字，最大显示99+</td>\n<td><img src=\"https://github.com/taoliujun/blog/assets/5689134/f0333758-125b-40b9-a88b-285346730816\" alt=\"image\"></td>\n</tr>\n</tbody></table>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"setAppBadge\"><a href=\"#setAppBadge\" class=\"headerlink\" title=\"setAppBadge\"></a>setAppBadge</h3><p>设置徽章。</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 设置圆点</span></span><br><span class=\"line\">navigator.<span class=\"title function_\">setAppBadge</span>();</span><br><span class=\"line\"><span class=\"comment\">// 设置数字</span></span><br><span class=\"line\">navigator.<span class=\"title function_\">setAppBadge</span>(<span class=\"number\">12</span>);</span><br><span class=\"line\"><span class=\"comment\">// 设置大数字</span></span><br><span class=\"line\">navigator.<span class=\"title function_\">setAppBadge</span>(<span class=\"number\">1234</span>);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"clearAppBadge\"><a href=\"#clearAppBadge\" class=\"headerlink\" title=\"clearAppBadge\"></a>clearAppBadge</h3><p>清空徽章。</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">navigator.<span class=\"title function_\">clearAppBadge</span>();</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Badging_API/index.html\">https://taoliujun.github.io/example/web-api/Badging_API/index.html</a></p>\n<p>本示例代码较为简单，直接打开查看源码即可。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/50\">https://github.com/taoliujun/blog/issues/50</a></p>\n<!--hexo\n---\nurl: web-api-Badging_API\ntags:\n  - webapi\n  - Badging\n---\n-->\n\n<h1 id=\"Badging\"><a href=\"#Badging\" class=\"headerlink\" title=\"Badging\"></a>Badging</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Badging_API\">https://developer.mozilla.org/en-US/docs/Web/API/Badging_API</a></p>\n</blockquote>\n<p><strong>Badging</strong>用于在Web APP的图标上<strong>标记徽章</strong>，常用于通知用户有新消息啦，它有3种状态：</p>\n<table>\n<thead>\n<tr>\n<th>状态</th>\n<th>描述</th>\n<th>效果</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>nothing</td>\n<td>什么都没有</td>\n<td><img src=\"https://github.com/taoliujun/blog/assets/5689134/0410ffdf-fbf3-41aa-b3b5-de0aa2ceb671\" alt=\"image\"></td>\n</tr>\n<tr>\n<td>flag</td>\n<td>一个圆点</td>\n<td><img src=\"https://github.com/taoliujun/blog/assets/5689134/965f2c77-8b85-443f-8f97-da491df88354\" alt=\"image\"></td>\n</tr>\n<tr>\n<td>integer</td>\n<td>一个数字，最大显示99+</td>\n<td><img src=\"https://github.com/taoliujun/blog/assets/5689134/f0333758-125b-40b9-a88b-285346730816\" alt=\"image\"></td>\n</tr>\n</tbody></table>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"setAppBadge\"><a href=\"#setAppBadge\" class=\"headerlink\" title=\"setAppBadge\"></a>setAppBadge</h3><p>设置徽章。</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 设置圆点</span></span><br><span class=\"line\">navigator.<span class=\"title function_\">setAppBadge</span>();</span><br><span class=\"line\"><span class=\"comment\">// 设置数字</span></span><br><span class=\"line\">navigator.<span class=\"title function_\">setAppBadge</span>(<span class=\"number\">12</span>);</span><br><span class=\"line\"><span class=\"comment\">// 设置大数字</span></span><br><span class=\"line\">navigator.<span class=\"title function_\">setAppBadge</span>(<span class=\"number\">1234</span>);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"clearAppBadge\"><a href=\"#clearAppBadge\" class=\"headerlink\" title=\"clearAppBadge\"></a>clearAppBadge</h3><p>清空徽章。</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">navigator.<span class=\"title function_\">clearAppBadge</span>();</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Badging_API/index.html\">https://taoliujun.github.io/example/web-api/Badging_API/index.html</a></p>\n<p>本示例代码较为简单，直接打开查看源码即可。</p>\n"},{"title":"Web API - Beacon","date":"2024-02-28T23:21:58.000Z","url":"web-api-Beacon_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/53](https://github.com/taoliujun/blog/issues/53)\n\n<!--hexo\n---\nurl: web-api-Beacon_API\ntags:\n  - webapi\n  - Beacon\n---\n-->\n\n# Beacon\n\n> MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API\n\n**Beacon**用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。\n\n## 方法\n\n### sendBeacon\n\n通过*POST*发送少量数据到服务器。\n\n```javascript\nnavigator.sendBeacon(url, data);\n```\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Beacon_API/index.html\n\n1. 创建一个页面，放一个按钮用于发送`manual`统计数据：\n\n```html\n<button onclick=\"javascript:sendData('manual');\">sendData</button>\n```\n\n2. 在页面隐藏、卸载的时候发送`hidden`统计数据：\n\n```javascript\ndocument.addEventListener(\"visibilitychange\", ()=> {\n  if (document.visibilityState === \"hidden\") {\n    sendData('hidden');\n  }\n});\n```\n\n3。 发送统计数据的函数：\n\n```javascript\nlet data = 0;\n\nfunction sendData(source) {\n  data += 1;\n  // getUrl用于获取服务端地址\n  navigator.sendBeacon(getUrl(), new URLSearchParams({ data, source }));\n}\n```\n\n4. 创建服务端，打印*request body*数据以测试点击按钮、关闭页面的效果，发现关闭页面后也发送了数据。\n\n```bash\nbody: [Object: null prototype] { data: '1', source: 'manual' }\nbody: [Object: null prototype] { data: '2', source: 'hidden' }\n```\n\n\n\n\n","source":"_posts/web-api-Beacon_API.md","raw":"---\ntitle: \"Web API - Beacon\"\ndate: \"2024-02-29T07:21:58Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-Beacon_API\ntags:\n  - webapi\n  - Beacon\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/53](https://github.com/taoliujun/blog/issues/53)\n\n<!--hexo\n---\nurl: web-api-Beacon_API\ntags:\n  - webapi\n  - Beacon\n---\n-->\n\n# Beacon\n\n> MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API\n\n**Beacon**用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。\n\n## 方法\n\n### sendBeacon\n\n通过*POST*发送少量数据到服务器。\n\n```javascript\nnavigator.sendBeacon(url, data);\n```\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Beacon_API/index.html\n\n1. 创建一个页面，放一个按钮用于发送`manual`统计数据：\n\n```html\n<button onclick=\"javascript:sendData('manual');\">sendData</button>\n```\n\n2. 在页面隐藏、卸载的时候发送`hidden`统计数据：\n\n```javascript\ndocument.addEventListener(\"visibilitychange\", ()=> {\n  if (document.visibilityState === \"hidden\") {\n    sendData('hidden');\n  }\n});\n```\n\n3。 发送统计数据的函数：\n\n```javascript\nlet data = 0;\n\nfunction sendData(source) {\n  data += 1;\n  // getUrl用于获取服务端地址\n  navigator.sendBeacon(getUrl(), new URLSearchParams({ data, source }));\n}\n```\n\n4. 创建服务端，打印*request body*数据以测试点击按钮、关闭页面的效果，发现关闭页面后也发送了数据。\n\n```bash\nbody: [Object: null prototype] { data: '1', source: 'manual' }\nbody: [Object: null prototype] { data: '2', source: 'hidden' }\n```\n\n\n\n\n","slug":"web-api-Beacon_API","published":1,"updated":"2024-03-01T10:05:05.952Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne7b0028i8oh6rf36zu9","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/53\">https://github.com/taoliujun/blog/issues/53</a></p>\n<!--hexo\n---\nurl: web-api-Beacon_API\ntags:\n  - webapi\n  - Beacon\n---\n-->\n\n<h1 id=\"Beacon\"><a href=\"#Beacon\" class=\"headerlink\" title=\"Beacon\"></a>Beacon</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API\">https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API</a></p>\n</blockquote>\n<p><strong>Beacon</strong>用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。</p>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"sendBeacon\"><a href=\"#sendBeacon\" class=\"headerlink\" title=\"sendBeacon\"></a>sendBeacon</h3><p>通过<em>POST</em>发送少量数据到服务器。</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">navigator.<span class=\"title function_\">sendBeacon</span>(url, data);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Beacon_API/index.html\">https://taoliujun.github.io/example/web-api/Beacon_API/index.html</a></p>\n<ol>\n<li>创建一个页面，放一个按钮用于发送<code>manual</code>统计数据：</li>\n</ol>\n<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\">button</span> <span class=\"attr\">onclick</span>=<span class=\"string\">&quot;javascript:sendData(&#x27;manual&#x27;);&quot;</span>&gt;</span>sendData<span class=\"tag\">&lt;/<span class=\"name\">button</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<ol start=\"2\">\n<li>在页面隐藏、卸载的时候发送<code>hidden</code>统计数据：</li>\n</ol>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"variable language_\">document</span>.<span class=\"title function_\">addEventListener</span>(<span class=\"string\">&quot;visibilitychange&quot;</span>, <span class=\"function\">()=&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (<span class=\"variable language_\">document</span>.<span class=\"property\">visibilityState</span> === <span class=\"string\">&quot;hidden&quot;</span>) &#123;</span><br><span class=\"line\">    <span class=\"title function_\">sendData</span>(<span class=\"string\">&#x27;hidden&#x27;</span>);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>3。 发送统计数据的函数：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">let</span> data = <span class=\"number\">0</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">sendData</span>(<span class=\"params\">source</span>) &#123;</span><br><span class=\"line\">  data += <span class=\"number\">1</span>;</span><br><span class=\"line\">  <span class=\"comment\">// getUrl用于获取服务端地址</span></span><br><span class=\"line\">  navigator.<span class=\"title function_\">sendBeacon</span>(<span class=\"title function_\">getUrl</span>(), <span class=\"keyword\">new</span> <span class=\"title class_\">URLSearchParams</span>(&#123; data, source &#125;));</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<ol start=\"4\">\n<li>创建服务端，打印<em>request body</em>数据以测试点击按钮、关闭页面的效果，发现关闭页面后也发送了数据。</li>\n</ol>\n<figure class=\"highlight bash\"><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\">body: [Object: null prototype] &#123; data: <span class=\"string\">&#x27;1&#x27;</span>, <span class=\"built_in\">source</span>: <span class=\"string\">&#x27;manual&#x27;</span> &#125;</span><br><span class=\"line\">body: [Object: null prototype] &#123; data: <span class=\"string\">&#x27;2&#x27;</span>, <span class=\"built_in\">source</span>: <span class=\"string\">&#x27;hidden&#x27;</span> &#125;</span><br></pre></td></tr></table></figure>\n\n\n\n\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/53\">https://github.com/taoliujun/blog/issues/53</a></p>\n<!--hexo\n---\nurl: web-api-Beacon_API\ntags:\n  - webapi\n  - Beacon\n---\n-->\n\n<h1 id=\"Beacon\"><a href=\"#Beacon\" class=\"headerlink\" title=\"Beacon\"></a>Beacon</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API\">https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API</a></p>\n</blockquote>\n<p><strong>Beacon</strong>用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。</p>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"sendBeacon\"><a href=\"#sendBeacon\" class=\"headerlink\" title=\"sendBeacon\"></a>sendBeacon</h3><p>通过<em>POST</em>发送少量数据到服务器。</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">navigator.<span class=\"title function_\">sendBeacon</span>(url, data);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Beacon_API/index.html\">https://taoliujun.github.io/example/web-api/Beacon_API/index.html</a></p>\n<ol>\n<li>创建一个页面，放一个按钮用于发送<code>manual</code>统计数据：</li>\n</ol>\n<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\">button</span> <span class=\"attr\">onclick</span>=<span class=\"string\">&quot;javascript:sendData(&#x27;manual&#x27;);&quot;</span>&gt;</span>sendData<span class=\"tag\">&lt;/<span class=\"name\">button</span>&gt;</span></span><br></pre></td></tr></table></figure>\n\n<ol start=\"2\">\n<li>在页面隐藏、卸载的时候发送<code>hidden</code>统计数据：</li>\n</ol>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"variable language_\">document</span>.<span class=\"title function_\">addEventListener</span>(<span class=\"string\">&quot;visibilitychange&quot;</span>, <span class=\"function\">()=&gt;</span> &#123;</span><br><span class=\"line\">  <span class=\"keyword\">if</span> (<span class=\"variable language_\">document</span>.<span class=\"property\">visibilityState</span> === <span class=\"string\">&quot;hidden&quot;</span>) &#123;</span><br><span class=\"line\">    <span class=\"title function_\">sendData</span>(<span class=\"string\">&#x27;hidden&#x27;</span>);</span><br><span class=\"line\">  &#125;</span><br><span class=\"line\">&#125;);</span><br></pre></td></tr></table></figure>\n\n<p>3。 发送统计数据的函数：</p>\n<figure class=\"highlight javascript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">let</span> data = <span class=\"number\">0</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">function</span> <span class=\"title function_\">sendData</span>(<span class=\"params\">source</span>) &#123;</span><br><span class=\"line\">  data += <span class=\"number\">1</span>;</span><br><span class=\"line\">  <span class=\"comment\">// getUrl用于获取服务端地址</span></span><br><span class=\"line\">  navigator.<span class=\"title function_\">sendBeacon</span>(<span class=\"title function_\">getUrl</span>(), <span class=\"keyword\">new</span> <span class=\"title class_\">URLSearchParams</span>(&#123; data, source &#125;));</span><br><span class=\"line\">&#125;</span><br></pre></td></tr></table></figure>\n\n<ol start=\"4\">\n<li>创建服务端，打印<em>request body</em>数据以测试点击按钮、关闭页面的效果，发现关闭页面后也发送了数据。</li>\n</ol>\n<figure class=\"highlight bash\"><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\">body: [Object: null prototype] &#123; data: <span class=\"string\">&#x27;1&#x27;</span>, <span class=\"built_in\">source</span>: <span class=\"string\">&#x27;manual&#x27;</span> &#125;</span><br><span class=\"line\">body: [Object: null prototype] &#123; data: <span class=\"string\">&#x27;2&#x27;</span>, <span class=\"built_in\">source</span>: <span class=\"string\">&#x27;hidden&#x27;</span> &#125;</span><br></pre></td></tr></table></figure>\n\n\n\n\n"},{"title":"Web API - Broadcast Channel","date":"2024-03-01T02:00:22.000Z","url":"web-api-Broadcast_Channel_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/59](https://github.com/taoliujun/blog/issues/59)\n\n<!--hexo\n---\nurl: web-api-Broadcast_Channel_API\ntags:\n  - webapi\n  - Broadcast Channel\n---\n-->\n\n# Broadcast Channel\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API\n\n**Broadcast Channel**可以在**同源**情况下，在一种浏览器的不同窗口、标签页、frame中简单通信。\n\n## 接口\n\n### BroadcastChannel\n\n传入频道名称，返回实例，包含了`message`事件来监听消息、`postMessage`方法来发送信息。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-apis/Broadcast_Channel_API/index.html\n\n1. 打开两个Chrome窗口，查看日志：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/8c0fdb6e-0318-49cd-8040-f90ca0738a13)\n\n\n\n\n","source":"_posts/web-api-Broadcast_Channel_API.md","raw":"---\ntitle: \"Web API - Broadcast Channel\"\ndate: \"2024-03-01T10:00:22Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-Broadcast_Channel_API\ntags:\n  - webapi\n  - Broadcast Channel\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/59](https://github.com/taoliujun/blog/issues/59)\n\n<!--hexo\n---\nurl: web-api-Broadcast_Channel_API\ntags:\n  - webapi\n  - Broadcast Channel\n---\n-->\n\n# Broadcast Channel\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API\n\n**Broadcast Channel**可以在**同源**情况下，在一种浏览器的不同窗口、标签页、frame中简单通信。\n\n## 接口\n\n### BroadcastChannel\n\n传入频道名称，返回实例，包含了`message`事件来监听消息、`postMessage`方法来发送信息。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-apis/Broadcast_Channel_API/index.html\n\n1. 打开两个Chrome窗口，查看日志：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/8c0fdb6e-0318-49cd-8040-f90ca0738a13)\n\n\n\n\n","slug":"web-api-Broadcast_Channel_API","published":1,"updated":"2024-03-01T10:05:05.924Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne7c002bi8ohfzyr9vej","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/59\">https://github.com/taoliujun/blog/issues/59</a></p>\n<!--hexo\n---\nurl: web-api-Broadcast_Channel_API\ntags:\n  - webapi\n  - Broadcast Channel\n---\n-->\n\n<h1 id=\"Broadcast-Channel\"><a href=\"#Broadcast-Channel\" class=\"headerlink\" title=\"Broadcast Channel\"></a>Broadcast Channel</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API\">https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API</a></p>\n</blockquote>\n<p><strong>Broadcast Channel</strong>可以在<strong>同源</strong>情况下，在一种浏览器的不同窗口、标签页、frame中简单通信。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"BroadcastChannel\"><a href=\"#BroadcastChannel\" class=\"headerlink\" title=\"BroadcastChannel\"></a>BroadcastChannel</h3><p>传入频道名称，返回实例，包含了<code>message</code>事件来监听消息、<code>postMessage</code>方法来发送信息。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-apis/Broadcast_Channel_API/index.html\">https://taoliujun.github.io/example/web-apis/Broadcast_Channel_API/index.html</a></p>\n<ol>\n<li>打开两个Chrome窗口，查看日志：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/8c0fdb6e-0318-49cd-8040-f90ca0738a13\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/59\">https://github.com/taoliujun/blog/issues/59</a></p>\n<!--hexo\n---\nurl: web-api-Broadcast_Channel_API\ntags:\n  - webapi\n  - Broadcast Channel\n---\n-->\n\n<h1 id=\"Broadcast-Channel\"><a href=\"#Broadcast-Channel\" class=\"headerlink\" title=\"Broadcast Channel\"></a>Broadcast Channel</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API\">https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API</a></p>\n</blockquote>\n<p><strong>Broadcast Channel</strong>可以在<strong>同源</strong>情况下，在一种浏览器的不同窗口、标签页、frame中简单通信。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"BroadcastChannel\"><a href=\"#BroadcastChannel\" class=\"headerlink\" title=\"BroadcastChannel\"></a>BroadcastChannel</h3><p>传入频道名称，返回实例，包含了<code>message</code>事件来监听消息、<code>postMessage</code>方法来发送信息。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-apis/Broadcast_Channel_API/index.html\">https://taoliujun.github.io/example/web-apis/Broadcast_Channel_API/index.html</a></p>\n<ol>\n<li>打开两个Chrome窗口，查看日志：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/8c0fdb6e-0318-49cd-8040-f90ca0738a13\" alt=\"image\"></p>\n"},{"title":"Web API 实践，最后更新2024/02月...","date":"2024-02-28T00:10:53.000Z","url":"web-api-readme","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/49](https://github.com/taoliujun/blog/issues/49)\n\n<!--hexo\n---\nurl: web-api-readme\ntags:\n  - webapi\n---\n-->\n\n[Web API](https://www.w3.org/TR/)的发展日新月异，稍不留神就偷偷的出了新规范，这些规范为项目方案提供了更多的可能性。话说读百遍不如写一遍，计划在一段时间内，对大部分API进行demo实践以加深印象。\n\n> 以 https://developer.mozilla.org/en-US/docs/Web/API 为基础，只实践W3C Recommendation状态的API。\n\n## 目录\n\n- [x] #50 \n- [x] #53 \n- [x] #55 \n- [x] #58 \n- [ ] #59 \n\n\n\n","source":"_posts/web-api-readme.md","raw":"---\ntitle: \"Web API 实践，最后更新2024/02月...\"\ndate: \"2024-02-28T08:10:53Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-readme\ntags:\n  - webapi\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/49](https://github.com/taoliujun/blog/issues/49)\n\n<!--hexo\n---\nurl: web-api-readme\ntags:\n  - webapi\n---\n-->\n\n[Web API](https://www.w3.org/TR/)的发展日新月异，稍不留神就偷偷的出了新规范，这些规范为项目方案提供了更多的可能性。话说读百遍不如写一遍，计划在一段时间内，对大部分API进行demo实践以加深印象。\n\n> 以 https://developer.mozilla.org/en-US/docs/Web/API 为基础，只实践W3C Recommendation状态的API。\n\n## 目录\n\n- [x] #50 \n- [x] #53 \n- [x] #55 \n- [x] #58 \n- [ ] #59 \n\n\n\n","slug":"web-api-readme","published":1,"updated":"2024-03-01T10:05:05.908Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne7d002fi8oh4cqmc2up","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/49\">https://github.com/taoliujun/blog/issues/49</a></p>\n<!--hexo\n---\nurl: web-api-readme\ntags:\n  - webapi\n---\n-->\n\n<p><a href=\"https://www.w3.org/TR/\">Web API</a>的发展日新月异，稍不留神就偷偷的出了新规范，这些规范为项目方案提供了更多的可能性。话说读百遍不如写一遍，计划在一段时间内，对大部分API进行demo实践以加深印象。</p>\n<blockquote>\n<p>以 <a href=\"https://developer.mozilla.org/en-US/docs/Web/API\">https://developer.mozilla.org/en-US/docs/Web/API</a> 为基础，只实践W3C Recommendation状态的API。</p>\n</blockquote>\n<h2 id=\"目录\"><a href=\"#目录\" class=\"headerlink\" title=\"目录\"></a>目录</h2><ul>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #50 </li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #53 </li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #55 </li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #58 </li>\n<li><input disabled=\"\" type=\"checkbox\"> #59</li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/49\">https://github.com/taoliujun/blog/issues/49</a></p>\n<!--hexo\n---\nurl: web-api-readme\ntags:\n  - webapi\n---\n-->\n\n<p><a href=\"https://www.w3.org/TR/\">Web API</a>的发展日新月异，稍不留神就偷偷的出了新规范，这些规范为项目方案提供了更多的可能性。话说读百遍不如写一遍，计划在一段时间内，对大部分API进行demo实践以加深印象。</p>\n<blockquote>\n<p>以 <a href=\"https://developer.mozilla.org/en-US/docs/Web/API\">https://developer.mozilla.org/en-US/docs/Web/API</a> 为基础，只实践W3C Recommendation状态的API。</p>\n</blockquote>\n<h2 id=\"目录\"><a href=\"#目录\" class=\"headerlink\" title=\"目录\"></a>目录</h2><ul>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #50 </li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #53 </li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #55 </li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #58 </li>\n<li><input disabled=\"\" type=\"checkbox\"> #59</li>\n</ul>\n"},{"title":"整理ES6：ES6是什么？","date":"2023-07-05T22:18:38.000Z","url":"what-is-es6","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/1](https://github.com/taoliujun/blog/issues/1)\n\n<!--hexo\n---\nurl: what-is-es6\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## 注\n\n本系列文章不是技术教程，只是个人的知识点整理。\n\n## 第一段废话\n\n就在昨晚，我突然冒出了奇怪的心思想要对10年学习工作生涯做一个总结。但今早起来发现无从下手，一是没有优秀的文笔能力，不能科学优雅地整理出重点；二是实在没有牛逼的技术能力，羞于展示于众，这么多年的成长也不过是不断咀嚼大神们的产出。得益于互联网的开源精神和友善的讨论氛围，我这并不天资聪明的脑袋也算是学到了点皮毛能一直工作以温饱无忧。但是说了废话这么多，对写总结仍是没有帮助的，我翻来覆去后打算，不如抓近几年的重点，给某个技术点做一些总结，一来锻炼自己的文笔能力，二来做一次高质量的复习也是能提升自我能力。\n\n## 为什么写ES6？\n\n我从IE6时代开始写JavaScript，到2016年左右迎接真正的成年JS：ES6，接下来是前端爆发时代：CoffeeScript、TypeScript、Webpack、Angular、React、Node、Eslint等百十个技术点或框架层出不穷走向成熟。我和大部分人一样，在有限的精力里不断地消化它们，它们或成为我们工作的一部分，或像IE6一样一去不复返。如上所说，总有一些技术如TypeScript那般坚持了多年之久仍然在坚强的活着，它们如此受欢迎必然有它的闪光点。而ES6正是如此，用稳定优秀的迭代力，现代化的设计理念、牢牢的抓住了各大厂商和开发者的心。\n\n如果看这篇文档的人儿中有一些近几年加入的开发者，我想对大家说，ES6并不是自古就有，它的出生并不一帆风顺，甚至在推出稳定版本后，得到了一些开发者诸如“浏览器都不支持，要你何用”的嘲笑。但得益于polyfill(s)、浏览器厂商、github开源等好多组织的相辅相成，ES6才成为了现在这样。\n\n## ES6到底是什么？\n\n大家或多或少看了ES6的介绍文章，正如每个人心中哈姆雷特是不一样的，我参考总结了一些文章，加上自身的工作经验，对ES6做以下的介绍。\n\nJavaScript在上世纪90年代被提交给标准化组织ECMA，紧接着制定出第一个该语言标准并命名为ECMAScript 1.0，ES便是其简称。JavaScript是该标准的实现之一，被广泛使用，我们可以简单的认为JavaScript就是ECMAScript。\n\n之后该标准不断推出新版本一直到5.1，当要制定6.0标准的时候，发现要加入的语法功能太多了，要不断地推出6.1、6.2，难以规划和命名。于是ECMA组织改变了策略，定于每年6月推出一个新版本并按年份命名，在这一年期间，若干草案得到充分讨论和经过几个草案步骤后加入到新标准中。于是ES 6.0摇身变成ES2015，之后的年份一直推出ES2016、ES2017等。\n\n**虽然从历史上讲，ES6单指ES2015；但大众更容易理解的是，ES6泛指ES2015及以后的新语法功能。**\n\n这些年的互联网文章在特别的介绍ES6的语法功能，用于与ES5进行对比，或许再过一些年，人们不再提起ES6了，那时候的文章会统一讲整个ECMAScript，再有每年6月份单独的讲解ES20xx了吧。\n\n## ES6的相关技术\n\n### polyfill、babel是什么？\n\nES2015之后每一年会发布新的语法功能，我们在代码中使用新语法和功能，但用户的浏览器、Node客户端大概率不是最新版本，并不支持这些新语法。于是发展出两个方案解决这个问题，一是使用babel将新语法编译为老语法（按浏览器版本覆盖率、指定标准等配置，略过不表），二是使用polyfill用老语法模拟出新功能。有了这两者，我们基本可以放心的写出优雅的新代码，然后由它们编译后供浏览器解析。值的说明的是，新功能那么多，现代开发者不需要去维护polyfill列表了，babel中使用core-js库根据browserrc配置项智能的去引入polyfill了。\n\n### 和TypeScript的关系？\n\nTypeScript是对ES的类型补充，它存在一个配置项，来表明在ts检查、编译过程中去支持什么标准的ES。\n\n## 最后，欢迎大家在此讨论\n\n积极汲取大家的讨论，补充我的文章（偷笑）。\n\n\n<!--hexo-->\n\n# core-js\n\n虽然大部分开发者不直接使用core-js，甚至不知道它。我们使用webpack将ES6编译成老语法，实际上它在使用babel，而babel在使用core-js。\n\n它是一个伟大的库，其原理是维护一系列polyfill进行版本、浏览器支持度、草案阶段等维度的分类。你既可以直接引用具体的polyfill，也可以根据草案阶段引入，也可以根据浏览器支持度引入。\n\n它的作者是一个非常有趣，实诚的人。\n\n","source":"_posts/what-is-es6.md","raw":"---\ntitle: \"整理ES6：ES6是什么？\"\ndate: \"2023-07-06T06:18:38Z\"\ncategories:\n  - [JavaScript]\n\nurl: what-is-es6\ntags:\n  - es6\n  - javascript\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/1](https://github.com/taoliujun/blog/issues/1)\n\n<!--hexo\n---\nurl: what-is-es6\ntags:\n  - es6\n  - javascript\n---\n-->\n\n## 注\n\n本系列文章不是技术教程，只是个人的知识点整理。\n\n## 第一段废话\n\n就在昨晚，我突然冒出了奇怪的心思想要对10年学习工作生涯做一个总结。但今早起来发现无从下手，一是没有优秀的文笔能力，不能科学优雅地整理出重点；二是实在没有牛逼的技术能力，羞于展示于众，这么多年的成长也不过是不断咀嚼大神们的产出。得益于互联网的开源精神和友善的讨论氛围，我这并不天资聪明的脑袋也算是学到了点皮毛能一直工作以温饱无忧。但是说了废话这么多，对写总结仍是没有帮助的，我翻来覆去后打算，不如抓近几年的重点，给某个技术点做一些总结，一来锻炼自己的文笔能力，二来做一次高质量的复习也是能提升自我能力。\n\n## 为什么写ES6？\n\n我从IE6时代开始写JavaScript，到2016年左右迎接真正的成年JS：ES6，接下来是前端爆发时代：CoffeeScript、TypeScript、Webpack、Angular、React、Node、Eslint等百十个技术点或框架层出不穷走向成熟。我和大部分人一样，在有限的精力里不断地消化它们，它们或成为我们工作的一部分，或像IE6一样一去不复返。如上所说，总有一些技术如TypeScript那般坚持了多年之久仍然在坚强的活着，它们如此受欢迎必然有它的闪光点。而ES6正是如此，用稳定优秀的迭代力，现代化的设计理念、牢牢的抓住了各大厂商和开发者的心。\n\n如果看这篇文档的人儿中有一些近几年加入的开发者，我想对大家说，ES6并不是自古就有，它的出生并不一帆风顺，甚至在推出稳定版本后，得到了一些开发者诸如“浏览器都不支持，要你何用”的嘲笑。但得益于polyfill(s)、浏览器厂商、github开源等好多组织的相辅相成，ES6才成为了现在这样。\n\n## ES6到底是什么？\n\n大家或多或少看了ES6的介绍文章，正如每个人心中哈姆雷特是不一样的，我参考总结了一些文章，加上自身的工作经验，对ES6做以下的介绍。\n\nJavaScript在上世纪90年代被提交给标准化组织ECMA，紧接着制定出第一个该语言标准并命名为ECMAScript 1.0，ES便是其简称。JavaScript是该标准的实现之一，被广泛使用，我们可以简单的认为JavaScript就是ECMAScript。\n\n之后该标准不断推出新版本一直到5.1，当要制定6.0标准的时候，发现要加入的语法功能太多了，要不断地推出6.1、6.2，难以规划和命名。于是ECMA组织改变了策略，定于每年6月推出一个新版本并按年份命名，在这一年期间，若干草案得到充分讨论和经过几个草案步骤后加入到新标准中。于是ES 6.0摇身变成ES2015，之后的年份一直推出ES2016、ES2017等。\n\n**虽然从历史上讲，ES6单指ES2015；但大众更容易理解的是，ES6泛指ES2015及以后的新语法功能。**\n\n这些年的互联网文章在特别的介绍ES6的语法功能，用于与ES5进行对比，或许再过一些年，人们不再提起ES6了，那时候的文章会统一讲整个ECMAScript，再有每年6月份单独的讲解ES20xx了吧。\n\n## ES6的相关技术\n\n### polyfill、babel是什么？\n\nES2015之后每一年会发布新的语法功能，我们在代码中使用新语法和功能，但用户的浏览器、Node客户端大概率不是最新版本，并不支持这些新语法。于是发展出两个方案解决这个问题，一是使用babel将新语法编译为老语法（按浏览器版本覆盖率、指定标准等配置，略过不表），二是使用polyfill用老语法模拟出新功能。有了这两者，我们基本可以放心的写出优雅的新代码，然后由它们编译后供浏览器解析。值的说明的是，新功能那么多，现代开发者不需要去维护polyfill列表了，babel中使用core-js库根据browserrc配置项智能的去引入polyfill了。\n\n### 和TypeScript的关系？\n\nTypeScript是对ES的类型补充，它存在一个配置项，来表明在ts检查、编译过程中去支持什么标准的ES。\n\n## 最后，欢迎大家在此讨论\n\n积极汲取大家的讨论，补充我的文章（偷笑）。\n\n\n<!--hexo-->\n\n# core-js\n\n虽然大部分开发者不直接使用core-js，甚至不知道它。我们使用webpack将ES6编译成老语法，实际上它在使用babel，而babel在使用core-js。\n\n它是一个伟大的库，其原理是维护一系列polyfill进行版本、浏览器支持度、草案阶段等维度的分类。你既可以直接引用具体的polyfill，也可以根据草案阶段引入，也可以根据浏览器支持度引入。\n\n它的作者是一个非常有趣，实诚的人。\n\n","slug":"what-is-es6","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne7d002ii8oh9zf55mq6","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/1\">https://github.com/taoliujun/blog/issues/1</a></p>\n<!--hexo\n---\nurl: what-is-es6\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"注\"><a href=\"#注\" class=\"headerlink\" title=\"注\"></a>注</h2><p>本系列文章不是技术教程，只是个人的知识点整理。</p>\n<h2 id=\"第一段废话\"><a href=\"#第一段废话\" class=\"headerlink\" title=\"第一段废话\"></a>第一段废话</h2><p>就在昨晚，我突然冒出了奇怪的心思想要对10年学习工作生涯做一个总结。但今早起来发现无从下手，一是没有优秀的文笔能力，不能科学优雅地整理出重点；二是实在没有牛逼的技术能力，羞于展示于众，这么多年的成长也不过是不断咀嚼大神们的产出。得益于互联网的开源精神和友善的讨论氛围，我这并不天资聪明的脑袋也算是学到了点皮毛能一直工作以温饱无忧。但是说了废话这么多，对写总结仍是没有帮助的，我翻来覆去后打算，不如抓近几年的重点，给某个技术点做一些总结，一来锻炼自己的文笔能力，二来做一次高质量的复习也是能提升自我能力。</p>\n<h2 id=\"为什么写ES6？\"><a href=\"#为什么写ES6？\" class=\"headerlink\" title=\"为什么写ES6？\"></a>为什么写ES6？</h2><p>我从IE6时代开始写JavaScript，到2016年左右迎接真正的成年JS：ES6，接下来是前端爆发时代：CoffeeScript、TypeScript、Webpack、Angular、React、Node、Eslint等百十个技术点或框架层出不穷走向成熟。我和大部分人一样，在有限的精力里不断地消化它们，它们或成为我们工作的一部分，或像IE6一样一去不复返。如上所说，总有一些技术如TypeScript那般坚持了多年之久仍然在坚强的活着，它们如此受欢迎必然有它的闪光点。而ES6正是如此，用稳定优秀的迭代力，现代化的设计理念、牢牢的抓住了各大厂商和开发者的心。</p>\n<p>如果看这篇文档的人儿中有一些近几年加入的开发者，我想对大家说，ES6并不是自古就有，它的出生并不一帆风顺，甚至在推出稳定版本后，得到了一些开发者诸如“浏览器都不支持，要你何用”的嘲笑。但得益于polyfill(s)、浏览器厂商、github开源等好多组织的相辅相成，ES6才成为了现在这样。</p>\n<h2 id=\"ES6到底是什么？\"><a href=\"#ES6到底是什么？\" class=\"headerlink\" title=\"ES6到底是什么？\"></a>ES6到底是什么？</h2><p>大家或多或少看了ES6的介绍文章，正如每个人心中哈姆雷特是不一样的，我参考总结了一些文章，加上自身的工作经验，对ES6做以下的介绍。</p>\n<p>JavaScript在上世纪90年代被提交给标准化组织ECMA，紧接着制定出第一个该语言标准并命名为ECMAScript 1.0，ES便是其简称。JavaScript是该标准的实现之一，被广泛使用，我们可以简单的认为JavaScript就是ECMAScript。</p>\n<p>之后该标准不断推出新版本一直到5.1，当要制定6.0标准的时候，发现要加入的语法功能太多了，要不断地推出6.1、6.2，难以规划和命名。于是ECMA组织改变了策略，定于每年6月推出一个新版本并按年份命名，在这一年期间，若干草案得到充分讨论和经过几个草案步骤后加入到新标准中。于是ES 6.0摇身变成ES2015，之后的年份一直推出ES2016、ES2017等。</p>\n<p><strong>虽然从历史上讲，ES6单指ES2015；但大众更容易理解的是，ES6泛指ES2015及以后的新语法功能。</strong></p>\n<p>这些年的互联网文章在特别的介绍ES6的语法功能，用于与ES5进行对比，或许再过一些年，人们不再提起ES6了，那时候的文章会统一讲整个ECMAScript，再有每年6月份单独的讲解ES20xx了吧。</p>\n<h2 id=\"ES6的相关技术\"><a href=\"#ES6的相关技术\" class=\"headerlink\" title=\"ES6的相关技术\"></a>ES6的相关技术</h2><h3 id=\"polyfill、babel是什么？\"><a href=\"#polyfill、babel是什么？\" class=\"headerlink\" title=\"polyfill、babel是什么？\"></a>polyfill、babel是什么？</h3><p>ES2015之后每一年会发布新的语法功能，我们在代码中使用新语法和功能，但用户的浏览器、Node客户端大概率不是最新版本，并不支持这些新语法。于是发展出两个方案解决这个问题，一是使用babel将新语法编译为老语法（按浏览器版本覆盖率、指定标准等配置，略过不表），二是使用polyfill用老语法模拟出新功能。有了这两者，我们基本可以放心的写出优雅的新代码，然后由它们编译后供浏览器解析。值的说明的是，新功能那么多，现代开发者不需要去维护polyfill列表了，babel中使用core-js库根据browserrc配置项智能的去引入polyfill了。</p>\n<h3 id=\"和TypeScript的关系？\"><a href=\"#和TypeScript的关系？\" class=\"headerlink\" title=\"和TypeScript的关系？\"></a>和TypeScript的关系？</h3><p>TypeScript是对ES的类型补充，它存在一个配置项，来表明在ts检查、编译过程中去支持什么标准的ES。</p>\n<h2 id=\"最后，欢迎大家在此讨论\"><a href=\"#最后，欢迎大家在此讨论\" class=\"headerlink\" title=\"最后，欢迎大家在此讨论\"></a>最后，欢迎大家在此讨论</h2><p>积极汲取大家的讨论，补充我的文章（偷笑）。</p>\n<!--hexo-->\n\n<h1 id=\"core-js\"><a href=\"#core-js\" class=\"headerlink\" title=\"core-js\"></a>core-js</h1><p>虽然大部分开发者不直接使用core-js，甚至不知道它。我们使用webpack将ES6编译成老语法，实际上它在使用babel，而babel在使用core-js。</p>\n<p>它是一个伟大的库，其原理是维护一系列polyfill进行版本、浏览器支持度、草案阶段等维度的分类。你既可以直接引用具体的polyfill，也可以根据草案阶段引入，也可以根据浏览器支持度引入。</p>\n<p>它的作者是一个非常有趣，实诚的人。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/1\">https://github.com/taoliujun/blog/issues/1</a></p>\n<!--hexo\n---\nurl: what-is-es6\ntags:\n  - es6\n  - javascript\n---\n-->\n\n<h2 id=\"注\"><a href=\"#注\" class=\"headerlink\" title=\"注\"></a>注</h2><p>本系列文章不是技术教程，只是个人的知识点整理。</p>\n<h2 id=\"第一段废话\"><a href=\"#第一段废话\" class=\"headerlink\" title=\"第一段废话\"></a>第一段废话</h2><p>就在昨晚，我突然冒出了奇怪的心思想要对10年学习工作生涯做一个总结。但今早起来发现无从下手，一是没有优秀的文笔能力，不能科学优雅地整理出重点；二是实在没有牛逼的技术能力，羞于展示于众，这么多年的成长也不过是不断咀嚼大神们的产出。得益于互联网的开源精神和友善的讨论氛围，我这并不天资聪明的脑袋也算是学到了点皮毛能一直工作以温饱无忧。但是说了废话这么多，对写总结仍是没有帮助的，我翻来覆去后打算，不如抓近几年的重点，给某个技术点做一些总结，一来锻炼自己的文笔能力，二来做一次高质量的复习也是能提升自我能力。</p>\n<h2 id=\"为什么写ES6？\"><a href=\"#为什么写ES6？\" class=\"headerlink\" title=\"为什么写ES6？\"></a>为什么写ES6？</h2><p>我从IE6时代开始写JavaScript，到2016年左右迎接真正的成年JS：ES6，接下来是前端爆发时代：CoffeeScript、TypeScript、Webpack、Angular、React、Node、Eslint等百十个技术点或框架层出不穷走向成熟。我和大部分人一样，在有限的精力里不断地消化它们，它们或成为我们工作的一部分，或像IE6一样一去不复返。如上所说，总有一些技术如TypeScript那般坚持了多年之久仍然在坚强的活着，它们如此受欢迎必然有它的闪光点。而ES6正是如此，用稳定优秀的迭代力，现代化的设计理念、牢牢的抓住了各大厂商和开发者的心。</p>\n<p>如果看这篇文档的人儿中有一些近几年加入的开发者，我想对大家说，ES6并不是自古就有，它的出生并不一帆风顺，甚至在推出稳定版本后，得到了一些开发者诸如“浏览器都不支持，要你何用”的嘲笑。但得益于polyfill(s)、浏览器厂商、github开源等好多组织的相辅相成，ES6才成为了现在这样。</p>\n<h2 id=\"ES6到底是什么？\"><a href=\"#ES6到底是什么？\" class=\"headerlink\" title=\"ES6到底是什么？\"></a>ES6到底是什么？</h2><p>大家或多或少看了ES6的介绍文章，正如每个人心中哈姆雷特是不一样的，我参考总结了一些文章，加上自身的工作经验，对ES6做以下的介绍。</p>\n<p>JavaScript在上世纪90年代被提交给标准化组织ECMA，紧接着制定出第一个该语言标准并命名为ECMAScript 1.0，ES便是其简称。JavaScript是该标准的实现之一，被广泛使用，我们可以简单的认为JavaScript就是ECMAScript。</p>\n<p>之后该标准不断推出新版本一直到5.1，当要制定6.0标准的时候，发现要加入的语法功能太多了，要不断地推出6.1、6.2，难以规划和命名。于是ECMA组织改变了策略，定于每年6月推出一个新版本并按年份命名，在这一年期间，若干草案得到充分讨论和经过几个草案步骤后加入到新标准中。于是ES 6.0摇身变成ES2015，之后的年份一直推出ES2016、ES2017等。</p>\n<p><strong>虽然从历史上讲，ES6单指ES2015；但大众更容易理解的是，ES6泛指ES2015及以后的新语法功能。</strong></p>\n<p>这些年的互联网文章在特别的介绍ES6的语法功能，用于与ES5进行对比，或许再过一些年，人们不再提起ES6了，那时候的文章会统一讲整个ECMAScript，再有每年6月份单独的讲解ES20xx了吧。</p>\n<h2 id=\"ES6的相关技术\"><a href=\"#ES6的相关技术\" class=\"headerlink\" title=\"ES6的相关技术\"></a>ES6的相关技术</h2><h3 id=\"polyfill、babel是什么？\"><a href=\"#polyfill、babel是什么？\" class=\"headerlink\" title=\"polyfill、babel是什么？\"></a>polyfill、babel是什么？</h3><p>ES2015之后每一年会发布新的语法功能，我们在代码中使用新语法和功能，但用户的浏览器、Node客户端大概率不是最新版本，并不支持这些新语法。于是发展出两个方案解决这个问题，一是使用babel将新语法编译为老语法（按浏览器版本覆盖率、指定标准等配置，略过不表），二是使用polyfill用老语法模拟出新功能。有了这两者，我们基本可以放心的写出优雅的新代码，然后由它们编译后供浏览器解析。值的说明的是，新功能那么多，现代开发者不需要去维护polyfill列表了，babel中使用core-js库根据browserrc配置项智能的去引入polyfill了。</p>\n<h3 id=\"和TypeScript的关系？\"><a href=\"#和TypeScript的关系？\" class=\"headerlink\" title=\"和TypeScript的关系？\"></a>和TypeScript的关系？</h3><p>TypeScript是对ES的类型补充，它存在一个配置项，来表明在ts检查、编译过程中去支持什么标准的ES。</p>\n<h2 id=\"最后，欢迎大家在此讨论\"><a href=\"#最后，欢迎大家在此讨论\" class=\"headerlink\" title=\"最后，欢迎大家在此讨论\"></a>最后，欢迎大家在此讨论</h2><p>积极汲取大家的讨论，补充我的文章（偷笑）。</p>\n<!--hexo-->\n\n<h1 id=\"core-js\"><a href=\"#core-js\" class=\"headerlink\" title=\"core-js\"></a>core-js</h1><p>虽然大部分开发者不直接使用core-js，甚至不知道它。我们使用webpack将ES6编译成老语法，实际上它在使用babel，而babel在使用core-js。</p>\n<p>它是一个伟大的库，其原理是维护一系列polyfill进行版本、浏览器支持度、草案阶段等维度的分类。你既可以直接引用具体的polyfill，也可以根据草案阶段引入，也可以根据浏览器支持度引入。</p>\n<p>它的作者是一个非常有趣，实诚的人。</p>\n"},{"title":"从Radix看如何优雅写组件","date":"2023-07-05T22:25:58.000Z","url":"write-components-elegantly-using-radix","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/3](https://github.com/taoliujun/blog/issues/3)\n\n<!--hexo\n---\nurl: write-components-elegantly-using-radix\ntags:\n  - radix\n---\n-->\n\n## 组件的困扰\n\n在更早以前，网页应用很简单，开发者自己维护简单的交互组件，通过入参去控制组件有不一样的渲染、样式、交互。后来React/Vue等框架的到来，使网页应用变得愈发复杂，于是使用Element、Ant、Mui之类的UI组件来提高开发效率，但使用后发现一些问题，其中常见的是：  \n1. 难以改变样式。\n1. 几乎不能改变dom结构。\n\n虽然很多组件库提供了css variables、less/sass包等方式让人们来定义样式，但离精细定义差些距离。而且固化的组件dom结构让开发者难以完成产品、UI设计师要求的定制化二次开发。\n\n于是部分人开始从0或基于更基础的UI组件来开发自定义组件以满足自定义样式和dom结构的目的，但问题是维护这些基础组件又是一个麻烦，或者说这些组件放到另一个项目中，是否又需要是另一个dom结构？\n\n于是，有开源项目在解决这样的事，比较出众的是Mui-Base、Radix，它们都旨在提供一套Uncontrolled、Unstyled、Opened的基础组件以便大家二次封装。我在阅读实践了这两个方案后，选择了使用Radix继续深入下去，主要是因为Radix将组件拆分的更为精细。\n\n## Radix的理念\n\n它提出了几个特性，一起看看吧。\n\n### Accessible 可访问性\n\n如果你的应用对可访问性有要求，那Radix会有很大帮助，它遵循了一个 `WAI-ARIA` 的设计规范。但我对可访问性的研究不多，在此不表了。\n\n### Unstyled 无样式\n\n顾名思义的是，它提供的组件都是不带任何样式的，你可以使用任意样式方案去开发。这也解决了上文提到的重要问题：自定义样式。\n\n### Opened 开放\n\n我认为Radix的开发性做到了优秀的程度，它的每个组件都太颗粒了，你可以精细的自由搭配，组装成想要的。\n\n### Incremental 渐进的\n\n可以只安装我们需要用到的组件库，比如`npm install @radix-ui/react-tooltip`。\n\n## 一个小例子\n\n我们要做一个tooltip，如果自己写，需要考虑样式、状态控制、可访问性等。但是在Radix里，采用简单的封装和自定义样式即可：\n\n```typescript\nimport * as Popover from '@radix-ui/react-popover';\nimport { FC } from 'react';\n\nexport const Main: FC = () => {\n    return (\n        <Popover.Root>\n            <Popover.Trigger>点击我</Popover.Trigger>\n            <Popover.Portal>\n                <Popover.Content sideOffset={5}>\n                    要显示的内容\n                    <Popover.Arrow />\n                </Popover.Content>\n            </Popover.Portal>\n        </Popover.Root>\n    );\n};\n```\n\n在上面的代码中，组装Radix提供的popover组件的颗粒，不加任意className就得到一个简单的tooltip，并且\"点击我\"可进行交互。如图：\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271427990.png)\n\n接着，我随便加了点tailwindcss。\n\n```typescript\n return (\n        <Popover.Root>\n            <Popover.Trigger className=\"text-red\">点击我</Popover.Trigger>\n            <Popover.Portal>\n                <Popover.Content className=\"border border-solid border-black\" sideOffset={5}>\n                    要显示的内容\n                    <Popover.Arrow />\n                </Popover.Content>\n            </Popover.Portal>\n        </Popover.Root>\n    );\n```\n\n就得到如图的效果：\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271430207.png)\n\nRadix的组件将几乎所有的state变化，反馈到`data-state`上方便你精细的定制样式了。\n\n## 其他\n\nRadix提供了很多小细节让你可以优雅的封装组件，不限于：\n\n* 提供`forceMount`以方便你的组件能运行完整的动画。\n* 提供`asChild`以方便你更精细的自定义dom。\n* 支持SSR。\n* 提供了许多现成组件，并且足够颗粒化，让你更快更优化的定制出自己的组件哟。\n\n相比较使用它，理解它的理念才能消化为自己的知识，个人认为即便是自己开发的基础组件，以精细颗粒控制为目标，也不失为一个很棒的思路。\n\n## 参考\n\n* https://www.radix-ui.com/\n\n\n\n\n","source":"_posts/write-components-elegantly-using-radix.md","raw":"---\ntitle: \"从Radix看如何优雅写组件\"\ndate: \"2023-07-06T06:25:58Z\"\ncategories:\n  - [React]\n\nurl: write-components-elegantly-using-radix\ntags:\n  - radix\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/3](https://github.com/taoliujun/blog/issues/3)\n\n<!--hexo\n---\nurl: write-components-elegantly-using-radix\ntags:\n  - radix\n---\n-->\n\n## 组件的困扰\n\n在更早以前，网页应用很简单，开发者自己维护简单的交互组件，通过入参去控制组件有不一样的渲染、样式、交互。后来React/Vue等框架的到来，使网页应用变得愈发复杂，于是使用Element、Ant、Mui之类的UI组件来提高开发效率，但使用后发现一些问题，其中常见的是：  \n1. 难以改变样式。\n1. 几乎不能改变dom结构。\n\n虽然很多组件库提供了css variables、less/sass包等方式让人们来定义样式，但离精细定义差些距离。而且固化的组件dom结构让开发者难以完成产品、UI设计师要求的定制化二次开发。\n\n于是部分人开始从0或基于更基础的UI组件来开发自定义组件以满足自定义样式和dom结构的目的，但问题是维护这些基础组件又是一个麻烦，或者说这些组件放到另一个项目中，是否又需要是另一个dom结构？\n\n于是，有开源项目在解决这样的事，比较出众的是Mui-Base、Radix，它们都旨在提供一套Uncontrolled、Unstyled、Opened的基础组件以便大家二次封装。我在阅读实践了这两个方案后，选择了使用Radix继续深入下去，主要是因为Radix将组件拆分的更为精细。\n\n## Radix的理念\n\n它提出了几个特性，一起看看吧。\n\n### Accessible 可访问性\n\n如果你的应用对可访问性有要求，那Radix会有很大帮助，它遵循了一个 `WAI-ARIA` 的设计规范。但我对可访问性的研究不多，在此不表了。\n\n### Unstyled 无样式\n\n顾名思义的是，它提供的组件都是不带任何样式的，你可以使用任意样式方案去开发。这也解决了上文提到的重要问题：自定义样式。\n\n### Opened 开放\n\n我认为Radix的开发性做到了优秀的程度，它的每个组件都太颗粒了，你可以精细的自由搭配，组装成想要的。\n\n### Incremental 渐进的\n\n可以只安装我们需要用到的组件库，比如`npm install @radix-ui/react-tooltip`。\n\n## 一个小例子\n\n我们要做一个tooltip，如果自己写，需要考虑样式、状态控制、可访问性等。但是在Radix里，采用简单的封装和自定义样式即可：\n\n```typescript\nimport * as Popover from '@radix-ui/react-popover';\nimport { FC } from 'react';\n\nexport const Main: FC = () => {\n    return (\n        <Popover.Root>\n            <Popover.Trigger>点击我</Popover.Trigger>\n            <Popover.Portal>\n                <Popover.Content sideOffset={5}>\n                    要显示的内容\n                    <Popover.Arrow />\n                </Popover.Content>\n            </Popover.Portal>\n        </Popover.Root>\n    );\n};\n```\n\n在上面的代码中，组装Radix提供的popover组件的颗粒，不加任意className就得到一个简单的tooltip，并且\"点击我\"可进行交互。如图：\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271427990.png)\n\n接着，我随便加了点tailwindcss。\n\n```typescript\n return (\n        <Popover.Root>\n            <Popover.Trigger className=\"text-red\">点击我</Popover.Trigger>\n            <Popover.Portal>\n                <Popover.Content className=\"border border-solid border-black\" sideOffset={5}>\n                    要显示的内容\n                    <Popover.Arrow />\n                </Popover.Content>\n            </Popover.Portal>\n        </Popover.Root>\n    );\n```\n\n就得到如图的效果：\n\n![](https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271430207.png)\n\nRadix的组件将几乎所有的state变化，反馈到`data-state`上方便你精细的定制样式了。\n\n## 其他\n\nRadix提供了很多小细节让你可以优雅的封装组件，不限于：\n\n* 提供`forceMount`以方便你的组件能运行完整的动画。\n* 提供`asChild`以方便你更精细的自定义dom。\n* 支持SSR。\n* 提供了许多现成组件，并且足够颗粒化，让你更快更优化的定制出自己的组件哟。\n\n相比较使用它，理解它的理念才能消化为自己的知识，个人认为即便是自己开发的基础组件，以精细颗粒控制为目标，也不失为一个很棒的思路。\n\n## 参考\n\n* https://www.radix-ui.com/\n\n\n\n\n","slug":"write-components-elegantly-using-radix","published":1,"updated":"2024-03-01T10:04:58.540Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clt8hne7e002li8ohcgku7isj","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/3\">https://github.com/taoliujun/blog/issues/3</a></p>\n<!--hexo\n---\nurl: write-components-elegantly-using-radix\ntags:\n  - radix\n---\n-->\n\n<h2 id=\"组件的困扰\"><a href=\"#组件的困扰\" class=\"headerlink\" title=\"组件的困扰\"></a>组件的困扰</h2><p>在更早以前，网页应用很简单，开发者自己维护简单的交互组件，通过入参去控制组件有不一样的渲染、样式、交互。后来React&#x2F;Vue等框架的到来，使网页应用变得愈发复杂，于是使用Element、Ant、Mui之类的UI组件来提高开发效率，但使用后发现一些问题，其中常见的是：  </p>\n<ol>\n<li>难以改变样式。</li>\n<li>几乎不能改变dom结构。</li>\n</ol>\n<p>虽然很多组件库提供了css variables、less&#x2F;sass包等方式让人们来定义样式，但离精细定义差些距离。而且固化的组件dom结构让开发者难以完成产品、UI设计师要求的定制化二次开发。</p>\n<p>于是部分人开始从0或基于更基础的UI组件来开发自定义组件以满足自定义样式和dom结构的目的，但问题是维护这些基础组件又是一个麻烦，或者说这些组件放到另一个项目中，是否又需要是另一个dom结构？</p>\n<p>于是，有开源项目在解决这样的事，比较出众的是Mui-Base、Radix，它们都旨在提供一套Uncontrolled、Unstyled、Opened的基础组件以便大家二次封装。我在阅读实践了这两个方案后，选择了使用Radix继续深入下去，主要是因为Radix将组件拆分的更为精细。</p>\n<h2 id=\"Radix的理念\"><a href=\"#Radix的理念\" class=\"headerlink\" title=\"Radix的理念\"></a>Radix的理念</h2><p>它提出了几个特性，一起看看吧。</p>\n<h3 id=\"Accessible-可访问性\"><a href=\"#Accessible-可访问性\" class=\"headerlink\" title=\"Accessible 可访问性\"></a>Accessible 可访问性</h3><p>如果你的应用对可访问性有要求，那Radix会有很大帮助，它遵循了一个 <code>WAI-ARIA</code> 的设计规范。但我对可访问性的研究不多，在此不表了。</p>\n<h3 id=\"Unstyled-无样式\"><a href=\"#Unstyled-无样式\" class=\"headerlink\" title=\"Unstyled 无样式\"></a>Unstyled 无样式</h3><p>顾名思义的是，它提供的组件都是不带任何样式的，你可以使用任意样式方案去开发。这也解决了上文提到的重要问题：自定义样式。</p>\n<h3 id=\"Opened-开放\"><a href=\"#Opened-开放\" class=\"headerlink\" title=\"Opened 开放\"></a>Opened 开放</h3><p>我认为Radix的开发性做到了优秀的程度，它的每个组件都太颗粒了，你可以精细的自由搭配，组装成想要的。</p>\n<h3 id=\"Incremental-渐进的\"><a href=\"#Incremental-渐进的\" class=\"headerlink\" title=\"Incremental 渐进的\"></a>Incremental 渐进的</h3><p>可以只安装我们需要用到的组件库，比如<code>npm install @radix-ui/react-tooltip</code>。</p>\n<h2 id=\"一个小例子\"><a href=\"#一个小例子\" class=\"headerlink\" title=\"一个小例子\"></a>一个小例子</h2><p>我们要做一个tooltip，如果自己写，需要考虑样式、状态控制、可访问性等。但是在Radix里，采用简单的封装和自定义样式即可：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">import</span> * <span class=\"keyword\">as</span> <span class=\"title class_\">Popover</span> <span class=\"keyword\">from</span> <span class=\"string\">&#x27;@radix-ui/react-popover&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; <span class=\"variable constant_\">FC</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;react&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">const</span> <span class=\"title class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> (</span><br><span class=\"line\">        <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">Popover.Trigger</span>&gt;</span>点击我<span class=\"tag\">&lt;/<span class=\"name\">Popover.Trigger</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                <span class=\"tag\">&lt;<span class=\"name\">Popover.Content</span> <span class=\"attr\">sideOffset</span>=<span class=\"string\">&#123;5&#125;</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\">Popover.Arrow</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                <span class=\"tag\">&lt;/<span class=\"name\">Popover.Content</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;/<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">        <span class=\"tag\">&lt;/<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\">    );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>在上面的代码中，组装Radix提供的popover组件的颗粒，不加任意className就得到一个简单的tooltip，并且”点击我”可进行交互。如图：</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271427990.png\"></p>\n<p>接着，我随便加了点tailwindcss。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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\">return</span> (</span><br><span class=\"line\">       <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">           <span class=\"tag\">&lt;<span class=\"name\">Popover.Trigger</span> <span class=\"attr\">className</span>=<span class=\"string\">&quot;text-red&quot;</span>&gt;</span>点击我<span class=\"tag\">&lt;/<span class=\"name\">Popover.Trigger</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">           <span class=\"tag\">&lt;<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">               <span class=\"tag\">&lt;<span class=\"name\">Popover.Content</span> <span class=\"attr\">className</span>=<span class=\"string\">&quot;border border-solid border-black&quot;</span> <span class=\"attr\">sideOffset</span>=<span class=\"string\">&#123;5&#125;</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\">Popover.Arrow</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">               <span class=\"tag\">&lt;/<span class=\"name\">Popover.Content</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">           <span class=\"tag\">&lt;/<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">       <span class=\"tag\">&lt;/<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\">   );</span><br></pre></td></tr></table></figure>\n\n<p>就得到如图的效果：</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271430207.png\"></p>\n<p>Radix的组件将几乎所有的state变化，反馈到<code>data-state</code>上方便你精细的定制样式了。</p>\n<h2 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h2><p>Radix提供了很多小细节让你可以优雅的封装组件，不限于：</p>\n<ul>\n<li>提供<code>forceMount</code>以方便你的组件能运行完整的动画。</li>\n<li>提供<code>asChild</code>以方便你更精细的自定义dom。</li>\n<li>支持SSR。</li>\n<li>提供了许多现成组件，并且足够颗粒化，让你更快更优化的定制出自己的组件哟。</li>\n</ul>\n<p>相比较使用它，理解它的理念才能消化为自己的知识，个人认为即便是自己开发的基础组件，以精细颗粒控制为目标，也不失为一个很棒的思路。</p>\n<h2 id=\"参考\"><a href=\"#参考\" class=\"headerlink\" title=\"参考\"></a>参考</h2><ul>\n<li><a href=\"https://www.radix-ui.com/\">https://www.radix-ui.com/</a></li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/3\">https://github.com/taoliujun/blog/issues/3</a></p>\n<!--hexo\n---\nurl: write-components-elegantly-using-radix\ntags:\n  - radix\n---\n-->\n\n<h2 id=\"组件的困扰\"><a href=\"#组件的困扰\" class=\"headerlink\" title=\"组件的困扰\"></a>组件的困扰</h2><p>在更早以前，网页应用很简单，开发者自己维护简单的交互组件，通过入参去控制组件有不一样的渲染、样式、交互。后来React&#x2F;Vue等框架的到来，使网页应用变得愈发复杂，于是使用Element、Ant、Mui之类的UI组件来提高开发效率，但使用后发现一些问题，其中常见的是：  </p>\n<ol>\n<li>难以改变样式。</li>\n<li>几乎不能改变dom结构。</li>\n</ol>\n<p>虽然很多组件库提供了css variables、less&#x2F;sass包等方式让人们来定义样式，但离精细定义差些距离。而且固化的组件dom结构让开发者难以完成产品、UI设计师要求的定制化二次开发。</p>\n<p>于是部分人开始从0或基于更基础的UI组件来开发自定义组件以满足自定义样式和dom结构的目的，但问题是维护这些基础组件又是一个麻烦，或者说这些组件放到另一个项目中，是否又需要是另一个dom结构？</p>\n<p>于是，有开源项目在解决这样的事，比较出众的是Mui-Base、Radix，它们都旨在提供一套Uncontrolled、Unstyled、Opened的基础组件以便大家二次封装。我在阅读实践了这两个方案后，选择了使用Radix继续深入下去，主要是因为Radix将组件拆分的更为精细。</p>\n<h2 id=\"Radix的理念\"><a href=\"#Radix的理念\" class=\"headerlink\" title=\"Radix的理念\"></a>Radix的理念</h2><p>它提出了几个特性，一起看看吧。</p>\n<h3 id=\"Accessible-可访问性\"><a href=\"#Accessible-可访问性\" class=\"headerlink\" title=\"Accessible 可访问性\"></a>Accessible 可访问性</h3><p>如果你的应用对可访问性有要求，那Radix会有很大帮助，它遵循了一个 <code>WAI-ARIA</code> 的设计规范。但我对可访问性的研究不多，在此不表了。</p>\n<h3 id=\"Unstyled-无样式\"><a href=\"#Unstyled-无样式\" class=\"headerlink\" title=\"Unstyled 无样式\"></a>Unstyled 无样式</h3><p>顾名思义的是，它提供的组件都是不带任何样式的，你可以使用任意样式方案去开发。这也解决了上文提到的重要问题：自定义样式。</p>\n<h3 id=\"Opened-开放\"><a href=\"#Opened-开放\" class=\"headerlink\" title=\"Opened 开放\"></a>Opened 开放</h3><p>我认为Radix的开发性做到了优秀的程度，它的每个组件都太颗粒了，你可以精细的自由搭配，组装成想要的。</p>\n<h3 id=\"Incremental-渐进的\"><a href=\"#Incremental-渐进的\" class=\"headerlink\" title=\"Incremental 渐进的\"></a>Incremental 渐进的</h3><p>可以只安装我们需要用到的组件库，比如<code>npm install @radix-ui/react-tooltip</code>。</p>\n<h2 id=\"一个小例子\"><a href=\"#一个小例子\" class=\"headerlink\" title=\"一个小例子\"></a>一个小例子</h2><p>我们要做一个tooltip，如果自己写，需要考虑样式、状态控制、可访问性等。但是在Radix里，采用简单的封装和自定义样式即可：</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><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\">import</span> * <span class=\"keyword\">as</span> <span class=\"title class_\">Popover</span> <span class=\"keyword\">from</span> <span class=\"string\">&#x27;@radix-ui/react-popover&#x27;</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> &#123; <span class=\"variable constant_\">FC</span> &#125; <span class=\"keyword\">from</span> <span class=\"string\">&#x27;react&#x27;</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">const</span> <span class=\"title class_\">Main</span>: <span class=\"variable constant_\">FC</span> = <span class=\"function\">() =&gt;</span> &#123;</span><br><span class=\"line\">    <span class=\"keyword\">return</span> (</span><br><span class=\"line\">        <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">Popover.Trigger</span>&gt;</span>点击我<span class=\"tag\">&lt;/<span class=\"name\">Popover.Trigger</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                <span class=\"tag\">&lt;<span class=\"name\">Popover.Content</span> <span class=\"attr\">sideOffset</span>=<span class=\"string\">&#123;5&#125;</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\">Popover.Arrow</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">                <span class=\"tag\">&lt;/<span class=\"name\">Popover.Content</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">            <span class=\"tag\">&lt;/<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">        <span class=\"tag\">&lt;/<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\">    );</span><br><span class=\"line\">&#125;;</span><br></pre></td></tr></table></figure>\n\n<p>在上面的代码中，组装Radix提供的popover组件的颗粒，不加任意className就得到一个简单的tooltip，并且”点击我”可进行交互。如图：</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271427990.png\"></p>\n<p>接着，我随便加了点tailwindcss。</p>\n<figure class=\"highlight typescript\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><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\">return</span> (</span><br><span class=\"line\">       <span class=\"language-xml\"><span class=\"tag\">&lt;<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">           <span class=\"tag\">&lt;<span class=\"name\">Popover.Trigger</span> <span class=\"attr\">className</span>=<span class=\"string\">&quot;text-red&quot;</span>&gt;</span>点击我<span class=\"tag\">&lt;/<span class=\"name\">Popover.Trigger</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">           <span class=\"tag\">&lt;<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">               <span class=\"tag\">&lt;<span class=\"name\">Popover.Content</span> <span class=\"attr\">className</span>=<span class=\"string\">&quot;border border-solid border-black&quot;</span> <span class=\"attr\">sideOffset</span>=<span class=\"string\">&#123;5&#125;</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\">Popover.Arrow</span> /&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">               <span class=\"tag\">&lt;/<span class=\"name\">Popover.Content</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">           <span class=\"tag\">&lt;/<span class=\"name\">Popover.Portal</span>&gt;</span></span></span><br><span class=\"line\"><span class=\"language-xml\">       <span class=\"tag\">&lt;/<span class=\"name\">Popover.Root</span>&gt;</span></span></span><br><span class=\"line\">   );</span><br></pre></td></tr></table></figure>\n\n<p>就得到如图的效果：</p>\n<p><img src=\"https://cdn.jsdelivr.net/gh/taoliujun/static/blog/202306271430207.png\"></p>\n<p>Radix的组件将几乎所有的state变化，反馈到<code>data-state</code>上方便你精细的定制样式了。</p>\n<h2 id=\"其他\"><a href=\"#其他\" class=\"headerlink\" title=\"其他\"></a>其他</h2><p>Radix提供了很多小细节让你可以优雅的封装组件，不限于：</p>\n<ul>\n<li>提供<code>forceMount</code>以方便你的组件能运行完整的动画。</li>\n<li>提供<code>asChild</code>以方便你更精细的自定义dom。</li>\n<li>支持SSR。</li>\n<li>提供了许多现成组件，并且足够颗粒化，让你更快更优化的定制出自己的组件哟。</li>\n</ul>\n<p>相比较使用它，理解它的理念才能消化为自己的知识，个人认为即便是自己开发的基础组件，以精细颗粒控制为目标，也不失为一个很棒的思路。</p>\n<h2 id=\"参考\"><a href=\"#参考\" class=\"headerlink\" title=\"参考\"></a>参考</h2><ul>\n<li><a href=\"https://www.radix-ui.com/\">https://www.radix-ui.com/</a></li>\n</ul>\n"}],"PostAsset":[],"PostCategory":[{"post_id":"clt8hne6n0005i8ohal4i8rav","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne6s000ei8ohbwc9awyh"},{"post_id":"clt8hne6o0006i8oh1ydc6nlv","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne6t000hi8oh0h0j0cna"},{"post_id":"clt8hne6g0000i8ohaup9dgy1","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne6v000li8oh1pendp9x"},{"post_id":"clt8hne6g0000i8ohaup9dgy1","category_id":"clt8hne6p0008i8oh71e23h3h","_id":"clt8hne6w000oi8oh0jxj7hoc"},{"post_id":"clt8hne6p0009i8ohdlk8aqi7","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne6x000ri8oh4tfq37qm"},{"post_id":"clt8hne6j0001i8ohamwvdd40","category_id":"clt8hne6p0008i8oh71e23h3h","_id":"clt8hne6y000ti8ohfnnxa73i"},{"post_id":"clt8hne6q000ai8oh3czc7dtv","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne6z000vi8ohb07e8fjm"},{"post_id":"clt8hne6s000di8ohhg557c68","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne70000zi8oh4w12fs8l"},{"post_id":"clt8hne6m0003i8ohghnpfqye","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne710012i8oh3b3e1v4u"},{"post_id":"clt8hne6t000gi8ohfc7n582s","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne720015i8ohem0g5v23"},{"post_id":"clt8hne6u000ki8ohhd0t9mcp","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne730017i8oh9y2pbc0q"},{"post_id":"clt8hne6w000ni8oh3793hs4v","category_id":"clt8hne6p0008i8oh71e23h3h","_id":"clt8hne74001bi8oh9zml22ql"},{"post_id":"clt8hne6x000qi8ohhrsiazvn","category_id":"clt8hne6p0008i8oh71e23h3h","_id":"clt8hne74001ei8oh1t7tcwxb"},{"post_id":"clt8hne6y000si8oh4dkm54lp","category_id":"clt8hne6p0008i8oh71e23h3h","_id":"clt8hne75001ii8oh9a9l6235"},{"post_id":"clt8hne6z000ui8ohc8en5vzx","category_id":"clt8hne6p0008i8oh71e23h3h","_id":"clt8hne76001ki8oh9o643rdf"},{"post_id":"clt8hne70000yi8ohfpzzd528","category_id":"clt8hne6p0008i8oh71e23h3h","_id":"clt8hne77001oi8oh1jt31ed6"},{"post_id":"clt8hne710011i8oh7eok4ahc","category_id":"clt8hne6p0008i8oh71e23h3h","_id":"clt8hne78001si8oh999y925h"},{"post_id":"clt8hne720014i8ohgkmn24c9","category_id":"clt8hne6p0008i8oh71e23h3h","_id":"clt8hne78001vi8ohchik79ez"},{"post_id":"clt8hne720016i8ohef8w3v84","category_id":"clt8hne6p0008i8oh71e23h3h","_id":"clt8hne79001yi8oh84ah7zmq"},{"post_id":"clt8hne75001ji8oh9i2l3g9s","category_id":"clt8hne75001hi8ohbu9u46rh","_id":"clt8hne7a0022i8ohdwxo5osa"},{"post_id":"clt8hne73001ai8ohb0bo3x82","category_id":"clt8hne75001hi8ohbu9u46rh","_id":"clt8hne7b0026i8oh8zoh2413"},{"post_id":"clt8hne76001ni8oh2e325nn8","category_id":"clt8hne6p0008i8oh71e23h3h","_id":"clt8hne7b0029i8ohhrxr8dkk"},{"post_id":"clt8hne74001di8ohdnmwdmji","category_id":"clt8hne75001hi8ohbu9u46rh","_id":"clt8hne7c002ci8ohbgsl3ov8"},{"post_id":"clt8hne79001xi8oh5ietgq6s","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne7d002gi8ohhemcbk96"},{"post_id":"clt8hne75001gi8oh0ik11rjp","category_id":"clt8hne75001hi8ohbu9u46rh","_id":"clt8hne7e002ji8ohgacfe4he"},{"post_id":"clt8hne7a0021i8ohdd78avcq","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne7e002mi8ohhp9ngw31"},{"post_id":"clt8hne7a0025i8ohhasq15oj","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne7j002oi8oh67rlehvt"},{"post_id":"clt8hne77001ri8oh2t85c2e4","category_id":"clt8hne7a0023i8oh66x482p2","_id":"clt8hne7j002ri8ohfinagspa"},{"post_id":"clt8hne7b0028i8oh6rf36zu9","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne7j002ti8ohedise2xt"},{"post_id":"clt8hne7c002bi8ohfzyr9vej","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne7k002wi8oh6osgg21g"},{"post_id":"clt8hne78001ui8ohbxt1guu9","category_id":"clt8hne7a0023i8oh66x482p2","_id":"clt8hne7k002xi8ohfjhx7fwz"},{"post_id":"clt8hne7d002fi8oh4cqmc2up","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne7k0030i8oh5k7l09ts"},{"post_id":"clt8hne7d002ii8oh9zf55mq6","category_id":"clt8hne6n0004i8oh43m1hw74","_id":"clt8hne7k0032i8oh1s370y8n"},{"post_id":"clt8hne7e002li8ohcgku7isj","category_id":"clt8hne75001hi8ohbu9u46rh","_id":"clt8hne7l0035i8oh60fy2zej"}],"PostTag":[{"post_id":"clt8hne6g0000i8ohaup9dgy1","tag_id":"clt8hne6l0002i8oh4oh19l47","_id":"clt8hne6s000fi8oh7mwu9x71"},{"post_id":"clt8hne6g0000i8ohaup9dgy1","tag_id":"clt8hne6o0007i8ohe0by9lrz","_id":"clt8hne6u000ii8ohcaj2ayrv"},{"post_id":"clt8hne6j0001i8ohamwvdd40","tag_id":"clt8hne6r000bi8oh9j8vagbm","_id":"clt8hne6v000mi8ohgo2n1hbr"},{"post_id":"clt8hne6m0003i8ohghnpfqye","tag_id":"clt8hne6u000ji8oh7d2m3zs8","_id":"clt8hne70000xi8oh888c7xzt"},{"post_id":"clt8hne6m0003i8ohghnpfqye","tag_id":"clt8hne6x000pi8oh2i4ab076","_id":"clt8hne710010i8oh27bnhgkw"},{"post_id":"clt8hne6n0005i8ohal4i8rav","tag_id":"clt8hne6u000ji8oh7d2m3zs8","_id":"clt8hne730019i8oh6mh6b7gl"},{"post_id":"clt8hne6n0005i8ohal4i8rav","tag_id":"clt8hne6x000pi8oh2i4ab076","_id":"clt8hne74001ci8oh9i7qfydc"},{"post_id":"clt8hne6o0006i8oh1ydc6nlv","tag_id":"clt8hne6u000ji8oh7d2m3zs8","_id":"clt8hne76001mi8oh9c6m26la"},{"post_id":"clt8hne6o0006i8oh1ydc6nlv","tag_id":"clt8hne6x000pi8oh2i4ab076","_id":"clt8hne77001qi8oh1liu4j86"},{"post_id":"clt8hne6p0009i8ohdlk8aqi7","tag_id":"clt8hne6u000ji8oh7d2m3zs8","_id":"clt8hne790020i8ohhmlffmdt"},{"post_id":"clt8hne6p0009i8ohdlk8aqi7","tag_id":"clt8hne6x000pi8oh2i4ab076","_id":"clt8hne7a0024i8ohhkascq4k"},{"post_id":"clt8hne6q000ai8oh3czc7dtv","tag_id":"clt8hne6u000ji8oh7d2m3zs8","_id":"clt8hne7d002ei8ohabz9bk2p"},{"post_id":"clt8hne6q000ai8oh3czc7dtv","tag_id":"clt8hne6x000pi8oh2i4ab076","_id":"clt8hne7d002hi8ohc7gh0xvo"},{"post_id":"clt8hne7d002ii8oh9zf55mq6","tag_id":"clt8hne6u000ji8oh7d2m3zs8","_id":"clt8hne7f002ni8oh6mag3syb"},{"post_id":"clt8hne7d002ii8oh9zf55mq6","tag_id":"clt8hne6x000pi8oh2i4ab076","_id":"clt8hne7j002qi8oh39b5441q"},{"post_id":"clt8hne6s000di8ohhg557c68","tag_id":"clt8hne6u000ji8oh7d2m3zs8","_id":"clt8hne7j002si8oh2p985fd2"},{"post_id":"clt8hne6s000di8ohhg557c68","tag_id":"clt8hne6x000pi8oh2i4ab076","_id":"clt8hne7k002vi8oh39qvfycx"},{"post_id":"clt8hne6t000gi8ohfc7n582s","tag_id":"clt8hne6u000ji8oh7d2m3zs8","_id":"clt8hne7k002zi8oh22am3gpt"},{"post_id":"clt8hne6t000gi8ohfc7n582s","tag_id":"clt8hne6x000pi8oh2i4ab076","_id":"clt8hne7k0031i8oh112p7ii9"},{"post_id":"clt8hne6u000ki8ohhd0t9mcp","tag_id":"clt8hne6u000ji8oh7d2m3zs8","_id":"clt8hne7l0034i8ohfmstdtv8"},{"post_id":"clt8hne6u000ki8ohhd0t9mcp","tag_id":"clt8hne6x000pi8oh2i4ab076","_id":"clt8hne7l0036i8oh0cifdx0b"},{"post_id":"clt8hne6w000ni8oh3793hs4v","tag_id":"clt8hne7k0033i8ohf15b3qnn","_id":"clt8hne7l0038i8ohh1x67qgo"},{"post_id":"clt8hne6x000qi8ohhrsiazvn","tag_id":"clt8hne7k0033i8ohf15b3qnn","_id":"clt8hne7l003ai8ohbopc4oqs"},{"post_id":"clt8hne6y000si8oh4dkm54lp","tag_id":"clt8hne7k0033i8ohf15b3qnn","_id":"clt8hne7m003ci8oh5y2we3i4"},{"post_id":"clt8hne6z000ui8ohc8en5vzx","tag_id":"clt8hne7k0033i8ohf15b3qnn","_id":"clt8hne7m003ei8ohhc7f6uj0"},{"post_id":"clt8hne70000yi8ohfpzzd528","tag_id":"clt8hne7k0033i8ohf15b3qnn","_id":"clt8hne7n003gi8oh86xxha22"},{"post_id":"clt8hne710011i8oh7eok4ahc","tag_id":"clt8hne7k0033i8ohf15b3qnn","_id":"clt8hne7n003ii8ohg2zkg53u"},{"post_id":"clt8hne720014i8ohgkmn24c9","tag_id":"clt8hne7k0033i8ohf15b3qnn","_id":"clt8hne7n003ki8oh2v482a35"},{"post_id":"clt8hne720016i8ohef8w3v84","tag_id":"clt8hne7k0033i8ohf15b3qnn","_id":"clt8hne7o003mi8ohblqv5uas"},{"post_id":"clt8hne73001ai8ohb0bo3x82","tag_id":"clt8hne7n003li8oh9s314gaj","_id":"clt8hne7o003oi8ohhktlcft3"},{"post_id":"clt8hne74001di8ohdnmwdmji","tag_id":"clt8hne7n003li8oh9s314gaj","_id":"clt8hne7o003qi8oher1xft6e"},{"post_id":"clt8hne75001gi8oh0ik11rjp","tag_id":"clt8hne7n003li8oh9s314gaj","_id":"clt8hne7p003si8oh4i1h5u1s"},{"post_id":"clt8hne75001ji8oh9i2l3g9s","tag_id":"clt8hne7o003ri8oh81hpa2d4","_id":"clt8hne7p003vi8ohb3akdoec"},{"post_id":"clt8hne75001ji8oh9i2l3g9s","tag_id":"clt8hne7p003ti8oh7dgob6ax","_id":"clt8hne7p003wi8ohgfwma9s2"},{"post_id":"clt8hne76001ni8oh2e325nn8","tag_id":"clt8hne7p003ui8ohezybdqlc","_id":"clt8hne7q003yi8ohe7250uf1"},{"post_id":"clt8hne77001ri8oh2t85c2e4","tag_id":"clt8hne7p003xi8oh0moxanf7","_id":"clt8hne7q0040i8ohhswl0weh"},{"post_id":"clt8hne78001ui8ohbxt1guu9","tag_id":"clt8hne7p003xi8oh0moxanf7","_id":"clt8hne7q0042i8ohf34d3thq"},{"post_id":"clt8hne79001xi8oh5ietgq6s","tag_id":"clt8hne7q0041i8oh1vgpdupo","_id":"clt8hne7r0045i8oh5vr45nhi"},{"post_id":"clt8hne79001xi8oh5ietgq6s","tag_id":"clt8hne7q0043i8ohdn40dwpr","_id":"clt8hne7r0046i8ohev36cc4l"},{"post_id":"clt8hne7a0021i8ohdd78avcq","tag_id":"clt8hne7q0041i8oh1vgpdupo","_id":"clt8hne7r0049i8oh1f5m0r56"},{"post_id":"clt8hne7a0021i8ohdd78avcq","tag_id":"clt8hne7r0047i8oh24dm7dug","_id":"clt8hne7r004ai8ohg9xyeczg"},{"post_id":"clt8hne7a0025i8ohhasq15oj","tag_id":"clt8hne7q0041i8oh1vgpdupo","_id":"clt8hne7s004di8ohdy9e6ytz"},{"post_id":"clt8hne7a0025i8ohhasq15oj","tag_id":"clt8hne7r004bi8oh5u4zb7ub","_id":"clt8hne7s004ei8ohdaf0833v"},{"post_id":"clt8hne7b0028i8oh6rf36zu9","tag_id":"clt8hne7q0041i8oh1vgpdupo","_id":"clt8hne7s004hi8ohah9l8ixg"},{"post_id":"clt8hne7b0028i8oh6rf36zu9","tag_id":"clt8hne7s004fi8ohfh101w7v","_id":"clt8hne7s004ii8oh3ztyegl3"},{"post_id":"clt8hne7c002bi8ohfzyr9vej","tag_id":"clt8hne7q0041i8oh1vgpdupo","_id":"clt8hne7t004li8ohhykf9fn9"},{"post_id":"clt8hne7c002bi8ohfzyr9vej","tag_id":"clt8hne7s004ji8ohfjde0682","_id":"clt8hne7t004mi8oh2aofb3co"},{"post_id":"clt8hne7d002fi8oh4cqmc2up","tag_id":"clt8hne7q0041i8oh1vgpdupo","_id":"clt8hne7t004oi8oh775x0rx9"},{"post_id":"clt8hne7e002li8ohcgku7isj","tag_id":"clt8hne7t004ni8ohg1gw4var","_id":"clt8hne7t004pi8ohbhqmeqm4"}],"Tag":[{"name":"ast","_id":"clt8hne6l0002i8oh4oh19l47"},{"name":"css module","_id":"clt8hne6o0007i8ohe0by9lrz"},{"name":"changesets","_id":"clt8hne6r000bi8oh9j8vagbm"},{"name":"es6","_id":"clt8hne6u000ji8oh7d2m3zs8"},{"name":"javascript","_id":"clt8hne6x000pi8oh2i4ab076"},{"name":"github actions","_id":"clt8hne7k0033i8ohf15b3qnn"},{"name":"react","_id":"clt8hne7n003li8oh9s314gaj"},{"name":"zustand","_id":"clt8hne7o003ri8oh81hpa2d4"},{"name":"react store","_id":"clt8hne7p003ti8oh7dgob6ax"},{"name":"jest","_id":"clt8hne7p003ui8ohezybdqlc"},{"name":"typescript","_id":"clt8hne7p003xi8oh0moxanf7"},{"name":"webapi","_id":"clt8hne7q0041i8oh1vgpdupo"},{"name":"Background Tasks","_id":"clt8hne7q0043i8ohdn40dwpr"},{"name":"Battery Status","_id":"clt8hne7r0047i8oh24dm7dug"},{"name":"Badging","_id":"clt8hne7r004bi8oh5u4zb7ub"},{"name":"Beacon","_id":"clt8hne7s004fi8ohfh101w7v"},{"name":"Broadcast Channel","_id":"clt8hne7s004ji8ohfjde0682"},{"name":"radix","_id":"clt8hne7t004ni8ohg1gw4var"}]}}
\ No newline at end of file
diff --git a/src/source/_posts/web-api-Background_Tasks_API.md b/src/source/_posts/web-api-Background_Tasks_API.md
new file mode 100644
index 0000000..da55ae4
--- /dev/null
+++ b/src/source/_posts/web-api-Background_Tasks_API.md
@@ -0,0 +1,71 @@
+---
+title: "Web API - Background Tasks"
+date: "2024-03-01T03:56:11Z"
+categories:
+  - [JavaScript]
+
+url: web-api-Background_Tasks_API
+tags:
+  - webapi
+  - Background Tasks
+
+---
+
+
+原文链接：[https://github.com/taoliujun/blog/issues/55](https://github.com/taoliujun/blog/issues/55)
+
+<!--hexo
+---
+url: web-api-Background_Tasks_API
+tags:
+  - webapi
+  - Background Tasks
+---
+-->
+
+# Background Task
+
+> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API
+
+**Background Tasks**用于在空闲时间执行队列任务，从而**不阻塞事件处理和屏幕更新**。
+
+我们遇到的大部分浏览器卡顿场景是因为代码执行时间太长，阻塞了用户交互、DOM绘制。
+
+在以前，可以将耗时任务分为若干份，每一份执行N次任务，每M毫秒执行一份代码，直至所有任务被执行完成。虽然减轻了卡顿率，但存在以下问题：
+
+-   要主观判断N次任务的耗时不超过10ms，在一帧中留下充足的时间去处理交互、DOM绘制等。
+-   不超过10ms的N次任务，在每一帧的瞬时性能中，实际耗时是不一样的。所以如何定义N的值，也是主观而不科学的。
+-   在每一帧中，任务仍然会耗时过长而阻塞交互、绘制。
+
+现在，Background Task提供了方法，获取到当前留下了多少空闲时间，在这段时间里可以尽量的执行若干次任务。但仍需注意，只运行那些**单次耗时时间很短的任务**。
+
+> “单次耗时时间很短”是什么意思？在不同的场景中，这个时间是可以浮动的。
+>
+> -   在用户点击按钮以查看最新文本信息的场景中，这个时间可以定义为100ms，因为用户在此时间后得到反馈，是不觉得卡顿的。
+> -   在用户快速输入文本以反馈到屏幕上、或滚动订单列表的场景中，这个时间要定义为10ms，因为用户在快速的操作中得不到瞬间反馈就容易感受到卡顿。
+
+## 方法
+
+### requestIdleCallback
+
+在空闲时间执行回调。
+
+## 示例
+
+示例：https://taoliujun.github.io/example/web-api/Background_Tasks_API/index.html
+
+1. 点击几次"add task"按钮，此时没有任务在运行，发现每一秒都流畅打印出任务量。
+
+![image](https://github.com/taoliujun/blog/assets/5689134/342d899c-45cf-4f61-a529-8846282f2028)
+
+2. 点击"run all tasks"按钮，发现一次跑完所有任务，耗时几千毫秒，此过程中因为DOM绘制被阻塞，打印也卡住了。
+
+![image](https://github.com/taoliujun/blog/assets/5689134/485c6005-7543-42ab-9096-c5b4fcc9681b)
+
+3. 点击"run tasks"按钮，让其循环在空闲时间中跑完所有任务，发现每次执行很少个任务，耗时在几十毫秒，不会阻塞DOM绘制，打印毫无卡顿。
+
+![image](https://github.com/taoliujun/blog/assets/5689134/3b67b0ff-df48-45e9-8c34-6d7327bea1c9)
+
+
+
+
diff --git a/src/source/_posts/web-api-Badging_API.md b/src/source/_posts/web-api-Badging_API.md
new file mode 100644
index 0000000..14fc8dc
--- /dev/null
+++ b/src/source/_posts/web-api-Badging_API.md
@@ -0,0 +1,69 @@
+---
+title: "Web API - Badging"
+date: "2024-02-28T08:22:00Z"
+categories:
+  - [JavaScript]
+
+url: web-api-Badging_API
+tags:
+  - webapi
+  - Badging
+
+---
+
+
+原文链接：[https://github.com/taoliujun/blog/issues/50](https://github.com/taoliujun/blog/issues/50)
+
+<!--hexo
+---
+url: web-api-Badging_API
+tags:
+  - webapi
+  - Badging
+---
+-->
+
+# Badging
+
+> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Badging_API
+
+**Badging**用于在Web APP的图标上**标记徽章**，常用于通知用户有新消息啦，它有3种状态：
+
+
+| 状态 | 描述 | 效果 |
+| --- | --- | --- |
+| nothing | 什么都没有 | ![image](https://github.com/taoliujun/blog/assets/5689134/0410ffdf-fbf3-41aa-b3b5-de0aa2ceb671) |
+| flag | 一个圆点 | ![image](https://github.com/taoliujun/blog/assets/5689134/965f2c77-8b85-443f-8f97-da491df88354) |
+| integer | 一个数字，最大显示99+ | ![image](https://github.com/taoliujun/blog/assets/5689134/f0333758-125b-40b9-a88b-285346730816) |
+
+## 方法
+
+### setAppBadge
+
+设置徽章。
+
+```javascript
+// 设置圆点
+navigator.setAppBadge();
+// 设置数字
+navigator.setAppBadge(12);
+// 设置大数字
+navigator.setAppBadge(1234);
+```
+
+### clearAppBadge
+
+清空徽章。
+
+```javascript
+navigator.clearAppBadge();
+```
+
+## 示例
+
+示例：https://taoliujun.github.io/example/web-api/Badging_API/index.html
+
+本示例代码较为简单，直接打开查看源码即可。
+
+
+
diff --git a/src/source/_posts/web-api-Battery_Status_API.md b/src/source/_posts/web-api-Battery_Status_API.md
new file mode 100644
index 0000000..2db4f87
--- /dev/null
+++ b/src/source/_posts/web-api-Battery_Status_API.md
@@ -0,0 +1,54 @@
+---
+title: "Web API - Battery Status"
+date: "2024-03-01T09:34:25Z"
+categories:
+  - [JavaScript]
+
+url: web-api-Battery_Status_API
+tags:
+  - webapi
+  - Battery Status
+
+---
+
+
+原文链接：[https://github.com/taoliujun/blog/issues/58](https://github.com/taoliujun/blog/issues/58)
+
+<!--hexo
+---
+url: web-api-Battery_Status_API
+tags:
+  - webapi
+  - Battery Status
+---
+-->
+
+# Battery Status
+
+> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API
+
+**Battery Status**可以查看电池信息、监听充电状态变化。
+
+## 接口
+
+### BatteryManager
+
+设备电池对象。
+
+## 方法
+
+### getBattery
+
+返回`Promise<BatteryManager>`
+
+## 示例
+
+示例：https://taoliujun.github.io/example/web-apis/Battery_Status_API/index.html
+
+1. 拔掉笔记本充电线，再插上充电线，可以看到监听到充电状态变化。
+
+![image](https://github.com/taoliujun/blog/assets/5689134/9944f20b-95b2-4bc2-b2c6-01c7cdcdf80d)
+
+
+
+
diff --git a/src/source/_posts/web-api-Beacon_API.md b/src/source/_posts/web-api-Beacon_API.md
new file mode 100644
index 0000000..0835585
--- /dev/null
+++ b/src/source/_posts/web-api-Beacon_API.md
@@ -0,0 +1,83 @@
+---
+title: "Web API - Beacon"
+date: "2024-02-29T07:21:58Z"
+categories:
+  - [JavaScript]
+
+url: web-api-Beacon_API
+tags:
+  - webapi
+  - Beacon
+
+---
+
+
+原文链接：[https://github.com/taoliujun/blog/issues/53](https://github.com/taoliujun/blog/issues/53)
+
+<!--hexo
+---
+url: web-api-Beacon_API
+tags:
+  - webapi
+  - Beacon
+---
+-->
+
+# Beacon
+
+> MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API
+
+**Beacon**用于发送请求到服务器，且不需要响应。浏览器会保证在页面卸载前，将请求运行完成。
+
+## 方法
+
+### sendBeacon
+
+通过*POST*发送少量数据到服务器。
+
+```javascript
+navigator.sendBeacon(url, data);
+```
+
+## 示例
+
+示例：https://taoliujun.github.io/example/web-api/Beacon_API/index.html
+
+1. 创建一个页面，放一个按钮用于发送`manual`统计数据：
+
+```html
+<button onclick="javascript:sendData('manual');">sendData</button>
+```
+
+2. 在页面隐藏、卸载的时候发送`hidden`统计数据：
+
+```javascript
+document.addEventListener("visibilitychange", ()=> {
+  if (document.visibilityState === "hidden") {
+    sendData('hidden');
+  }
+});
+```
+
+3。 发送统计数据的函数：
+
+```javascript
+let data = 0;
+
+function sendData(source) {
+  data += 1;
+  // getUrl用于获取服务端地址
+  navigator.sendBeacon(getUrl(), new URLSearchParams({ data, source }));
+}
+```
+
+4. 创建服务端，打印*request body*数据以测试点击按钮、关闭页面的效果，发现关闭页面后也发送了数据。
+
+```bash
+body: [Object: null prototype] { data: '1', source: 'manual' }
+body: [Object: null prototype] { data: '2', source: 'hidden' }
+```
+
+
+
+
diff --git a/src/source/_posts/web-api-Broadcast_Channel_API.md b/src/source/_posts/web-api-Broadcast_Channel_API.md
new file mode 100644
index 0000000..01caf82
--- /dev/null
+++ b/src/source/_posts/web-api-Broadcast_Channel_API.md
@@ -0,0 +1,48 @@
+---
+title: "Web API - Broadcast Channel"
+date: "2024-03-01T10:00:22Z"
+categories:
+  - [JavaScript]
+
+url: web-api-Broadcast_Channel_API
+tags:
+  - webapi
+  - Broadcast Channel
+
+---
+
+
+原文链接：[https://github.com/taoliujun/blog/issues/59](https://github.com/taoliujun/blog/issues/59)
+
+<!--hexo
+---
+url: web-api-Broadcast_Channel_API
+tags:
+  - webapi
+  - Broadcast Channel
+---
+-->
+
+# Broadcast Channel
+
+> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
+
+**Broadcast Channel**可以在**同源**情况下，在一种浏览器的不同窗口、标签页、frame中简单通信。
+
+## 接口
+
+### BroadcastChannel
+
+传入频道名称，返回实例，包含了`message`事件来监听消息、`postMessage`方法来发送信息。
+
+## 示例
+
+示例：https://taoliujun.github.io/example/web-apis/Broadcast_Channel_API/index.html
+
+1. 打开两个Chrome窗口，查看日志：
+
+![image](https://github.com/taoliujun/blog/assets/5689134/8c0fdb6e-0318-49cd-8040-f90ca0738a13)
+
+
+
+
diff --git a/src/source/_posts/web-api-readme.md b/src/source/_posts/web-api-readme.md
new file mode 100644
index 0000000..c6733a0
--- /dev/null
+++ b/src/source/_posts/web-api-readme.md
@@ -0,0 +1,37 @@
+---
+title: "Web API 实践，最后更新2024/02月..."
+date: "2024-02-28T08:10:53Z"
+categories:
+  - [JavaScript]
+
+url: web-api-readme
+tags:
+  - webapi
+
+---
+
+
+原文链接：[https://github.com/taoliujun/blog/issues/49](https://github.com/taoliujun/blog/issues/49)
+
+<!--hexo
+---
+url: web-api-readme
+tags:
+  - webapi
+---
+-->
+
+[Web API](https://www.w3.org/TR/)的发展日新月异，稍不留神就偷偷的出了新规范，这些规范为项目方案提供了更多的可能性。话说读百遍不如写一遍，计划在一段时间内，对大部分API进行demo实践以加深印象。
+
+> 以 https://developer.mozilla.org/en-US/docs/Web/API 为基础，只实践W3C Recommendation状态的API。
+
+## 目录
+
+- [x] #50 
+- [x] #53 
+- [x] #55 
+- [x] #58 
+- [ ] #59 
+
+
+