From 6be92847fb5093bbd4feb07e87c7a8e8c90f3413 Mon Sep 17 00:00:00 2001
From: taoliujun <5689134+taoliujun@users.noreply.github.com>
Date: Thu, 21 Mar 2024 07:57:50 +0000
Subject: [PATCH] [create-pull-request] automated change

---
 dist/archives/2023/07/index.html              |   2 +-
 dist/archives/2023/07/page/2/index.html       |   2 +-
 dist/archives/2023/07/page/3/index.html       |   2 +-
 dist/archives/2023/08/index.html              |   2 +-
 dist/archives/2023/09/index.html              |   2 +-
 dist/archives/2023/12/index.html              |   2 +-
 dist/archives/2023/index.html                 |   2 +-
 dist/archives/2023/page/2/index.html          |   2 +-
 dist/archives/2023/page/3/index.html          |   2 +-
 dist/archives/2024/01/index.html              |   2 +-
 dist/archives/2024/02/index.html              |   2 +-
 dist/archives/2024/03/index.html              |  56 +--
 dist/archives/2024/03/page/2/index.html       |  46 +-
 dist/archives/2024/03/page/3/index.html       | 335 +++++++++++++
 dist/archives/2024/index.html                 |  56 +--
 dist/archives/2024/page/2/index.html          |  58 +--
 dist/archives/2024/page/3/index.html          |  30 +-
 dist/archives/index.html                      |  56 +--
 dist/archives/page/2/index.html               |  58 +--
 dist/archives/page/3/index.html               |  58 +--
 dist/archives/page/4/index.html               |  46 +-
 dist/archives/page/5/index.html               |  44 +-
 dist/archives/page/6/index.html               | 349 +++++++++++++
 dist/categories/Web-API/index.html            |  58 +--
 dist/categories/Web-API/page/2/index.html     | 351 +++++++++++++
 dist/index.html                               | 116 ++---
 dist/page/2/index.html                        | 124 ++---
 dist/page/3/index.html                        | 198 ++++----
 dist/page/4/index.html                        | 114 ++---
 dist/page/5/index.html                        | 126 ++---
 dist/page/6/index.html                        | 448 +++++++++++++++++
 dist/sitemap.xml                              | 330 +++++++------
 dist/tags/Drag-Drop/index.html                | 335 +++++++++++++
 dist/tags/Intersection-Observer/index.html    | 335 +++++++++++++
 dist/tags/webapi/index.html                   |  54 +-
 dist/tags/webapi/page/2/index.html            |  56 +--
 dist/tags/webapi/page/3/index.html            |  28 ++
 dist/web-api-Geolocation_API/index.html       |   6 +
 .../web-api-HTML_Drag_and_Drop_API/index.html | 457 +++++++++++++++++
 .../index.html                                | 466 ++++++++++++++++++
 dist/web-api-readme/index.html                |   6 +-
 src/db.json                                   |   2 +-
 .../_posts/web-api-HTML_Drag_and_Drop_API.md  | 142 ++++++
 .../web-api-Intersection_Observer_API.md      | 103 ++++
 src/source/_posts/web-api-readme.md           |   6 +-
 45 files changed, 4256 insertions(+), 819 deletions(-)
 create mode 100644 dist/archives/2024/03/page/3/index.html
 create mode 100644 dist/archives/page/6/index.html
 create mode 100644 dist/categories/Web-API/page/2/index.html
 create mode 100644 dist/page/6/index.html
 create mode 100644 dist/tags/Drag-Drop/index.html
 create mode 100644 dist/tags/Intersection-Observer/index.html
 create mode 100644 dist/web-api-HTML_Drag_and_Drop_API/index.html
 create mode 100644 dist/web-api-Intersection_Observer_API/index.html
 create mode 100644 src/source/_posts/web-api-HTML_Drag_and_Drop_API.md
 create mode 100644 src/source/_posts/web-api-Intersection_Observer_API.md

diff --git a/dist/archives/2023/07/index.html b/dist/archives/2023/07/index.html
index 6be8142..39703b3 100644
--- a/dist/archives/2023/07/index.html
+++ b/dist/archives/2023/07/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
diff --git a/dist/archives/2023/07/page/2/index.html b/dist/archives/2023/07/page/2/index.html
index f43ae00..8d5a7dc 100644
--- a/dist/archives/2023/07/page/2/index.html
+++ b/dist/archives/2023/07/page/2/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
diff --git a/dist/archives/2023/07/page/3/index.html b/dist/archives/2023/07/page/3/index.html
index f9d0c21..1fd7706 100644
--- a/dist/archives/2023/07/page/3/index.html
+++ b/dist/archives/2023/07/page/3/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
diff --git a/dist/archives/2023/08/index.html b/dist/archives/2023/08/index.html
index a35503a..7a8fc67 100644
--- a/dist/archives/2023/08/index.html
+++ b/dist/archives/2023/08/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
diff --git a/dist/archives/2023/09/index.html b/dist/archives/2023/09/index.html
index e155d0d..c5c79cf 100644
--- a/dist/archives/2023/09/index.html
+++ b/dist/archives/2023/09/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
diff --git a/dist/archives/2023/12/index.html b/dist/archives/2023/12/index.html
index 48136f9..098fde4 100644
--- a/dist/archives/2023/12/index.html
+++ b/dist/archives/2023/12/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
diff --git a/dist/archives/2023/index.html b/dist/archives/2023/index.html
index faa4224..55a2280 100644
--- a/dist/archives/2023/index.html
+++ b/dist/archives/2023/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
diff --git a/dist/archives/2023/page/2/index.html b/dist/archives/2023/page/2/index.html
index 61c8679..d6af219 100644
--- a/dist/archives/2023/page/2/index.html
+++ b/dist/archives/2023/page/2/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
diff --git a/dist/archives/2023/page/3/index.html b/dist/archives/2023/page/3/index.html
index 4f05d16..e445851 100644
--- a/dist/archives/2023/page/3/index.html
+++ b/dist/archives/2023/page/3/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
diff --git a/dist/archives/2024/01/index.html b/dist/archives/2024/01/index.html
index bfbdd13..c61b625 100644
--- a/dist/archives/2024/01/index.html
+++ b/dist/archives/2024/01/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
diff --git a/dist/archives/2024/02/index.html b/dist/archives/2024/02/index.html
index 8cd833b..a397317 100644
--- a/dist/archives/2024/02/index.html
+++ b/dist/archives/2024/02/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
diff --git a/dist/archives/2024/03/index.html b/dist/archives/2024/03/index.html
index c8c5b97..2f83e60 100644
--- a/dist/archives/2024/03/index.html
+++ b/dist/archives/2024/03/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
@@ -166,12 +166,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Geolocation_API/">
-          <span>Web API - Geolocation</span>
+        <a href="/blog/web-api-Intersection_Observer_API/">
+          <span>Web Api - Intersection Observer</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-14
+        03-20
       </div>
     </header>
   </article>
@@ -180,12 +180,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Fullscreen_API/">
-          <span>Web API - Fullscreen</span>
+        <a href="/blog/web-api-HTML_Drag_and_Drop_API/">
+          <span>Web API - HTML Drag And Drop</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-14
+        03-20
       </div>
     </header>
   </article>
@@ -194,12 +194,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-File_System_API/">
-          <span>Web API - File System</span>
+        <a href="/blog/web-api-Geolocation_API/">
+          <span>Web API - Geolocation</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-12
+        03-14
       </div>
     </header>
   </article>
@@ -208,12 +208,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-File_API/">
-          <span>Web API - File</span>
+        <a href="/blog/web-api-Fullscreen_API/">
+          <span>Web API - Fullscreen</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-12
+        03-14
       </div>
     </header>
   </article>
@@ -222,8 +222,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-EyeDropper_API/">
-          <span>Web API - EyeDropper</span>
+        <a href="/blog/web-api-File_System_API/">
+          <span>Web API - File System</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -236,12 +236,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Document_Picture-in-Picture_API/">
-          <span>Web API - Document Picture-in-Picture</span>
+        <a href="/blog/web-api-File_API/">
+          <span>Web API - File</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-11
+        03-12
       </div>
     </header>
   </article>
@@ -250,12 +250,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Device_orientation_events/">
-          <span>Web API - Device Orientation</span>
+        <a href="/blog/web-api-EyeDropper_API/">
+          <span>Web API - EyeDropper</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-11
+        03-12
       </div>
     </header>
   </article>
@@ -264,8 +264,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Document_Object_Model/">
-          <span>Web API - DOM</span>
+        <a href="/blog/web-api-Document_Picture-in-Picture_API/">
+          <span>Web API - Document Picture-in-Picture</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -278,8 +278,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Device_Memory_API/">
-          <span>Web API - Device Memory</span>
+        <a href="/blog/web-api-Device_orientation_events/">
+          <span>Web API - Device Orientation</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -292,12 +292,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Credential_Management_API/">
-          <span>Web API - Credential Management</span>
+        <a href="/blog/web-api-Document_Object_Model/">
+          <span>Web API - DOM</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-07
+        03-11
       </div>
     </header>
   </article>
diff --git a/dist/archives/2024/03/page/2/index.html b/dist/archives/2024/03/page/2/index.html
index 98657b6..5987e63 100644
--- a/dist/archives/2024/03/page/2/index.html
+++ b/dist/archives/2024/03/page/2/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
@@ -163,6 +163,34 @@ <h2>
   
   
   
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Device_Memory_API/">
+          <span>Web API - Device Memory</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        03-11
+      </div>
+    </header>
+  </article>
+  
+  
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Credential_Management_API/">
+          <span>Web API - Credential Management</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        03-07
+      </div>
+    </header>
+  </article>
+  
+  
   <article class="posts-collapse">
     <header>
       <h2>
@@ -274,26 +302,14 @@ <h2>
     </header>
   </article>
   
-  
-  <article class="posts-collapse">
-    <header>
-      <h2>
-        <a href="/blog/web-api-Battery_Status_API/">
-          <span>Web API - Battery Status</span>
-        </a>
-      </h2>
-      <div class="post-meta">
-        03-01
-      </div>
-    </header>
-  </article>
-  
 </div>
   <nav class="page-navigation">
     
       <a href="/blog/archives/2024/03/">上一页</a>
     
     
+      <a href="/blog/archives/2024/03/page/3/">下一页</a>
+    
   </nav>
 </div>
 
diff --git a/dist/archives/2024/03/page/3/index.html b/dist/archives/2024/03/page/3/index.html
new file mode 100644
index 0000000..d6ed924
--- /dev/null
+++ b/dist/archives/2024/03/page/3/index.html
@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+  
+<head>
+  <meta charset="utf-8">
+  <meta name="author" content="董沅鑫, yuanxin.me@gmail.com" />
+  
+  
+  
+  <title>归档: 2024/3 | TaoLiuJun&#39;s Blog</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  
+    <meta name="keywords" content="" />
+  
+
+  <script>
+    console.log('\n%c Hexo-theme-bmw v4.0 ' + '%c 🎉 https://github.com/dongyuanxin/theme-bmw 🎉\n' + '\n%c View demo online ' + '%c 🔍 https://godbmw.com/ 🔍  \n' , 'color: #fadfa3; background: #030307; padding:3px 0;', '', 'color: #fadfa3; background: #030307; padding:3px 0;', '');
+  </script>
+
+  
+    <meta name="description" content="Html/Css/JavaScript/TypeScript的学习心得；React的学习心得；技术设计思想；生活随想；">
+  
+
+  
+
+  
+    <link rel="icon" href="/images/favicon.ico">
+    <link rel="apple-touch-icon" href="/images/touch-icon.png">
+  
+
+  <link href="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.css" rel="stylesheet">
+  
+<link rel="stylesheet" href="/blog/css/base.css">
+<link rel="stylesheet" href="/blog/icon/iconfont.css">
+<link rel="stylesheet" href="/blog/css/github-markdown.css">
+<link rel="stylesheet" href="/blog/css/highlight.css">
+
+
+  
+<script src="/blog/js/util.js"></script>
+<script src="/blog/js/valine.min.js"></script>
+
+
+  
+
+  
+
+  
+  
+  <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js" async></script>
+  
+  
+
+<meta name="generator" content="Hexo 6.3.0"></head>
+
+  <body>
+
+    
+
+    <div id="app">
+
+      <div class="header-wrap">
+  <header>
+    <div class="site-brand">
+      <div class="site-title">
+        <a href="/blog/">Taoliujun&#39;s Blog</a>
+      </div>
+    </div>
+    <nav class="site-navigation">
+      <ul class="nav-menu">
+      
+        <li class="nav-item" data-path="/">
+          
+            <a 
+              href="/blog/"
+              target="_self"
+            >
+              主页
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="/archives/">
+          
+            <a 
+              href="/blog/archives/"
+              target="_self"
+            >
+              所有文章
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="https://github.com/taoliujun/blog/issues">
+          
+            <a 
+              href="https://github.com/taoliujun/blog/issues"
+              target="_self"
+            >
+              github
+            </a>
+          
+        </li>
+      
+      </ul>
+    </nav>
+    <i class="iconfont icon-menu"></i>
+  </header>
+</div>
+
+<script>
+  let links = document.querySelectorAll('.nav-item');
+  for(let link of links){
+    let childrenLink = link.querySelector('ul');
+    link.addEventListener('mouseenter', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown active";
+      }
+    })
+    link.addEventListener('mouseleave', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown";
+      }
+    })
+  }
+  let rootRealPath = getRealPath(window.location.pathname, true);
+  for(let link of links) {
+    let linkPath = link.getAttribute("data-path");
+    if(linkPath && getRealPath(linkPath, true) === rootRealPath) {
+      link.className = "nav-item hover";
+    }
+  }
+
+  let iconMenu = document.querySelector("i.iconfont.icon-menu"),
+    iconMenuClicked = false;
+  let navDOM = document.querySelector("nav.site-navigation");
+  iconMenu.addEventListener("click", () => {
+    iconMenuClicked 
+      ? navDOM.className = "site-navigation active"
+      : navDOM.className = "site-navigation";
+    iconMenuClicked = !iconMenuClicked;
+  })
+</script>
+
+      <div class="container">
+  <div class="timeline">
+  <span class="archive-move-on"></span>
+  <span class="archive-page-counter">
+    
+      <span>Wow! 一共有 52 篇文章</span>
+    
+  </span>
+  
+  
+    <div class="collection-title">
+      <h2>
+        <span>2024</span>
+      </h2>
+    </div>
+  
+  
+  
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Battery_Status_API/">
+          <span>Web API - Battery Status</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        03-01
+      </div>
+    </header>
+  </article>
+  
+</div>
+  <nav class="page-navigation">
+    
+      <a href="/blog/archives/2024/03/page/2/">上一页</a>
+    
+    
+  </nav>
+</div>
+
+      <footer>
+  <p class="site-info">
+    Powered by <a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a> | Theme - <a target="_blank" rel="noopener" href="https://github.com/dongyuanxin/theme-bmw">BMW</a>
+    <br>
+    
+  </p>
+</footer>
+
+      <div class="back-to-top hidden">
+  <span>
+    <i class="iconfont icon-60"></i><span></span>%
+  </span>
+</div>
+
+<script>
+const updateIconToTop = percent => {
+  let dom = document.querySelector(".back-to-top span span");
+  dom.innerText = percent;
+  if(percent < 1) {
+    document.querySelector(".back-to-top").className = "back-to-top hidden";
+  } else {
+    document.querySelector(".back-to-top").className = "back-to-top";
+  }
+}
+
+const handleScoll = () => {
+  let isRunning = false;
+  return () => {
+    if (isRunning) return;
+    isRunning = true;
+    window.requestAnimationFrame(timestamp => {
+      let scrollTop =
+          document.documentElement.scrollTop || document.body.scrollTop,
+        scrollHeight =
+          document.documentElement.scrollHeight ||
+          document.body.scrollHeight,
+        clientHeight =
+          document.documentElement.clientHeight ||
+          document.body.clientHeight;
+      isRunning = false;
+      if (scrollTop <= 1) {
+        updateIconToTop(0);
+        return;
+      }
+      if (scrollTop + clientHeight >= scrollHeight) {
+        updateIconToTop(100);
+      } else {
+        updateIconToTop(parseInt(
+          100 * scrollTop / (scrollHeight - clientHeight),
+          10
+        ));
+      }
+    });
+  };
+}
+
+const backToTop = () => {
+  let scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop,
+    delay = 10,
+    time = 200;
+  if (scrollTop <= 20) {
+    document.documentElement.scrollTop = 0;
+    document.body.scrollTop = 0;
+    return;
+  }
+  let step = Math.ceil(scrollTop * delay / time);
+  let timer = setInterval(() => {
+    scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop;
+    if (scrollTop - step <= 0) {
+      document.documentElement.scrollTop = 0;
+      document.body.scrollTop = 0;
+      clearInterval(timer);
+    } else {
+      document.documentElement.scrollTop = scrollTop - step;
+      document.body.scrollTop = scrollTop - step;
+    }
+  }, delay);
+}
+
+document.addEventListener("scroll", handleScoll(), false);
+
+document.querySelector(".back-to-top").addEventListener("click", backToTop, false);
+
+</script>
+
+    </div>
+
+    
+      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
+<script>
+  (() => {
+    const mathjaxConfig = {
+      showProcessingMessages: false, //关闭js加载过程信息
+      messageStyle: "none", //不显示信息
+      jax: ["input/TeX", "output/HTML-CSS"],
+      tex2jax: {
+        inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
+        displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
+        skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
+      },
+      "HTML-CSS": {
+        availableFonts: ["STIX", "TeX"], //可选字体
+        showMathMenu: false //关闭右击菜单显示
+      }
+    }
+
+    let mathjaxInterval = setInterval(() => {
+      if(!window.MathJax){
+        return;
+      }
+      window.MathJax.Hub.Config(mathjaxConfig)
+      window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')])
+
+      clearInterval(mathjaxInterval)
+    }, 10)    
+  })()
+</script>
+    
+
+    <script src="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.js" async></script>
+<script async>
+  let fancyTimer = setInterval(function(){
+    if(!window.$){
+      return;
+    }
+    $(document).ready(function() {
+      $(".post img").each(function () {
+        if($(this).parent().get(0).tagName.toLowerCase() === "a") {
+          return;
+        }
+        // $(this).attr("data-fancybox", "gallery"); // if you add 'data-fancybox', img will display after showed
+        var element = document.createElement("a");
+        $(element).attr("data-fancybox", "gallery");
+        $(element).attr("href", $(this).attr("src"));
+        $(this).wrap(element);
+      });
+      
+      clearInterval(fancyTimer);
+    });
+  }, 10);
+</script>
+
+    
+  </body>
+
+</html>
diff --git a/dist/archives/2024/index.html b/dist/archives/2024/index.html
index d6aab7d..f0ab15f 100644
--- a/dist/archives/2024/index.html
+++ b/dist/archives/2024/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
@@ -166,12 +166,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Geolocation_API/">
-          <span>Web API - Geolocation</span>
+        <a href="/blog/web-api-Intersection_Observer_API/">
+          <span>Web Api - Intersection Observer</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-14
+        03-20
       </div>
     </header>
   </article>
@@ -180,12 +180,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Fullscreen_API/">
-          <span>Web API - Fullscreen</span>
+        <a href="/blog/web-api-HTML_Drag_and_Drop_API/">
+          <span>Web API - HTML Drag And Drop</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-14
+        03-20
       </div>
     </header>
   </article>
@@ -194,12 +194,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-File_System_API/">
-          <span>Web API - File System</span>
+        <a href="/blog/web-api-Geolocation_API/">
+          <span>Web API - Geolocation</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-12
+        03-14
       </div>
     </header>
   </article>
@@ -208,12 +208,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-File_API/">
-          <span>Web API - File</span>
+        <a href="/blog/web-api-Fullscreen_API/">
+          <span>Web API - Fullscreen</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-12
+        03-14
       </div>
     </header>
   </article>
@@ -222,8 +222,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-EyeDropper_API/">
-          <span>Web API - EyeDropper</span>
+        <a href="/blog/web-api-File_System_API/">
+          <span>Web API - File System</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -236,12 +236,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Document_Picture-in-Picture_API/">
-          <span>Web API - Document Picture-in-Picture</span>
+        <a href="/blog/web-api-File_API/">
+          <span>Web API - File</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-11
+        03-12
       </div>
     </header>
   </article>
@@ -250,12 +250,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Device_orientation_events/">
-          <span>Web API - Device Orientation</span>
+        <a href="/blog/web-api-EyeDropper_API/">
+          <span>Web API - EyeDropper</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-11
+        03-12
       </div>
     </header>
   </article>
@@ -264,8 +264,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Document_Object_Model/">
-          <span>Web API - DOM</span>
+        <a href="/blog/web-api-Document_Picture-in-Picture_API/">
+          <span>Web API - Document Picture-in-Picture</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -278,8 +278,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Device_Memory_API/">
-          <span>Web API - Device Memory</span>
+        <a href="/blog/web-api-Device_orientation_events/">
+          <span>Web API - Device Orientation</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -292,12 +292,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Credential_Management_API/">
-          <span>Web API - Credential Management</span>
+        <a href="/blog/web-api-Document_Object_Model/">
+          <span>Web API - DOM</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-07
+        03-11
       </div>
     </header>
   </article>
diff --git a/dist/archives/2024/page/2/index.html b/dist/archives/2024/page/2/index.html
index 11498f3..99f5acd 100644
--- a/dist/archives/2024/page/2/index.html
+++ b/dist/archives/2024/page/2/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
@@ -163,6 +163,34 @@ <h2>
   
   
   
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Device_Memory_API/">
+          <span>Web API - Device Memory</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        03-11
+      </div>
+    </header>
+  </article>
+  
+  
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Credential_Management_API/">
+          <span>Web API - Credential Management</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        03-07
+      </div>
+    </header>
+  </article>
+  
+  
   <article class="posts-collapse">
     <header>
       <h2>
@@ -274,34 +302,6 @@ <h2>
     </header>
   </article>
   
-  
-  <article class="posts-collapse">
-    <header>
-      <h2>
-        <a href="/blog/web-api-Battery_Status_API/">
-          <span>Web API - Battery Status</span>
-        </a>
-      </h2>
-      <div class="post-meta">
-        03-01
-      </div>
-    </header>
-  </article>
-  
-  
-  <article class="posts-collapse">
-    <header>
-      <h2>
-        <a href="/blog/web-api-Background_Tasks_API/">
-          <span>Web API - Background Tasks</span>
-        </a>
-      </h2>
-      <div class="post-meta">
-        02-29
-      </div>
-    </header>
-  </article>
-  
 </div>
   <nav class="page-navigation">
     
diff --git a/dist/archives/2024/page/3/index.html b/dist/archives/2024/page/3/index.html
index 5ebfbf3..b95613e 100644
--- a/dist/archives/2024/page/3/index.html
+++ b/dist/archives/2024/page/3/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
@@ -163,6 +163,34 @@ <h2>
   
   
   
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Battery_Status_API/">
+          <span>Web API - Battery Status</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        03-01
+      </div>
+    </header>
+  </article>
+  
+  
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Background_Tasks_API/">
+          <span>Web API - Background Tasks</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        02-29
+      </div>
+    </header>
+  </article>
+  
+  
   <article class="posts-collapse">
     <header>
       <h2>
diff --git a/dist/archives/index.html b/dist/archives/index.html
index b38fff7..d154915 100644
--- a/dist/archives/index.html
+++ b/dist/archives/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
@@ -166,12 +166,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Geolocation_API/">
-          <span>Web API - Geolocation</span>
+        <a href="/blog/web-api-Intersection_Observer_API/">
+          <span>Web Api - Intersection Observer</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-14
+        03-20
       </div>
     </header>
   </article>
@@ -180,12 +180,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Fullscreen_API/">
-          <span>Web API - Fullscreen</span>
+        <a href="/blog/web-api-HTML_Drag_and_Drop_API/">
+          <span>Web API - HTML Drag And Drop</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-14
+        03-20
       </div>
     </header>
   </article>
@@ -194,12 +194,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-File_System_API/">
-          <span>Web API - File System</span>
+        <a href="/blog/web-api-Geolocation_API/">
+          <span>Web API - Geolocation</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-12
+        03-14
       </div>
     </header>
   </article>
@@ -208,12 +208,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-File_API/">
-          <span>Web API - File</span>
+        <a href="/blog/web-api-Fullscreen_API/">
+          <span>Web API - Fullscreen</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-12
+        03-14
       </div>
     </header>
   </article>
@@ -222,8 +222,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-EyeDropper_API/">
-          <span>Web API - EyeDropper</span>
+        <a href="/blog/web-api-File_System_API/">
+          <span>Web API - File System</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -236,12 +236,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Document_Picture-in-Picture_API/">
-          <span>Web API - Document Picture-in-Picture</span>
+        <a href="/blog/web-api-File_API/">
+          <span>Web API - File</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-11
+        03-12
       </div>
     </header>
   </article>
@@ -250,12 +250,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Device_orientation_events/">
-          <span>Web API - Device Orientation</span>
+        <a href="/blog/web-api-EyeDropper_API/">
+          <span>Web API - EyeDropper</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-11
+        03-12
       </div>
     </header>
   </article>
@@ -264,8 +264,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Document_Object_Model/">
-          <span>Web API - DOM</span>
+        <a href="/blog/web-api-Document_Picture-in-Picture_API/">
+          <span>Web API - Document Picture-in-Picture</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -278,8 +278,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Device_Memory_API/">
-          <span>Web API - Device Memory</span>
+        <a href="/blog/web-api-Device_orientation_events/">
+          <span>Web API - Device Orientation</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -292,12 +292,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Credential_Management_API/">
-          <span>Web API - Credential Management</span>
+        <a href="/blog/web-api-Document_Object_Model/">
+          <span>Web API - DOM</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-07
+        03-11
       </div>
     </header>
   </article>
diff --git a/dist/archives/page/2/index.html b/dist/archives/page/2/index.html
index 4f43686..2c8d93a 100644
--- a/dist/archives/page/2/index.html
+++ b/dist/archives/page/2/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
@@ -163,6 +163,34 @@ <h2>
   
   
   
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Device_Memory_API/">
+          <span>Web API - Device Memory</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        03-11
+      </div>
+    </header>
+  </article>
+  
+  
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Credential_Management_API/">
+          <span>Web API - Credential Management</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        03-07
+      </div>
+    </header>
+  </article>
+  
+  
   <article class="posts-collapse">
     <header>
       <h2>
@@ -274,34 +302,6 @@ <h2>
     </header>
   </article>
   
-  
-  <article class="posts-collapse">
-    <header>
-      <h2>
-        <a href="/blog/web-api-Battery_Status_API/">
-          <span>Web API - Battery Status</span>
-        </a>
-      </h2>
-      <div class="post-meta">
-        03-01
-      </div>
-    </header>
-  </article>
-  
-  
-  <article class="posts-collapse">
-    <header>
-      <h2>
-        <a href="/blog/web-api-Background_Tasks_API/">
-          <span>Web API - Background Tasks</span>
-        </a>
-      </h2>
-      <div class="post-meta">
-        02-29
-      </div>
-    </header>
-  </article>
-  
 </div>
   <nav class="page-navigation">
     
diff --git a/dist/archives/page/3/index.html b/dist/archives/page/3/index.html
index 3b1db23..239ec74 100644
--- a/dist/archives/page/3/index.html
+++ b/dist/archives/page/3/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
@@ -163,6 +163,34 @@ <h2>
   
   
   
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Battery_Status_API/">
+          <span>Web API - Battery Status</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        03-01
+      </div>
+    </header>
+  </article>
+  
+  
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Background_Tasks_API/">
+          <span>Web API - Background Tasks</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        02-29
+      </div>
+    </header>
+  </article>
+  
+  
   <article class="posts-collapse">
     <header>
       <h2>
@@ -280,34 +308,6 @@ <h2>
     </header>
   </article>
   
-  
-  <article class="posts-collapse">
-    <header>
-      <h2>
-        <a href="/blog/typescript-means/">
-          <span>TypeScript的小手段，最后更新2023/12月...</span>
-        </a>
-      </h2>
-      <div class="post-meta">
-        08-02
-      </div>
-    </header>
-  </article>
-  
-  
-  <article class="posts-collapse">
-    <header>
-      <h2>
-        <a href="/blog/ast-in-css-module-auto-match/">
-          <span>AST 在 css module 自动匹配中的应用</span>
-        </a>
-      </h2>
-      <div class="post-meta">
-        07-26
-      </div>
-    </header>
-  </article>
-  
 </div>
   <nav class="page-navigation">
     
diff --git a/dist/archives/page/4/index.html b/dist/archives/page/4/index.html
index 95ba345..35707be 100644
--- a/dist/archives/page/4/index.html
+++ b/dist/archives/page/4/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
@@ -166,12 +166,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/react-usedeferredvalue/">
-          <span>React useDeferredValue在性能优化中的使用</span>
+        <a href="/blog/typescript-means/">
+          <span>TypeScript的小手段，最后更新2023/12月...</span>
         </a>
       </h2>
       <div class="post-meta">
-        07-05
+        08-02
       </div>
     </header>
   </article>
@@ -180,12 +180,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/react-usetransition/">
-          <span>React useTransition在性能优化中的使用</span>
+        <a href="/blog/ast-in-css-module-auto-match/">
+          <span>AST 在 css module 自动匹配中的应用</span>
         </a>
       </h2>
       <div class="post-meta">
-        07-05
+        07-26
       </div>
     </header>
   </article>
@@ -194,8 +194,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/react-performance%20optimization/">
-          <span>React的性能优化项，最后更新2023年07月...</span>
+        <a href="/blog/react-usedeferredvalue/">
+          <span>React useDeferredValue在性能优化中的使用</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -208,8 +208,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/es6-destructuring/">
-          <span>整理ES6：解构赋值</span>
+        <a href="/blog/react-usetransition/">
+          <span>React useTransition在性能优化中的使用</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -222,8 +222,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/es6-operator/">
-          <span>整理ES6：运算符</span>
+        <a href="/blog/react-performance%20optimization/">
+          <span>React的性能优化项，最后更新2023年07月...</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -236,8 +236,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/es6-symbol/">
-          <span>整理ES6：聊一聊Symbol </span>
+        <a href="/blog/es6-destructuring/">
+          <span>整理ES6：解构赋值</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -250,8 +250,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/es6-set/">
-          <span>整理ES6：Set真的挺好的</span>
+        <a href="/blog/es6-operator/">
+          <span>整理ES6：运算符</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -264,8 +264,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/es6-map/">
-          <span>整理ES6：Map真的挺好的</span>
+        <a href="/blog/es6-symbol/">
+          <span>整理ES6：聊一聊Symbol </span>
         </a>
       </h2>
       <div class="post-meta">
@@ -278,8 +278,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/es6-proxy/">
-          <span>整理ES6：Proxy的应用场景</span>
+        <a href="/blog/es6-set/">
+          <span>整理ES6：Set真的挺好的</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -292,8 +292,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/es6-reflect/">
-          <span>整理ES6：Reflect和Object的关系</span>
+        <a href="/blog/es6-map/">
+          <span>整理ES6：Map真的挺好的</span>
         </a>
       </h2>
       <div class="post-meta">
diff --git a/dist/archives/page/5/index.html b/dist/archives/page/5/index.html
index d517169..c2a06ac 100644
--- a/dist/archives/page/5/index.html
+++ b/dist/archives/page/5/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>Wow! 一共有 50 篇文章</span>
+      <span>Wow! 一共有 52 篇文章</span>
     
   </span>
   
@@ -166,8 +166,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/github-actions-runs/">
-          <span>6. GitHub Actions - Managing workflow runs</span>
+        <a href="/blog/es6-proxy/">
+          <span>整理ES6：Proxy的应用场景</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -180,8 +180,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/github-actions-jobs/">
-          <span>5. GitHub Actions - Using jobs</span>
+        <a href="/blog/es6-reflect/">
+          <span>整理ES6：Reflect和Object的关系</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -194,8 +194,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/github-actions-workflows/">
-          <span>4. GitHub Actions - Using workflows</span>
+        <a href="/blog/github-actions-runs/">
+          <span>6. GitHub Actions - Managing workflow runs</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -208,8 +208,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/github-actions-examples/">
-          <span>3. GitHub Actions - Examples</span>
+        <a href="/blog/github-actions-jobs/">
+          <span>5. GitHub Actions - Using jobs</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -222,8 +222,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/github-actions-learn/">
-          <span>2. GitHub Actions - Learn GitHub Actions</span>
+        <a href="/blog/github-actions-workflows/">
+          <span>4. GitHub Actions - Using workflows</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -236,8 +236,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/github-actions-quickstart/">
-          <span>1. GitHub Actions - Quickstart</span>
+        <a href="/blog/github-actions-examples/">
+          <span>3. GitHub Actions - Examples</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -250,8 +250,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/github-actions-intro/">
-          <span>0. GitHub Actions - Intro</span>
+        <a href="/blog/github-actions-learn/">
+          <span>2. GitHub Actions - Learn GitHub Actions</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -264,8 +264,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/write-components-elegantly-using-radix/">
-          <span>从Radix看如何优雅写组件</span>
+        <a href="/blog/github-actions-quickstart/">
+          <span>1. GitHub Actions - Quickstart</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -278,8 +278,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/es6-promise/">
-          <span>整理ES6：Promise的忽略点和几个方法的区别</span>
+        <a href="/blog/github-actions-intro/">
+          <span>0. GitHub Actions - Intro</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -292,8 +292,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/what-is-es6/">
-          <span>整理ES6：ES6是什么？</span>
+        <a href="/blog/write-components-elegantly-using-radix/">
+          <span>从Radix看如何优雅写组件</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -308,6 +308,8 @@ <h2>
       <a href="/blog/archives/page/4/">上一页</a>
     
     
+      <a href="/blog/archives/page/6/">下一页</a>
+    
   </nav>
 </div>
 
diff --git a/dist/archives/page/6/index.html b/dist/archives/page/6/index.html
new file mode 100644
index 0000000..b807ec8
--- /dev/null
+++ b/dist/archives/page/6/index.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+  
+<head>
+  <meta charset="utf-8">
+  <meta name="author" content="董沅鑫, yuanxin.me@gmail.com" />
+  
+  
+  
+  <title>归档 | TaoLiuJun&#39;s Blog</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  
+    <meta name="keywords" content="" />
+  
+
+  <script>
+    console.log('\n%c Hexo-theme-bmw v4.0 ' + '%c 🎉 https://github.com/dongyuanxin/theme-bmw 🎉\n' + '\n%c View demo online ' + '%c 🔍 https://godbmw.com/ 🔍  \n' , 'color: #fadfa3; background: #030307; padding:3px 0;', '', 'color: #fadfa3; background: #030307; padding:3px 0;', '');
+  </script>
+
+  
+    <meta name="description" content="Html/Css/JavaScript/TypeScript的学习心得；React的学习心得；技术设计思想；生活随想；">
+  
+
+  
+
+  
+    <link rel="icon" href="/images/favicon.ico">
+    <link rel="apple-touch-icon" href="/images/touch-icon.png">
+  
+
+  <link href="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.css" rel="stylesheet">
+  
+<link rel="stylesheet" href="/blog/css/base.css">
+<link rel="stylesheet" href="/blog/icon/iconfont.css">
+<link rel="stylesheet" href="/blog/css/github-markdown.css">
+<link rel="stylesheet" href="/blog/css/highlight.css">
+
+
+  
+<script src="/blog/js/util.js"></script>
+<script src="/blog/js/valine.min.js"></script>
+
+
+  
+
+  
+
+  
+  
+  <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js" async></script>
+  
+  
+
+<meta name="generator" content="Hexo 6.3.0"></head>
+
+  <body>
+
+    
+
+    <div id="app">
+
+      <div class="header-wrap">
+  <header>
+    <div class="site-brand">
+      <div class="site-title">
+        <a href="/blog/">Taoliujun&#39;s Blog</a>
+      </div>
+    </div>
+    <nav class="site-navigation">
+      <ul class="nav-menu">
+      
+        <li class="nav-item" data-path="/">
+          
+            <a 
+              href="/blog/"
+              target="_self"
+            >
+              主页
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="/archives/">
+          
+            <a 
+              href="/blog/archives/"
+              target="_self"
+            >
+              所有文章
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="https://github.com/taoliujun/blog/issues">
+          
+            <a 
+              href="https://github.com/taoliujun/blog/issues"
+              target="_self"
+            >
+              github
+            </a>
+          
+        </li>
+      
+      </ul>
+    </nav>
+    <i class="iconfont icon-menu"></i>
+  </header>
+</div>
+
+<script>
+  let links = document.querySelectorAll('.nav-item');
+  for(let link of links){
+    let childrenLink = link.querySelector('ul');
+    link.addEventListener('mouseenter', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown active";
+      }
+    })
+    link.addEventListener('mouseleave', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown";
+      }
+    })
+  }
+  let rootRealPath = getRealPath(window.location.pathname, true);
+  for(let link of links) {
+    let linkPath = link.getAttribute("data-path");
+    if(linkPath && getRealPath(linkPath, true) === rootRealPath) {
+      link.className = "nav-item hover";
+    }
+  }
+
+  let iconMenu = document.querySelector("i.iconfont.icon-menu"),
+    iconMenuClicked = false;
+  let navDOM = document.querySelector("nav.site-navigation");
+  iconMenu.addEventListener("click", () => {
+    iconMenuClicked 
+      ? navDOM.className = "site-navigation active"
+      : navDOM.className = "site-navigation";
+    iconMenuClicked = !iconMenuClicked;
+  })
+</script>
+
+      <div class="container">
+  <div class="timeline">
+  <span class="archive-move-on"></span>
+  <span class="archive-page-counter">
+    
+      <span>Wow! 一共有 52 篇文章</span>
+    
+  </span>
+  
+  
+    <div class="collection-title">
+      <h2>
+        <span>2023</span>
+      </h2>
+    </div>
+  
+  
+  
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/es6-promise/">
+          <span>整理ES6：Promise的忽略点和几个方法的区别</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        07-05
+      </div>
+    </header>
+  </article>
+  
+  
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/what-is-es6/">
+          <span>整理ES6：ES6是什么？</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        07-05
+      </div>
+    </header>
+  </article>
+  
+</div>
+  <nav class="page-navigation">
+    
+      <a href="/blog/archives/page/5/">上一页</a>
+    
+    
+  </nav>
+</div>
+
+      <footer>
+  <p class="site-info">
+    Powered by <a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a> | Theme - <a target="_blank" rel="noopener" href="https://github.com/dongyuanxin/theme-bmw">BMW</a>
+    <br>
+    
+  </p>
+</footer>
+
+      <div class="back-to-top hidden">
+  <span>
+    <i class="iconfont icon-60"></i><span></span>%
+  </span>
+</div>
+
+<script>
+const updateIconToTop = percent => {
+  let dom = document.querySelector(".back-to-top span span");
+  dom.innerText = percent;
+  if(percent < 1) {
+    document.querySelector(".back-to-top").className = "back-to-top hidden";
+  } else {
+    document.querySelector(".back-to-top").className = "back-to-top";
+  }
+}
+
+const handleScoll = () => {
+  let isRunning = false;
+  return () => {
+    if (isRunning) return;
+    isRunning = true;
+    window.requestAnimationFrame(timestamp => {
+      let scrollTop =
+          document.documentElement.scrollTop || document.body.scrollTop,
+        scrollHeight =
+          document.documentElement.scrollHeight ||
+          document.body.scrollHeight,
+        clientHeight =
+          document.documentElement.clientHeight ||
+          document.body.clientHeight;
+      isRunning = false;
+      if (scrollTop <= 1) {
+        updateIconToTop(0);
+        return;
+      }
+      if (scrollTop + clientHeight >= scrollHeight) {
+        updateIconToTop(100);
+      } else {
+        updateIconToTop(parseInt(
+          100 * scrollTop / (scrollHeight - clientHeight),
+          10
+        ));
+      }
+    });
+  };
+}
+
+const backToTop = () => {
+  let scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop,
+    delay = 10,
+    time = 200;
+  if (scrollTop <= 20) {
+    document.documentElement.scrollTop = 0;
+    document.body.scrollTop = 0;
+    return;
+  }
+  let step = Math.ceil(scrollTop * delay / time);
+  let timer = setInterval(() => {
+    scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop;
+    if (scrollTop - step <= 0) {
+      document.documentElement.scrollTop = 0;
+      document.body.scrollTop = 0;
+      clearInterval(timer);
+    } else {
+      document.documentElement.scrollTop = scrollTop - step;
+      document.body.scrollTop = scrollTop - step;
+    }
+  }, delay);
+}
+
+document.addEventListener("scroll", handleScoll(), false);
+
+document.querySelector(".back-to-top").addEventListener("click", backToTop, false);
+
+</script>
+
+    </div>
+
+    
+      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
+<script>
+  (() => {
+    const mathjaxConfig = {
+      showProcessingMessages: false, //关闭js加载过程信息
+      messageStyle: "none", //不显示信息
+      jax: ["input/TeX", "output/HTML-CSS"],
+      tex2jax: {
+        inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
+        displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
+        skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
+      },
+      "HTML-CSS": {
+        availableFonts: ["STIX", "TeX"], //可选字体
+        showMathMenu: false //关闭右击菜单显示
+      }
+    }
+
+    let mathjaxInterval = setInterval(() => {
+      if(!window.MathJax){
+        return;
+      }
+      window.MathJax.Hub.Config(mathjaxConfig)
+      window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')])
+
+      clearInterval(mathjaxInterval)
+    }, 10)    
+  })()
+</script>
+    
+
+    <script src="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.js" async></script>
+<script async>
+  let fancyTimer = setInterval(function(){
+    if(!window.$){
+      return;
+    }
+    $(document).ready(function() {
+      $(".post img").each(function () {
+        if($(this).parent().get(0).tagName.toLowerCase() === "a") {
+          return;
+        }
+        // $(this).attr("data-fancybox", "gallery"); // if you add 'data-fancybox', img will display after showed
+        var element = document.createElement("a");
+        $(element).attr("data-fancybox", "gallery");
+        $(element).attr("href", $(this).attr("src"));
+        $(this).wrap(element);
+      });
+      
+      clearInterval(fancyTimer);
+    });
+  }, 10);
+</script>
+
+    
+  </body>
+
+</html>
diff --git a/dist/categories/Web-API/index.html b/dist/categories/Web-API/index.html
index b294b43..1f9e045 100644
--- a/dist/categories/Web-API/index.html
+++ b/dist/categories/Web-API/index.html
@@ -150,7 +150,7 @@
   <span class="archive-move-on"></span>
   <span class="archive-page-counter">
     
-      <span>当前位于 1/1 页</span>
+      <span>当前位于 1/2 页</span>
     
   </span>
   
@@ -168,12 +168,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Geolocation_API/">
-          <span>Web API - Geolocation</span>
+        <a href="/blog/web-api-Intersection_Observer_API/">
+          <span>Web Api - Intersection Observer</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-14
+        03-20
       </div>
     </header>
   </article>
@@ -182,12 +182,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Fullscreen_API/">
-          <span>Web API - Fullscreen</span>
+        <a href="/blog/web-api-HTML_Drag_and_Drop_API/">
+          <span>Web API - HTML Drag And Drop</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-14
+        03-20
       </div>
     </header>
   </article>
@@ -196,12 +196,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-File_System_API/">
-          <span>Web API - File System</span>
+        <a href="/blog/web-api-Geolocation_API/">
+          <span>Web API - Geolocation</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-12
+        03-14
       </div>
     </header>
   </article>
@@ -210,12 +210,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-File_API/">
-          <span>Web API - File</span>
+        <a href="/blog/web-api-Fullscreen_API/">
+          <span>Web API - Fullscreen</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-12
+        03-14
       </div>
     </header>
   </article>
@@ -224,8 +224,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-EyeDropper_API/">
-          <span>Web API - EyeDropper</span>
+        <a href="/blog/web-api-File_System_API/">
+          <span>Web API - File System</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -238,12 +238,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Document_Picture-in-Picture_API/">
-          <span>Web API - Document Picture-in-Picture</span>
+        <a href="/blog/web-api-File_API/">
+          <span>Web API - File</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-11
+        03-12
       </div>
     </header>
   </article>
@@ -252,12 +252,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Device_orientation_events/">
-          <span>Web API - Device Orientation</span>
+        <a href="/blog/web-api-EyeDropper_API/">
+          <span>Web API - EyeDropper</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-11
+        03-12
       </div>
     </header>
   </article>
@@ -266,8 +266,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Document_Object_Model/">
-          <span>Web API - DOM</span>
+        <a href="/blog/web-api-Document_Picture-in-Picture_API/">
+          <span>Web API - Document Picture-in-Picture</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -280,8 +280,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Device_Memory_API/">
-          <span>Web API - Device Memory</span>
+        <a href="/blog/web-api-Device_orientation_events/">
+          <span>Web API - Device Orientation</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -294,12 +294,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-readme/">
-          <span>Web API 实践，最后更新2024/02月...</span>
+        <a href="/blog/web-api-Document_Object_Model/">
+          <span>Web API - DOM</span>
         </a>
       </h2>
       <div class="post-meta">
-        02-28
+        03-11
       </div>
     </header>
   </article>
@@ -308,6 +308,8 @@ <h2>
   <nav class="page-navigation">
     
     
+      <a href="/blog/categories/Web-API/page/2/">下一页</a>
+    
   </nav>
 </div>
 
diff --git a/dist/categories/Web-API/page/2/index.html b/dist/categories/Web-API/page/2/index.html
new file mode 100644
index 0000000..bca038c
--- /dev/null
+++ b/dist/categories/Web-API/page/2/index.html
@@ -0,0 +1,351 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+  
+<head>
+  <meta charset="utf-8">
+  <meta name="author" content="董沅鑫, yuanxin.me@gmail.com" />
+  
+  
+  
+  <title>分类: Web API | TaoLiuJun&#39;s Blog</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  
+    <meta name="keywords" content="" />
+  
+
+  <script>
+    console.log('\n%c Hexo-theme-bmw v4.0 ' + '%c 🎉 https://github.com/dongyuanxin/theme-bmw 🎉\n' + '\n%c View demo online ' + '%c 🔍 https://godbmw.com/ 🔍  \n' , 'color: #fadfa3; background: #030307; padding:3px 0;', '', 'color: #fadfa3; background: #030307; padding:3px 0;', '');
+  </script>
+
+  
+    <meta name="description" content="Html/Css/JavaScript/TypeScript的学习心得；React的学习心得；技术设计思想；生活随想；">
+  
+
+  
+
+  
+    <link rel="icon" href="/images/favicon.ico">
+    <link rel="apple-touch-icon" href="/images/touch-icon.png">
+  
+
+  <link href="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.css" rel="stylesheet">
+  
+<link rel="stylesheet" href="/blog/css/base.css">
+<link rel="stylesheet" href="/blog/icon/iconfont.css">
+<link rel="stylesheet" href="/blog/css/github-markdown.css">
+<link rel="stylesheet" href="/blog/css/highlight.css">
+
+
+  
+<script src="/blog/js/util.js"></script>
+<script src="/blog/js/valine.min.js"></script>
+
+
+  
+
+  
+
+  
+  
+  <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js" async></script>
+  
+  
+
+<meta name="generator" content="Hexo 6.3.0"></head>
+
+  <body>
+
+    
+
+    <div id="app">
+
+      <div class="header-wrap">
+  <header>
+    <div class="site-brand">
+      <div class="site-title">
+        <a href="/blog/">Taoliujun&#39;s Blog</a>
+      </div>
+    </div>
+    <nav class="site-navigation">
+      <ul class="nav-menu">
+      
+        <li class="nav-item" data-path="/">
+          
+            <a 
+              href="/blog/"
+              target="_self"
+            >
+              主页
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="/archives/">
+          
+            <a 
+              href="/blog/archives/"
+              target="_self"
+            >
+              所有文章
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="https://github.com/taoliujun/blog/issues">
+          
+            <a 
+              href="https://github.com/taoliujun/blog/issues"
+              target="_self"
+            >
+              github
+            </a>
+          
+        </li>
+      
+      </ul>
+    </nav>
+    <i class="iconfont icon-menu"></i>
+  </header>
+</div>
+
+<script>
+  let links = document.querySelectorAll('.nav-item');
+  for(let link of links){
+    let childrenLink = link.querySelector('ul');
+    link.addEventListener('mouseenter', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown active";
+      }
+    })
+    link.addEventListener('mouseleave', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown";
+      }
+    })
+  }
+  let rootRealPath = getRealPath(window.location.pathname, true);
+  for(let link of links) {
+    let linkPath = link.getAttribute("data-path");
+    if(linkPath && getRealPath(linkPath, true) === rootRealPath) {
+      link.className = "nav-item hover";
+    }
+  }
+
+  let iconMenu = document.querySelector("i.iconfont.icon-menu"),
+    iconMenuClicked = false;
+  let navDOM = document.querySelector("nav.site-navigation");
+  iconMenu.addEventListener("click", () => {
+    iconMenuClicked 
+      ? navDOM.className = "site-navigation active"
+      : navDOM.className = "site-navigation";
+    iconMenuClicked = !iconMenuClicked;
+  })
+</script>
+
+      <div class="container">
+  <div class="timeline">
+  <span class="archive-move-on"></span>
+  <span class="archive-page-counter">
+    
+      <span>当前位于 2/2 页</span>
+    
+  </span>
+  
+  
+    <div class="collection-title">
+      <h2>
+        
+          <span>分类 : Web API</span>
+        
+      </h2>
+    </div>
+  
+  
+  
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Device_Memory_API/">
+          <span>Web API - Device Memory</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        03-11
+      </div>
+    </header>
+  </article>
+  
+  
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-readme/">
+          <span>Web API 实践，最后更新2024/02月...</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        02-28
+      </div>
+    </header>
+  </article>
+  
+</div>
+  <nav class="page-navigation">
+    
+      <a href="/blog/categories/Web-API/">上一页</a>
+    
+    
+  </nav>
+</div>
+
+      <footer>
+  <p class="site-info">
+    Powered by <a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a> | Theme - <a target="_blank" rel="noopener" href="https://github.com/dongyuanxin/theme-bmw">BMW</a>
+    <br>
+    
+  </p>
+</footer>
+
+      <div class="back-to-top hidden">
+  <span>
+    <i class="iconfont icon-60"></i><span></span>%
+  </span>
+</div>
+
+<script>
+const updateIconToTop = percent => {
+  let dom = document.querySelector(".back-to-top span span");
+  dom.innerText = percent;
+  if(percent < 1) {
+    document.querySelector(".back-to-top").className = "back-to-top hidden";
+  } else {
+    document.querySelector(".back-to-top").className = "back-to-top";
+  }
+}
+
+const handleScoll = () => {
+  let isRunning = false;
+  return () => {
+    if (isRunning) return;
+    isRunning = true;
+    window.requestAnimationFrame(timestamp => {
+      let scrollTop =
+          document.documentElement.scrollTop || document.body.scrollTop,
+        scrollHeight =
+          document.documentElement.scrollHeight ||
+          document.body.scrollHeight,
+        clientHeight =
+          document.documentElement.clientHeight ||
+          document.body.clientHeight;
+      isRunning = false;
+      if (scrollTop <= 1) {
+        updateIconToTop(0);
+        return;
+      }
+      if (scrollTop + clientHeight >= scrollHeight) {
+        updateIconToTop(100);
+      } else {
+        updateIconToTop(parseInt(
+          100 * scrollTop / (scrollHeight - clientHeight),
+          10
+        ));
+      }
+    });
+  };
+}
+
+const backToTop = () => {
+  let scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop,
+    delay = 10,
+    time = 200;
+  if (scrollTop <= 20) {
+    document.documentElement.scrollTop = 0;
+    document.body.scrollTop = 0;
+    return;
+  }
+  let step = Math.ceil(scrollTop * delay / time);
+  let timer = setInterval(() => {
+    scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop;
+    if (scrollTop - step <= 0) {
+      document.documentElement.scrollTop = 0;
+      document.body.scrollTop = 0;
+      clearInterval(timer);
+    } else {
+      document.documentElement.scrollTop = scrollTop - step;
+      document.body.scrollTop = scrollTop - step;
+    }
+  }, delay);
+}
+
+document.addEventListener("scroll", handleScoll(), false);
+
+document.querySelector(".back-to-top").addEventListener("click", backToTop, false);
+
+</script>
+
+    </div>
+
+    
+      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
+<script>
+  (() => {
+    const mathjaxConfig = {
+      showProcessingMessages: false, //关闭js加载过程信息
+      messageStyle: "none", //不显示信息
+      jax: ["input/TeX", "output/HTML-CSS"],
+      tex2jax: {
+        inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
+        displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
+        skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
+      },
+      "HTML-CSS": {
+        availableFonts: ["STIX", "TeX"], //可选字体
+        showMathMenu: false //关闭右击菜单显示
+      }
+    }
+
+    let mathjaxInterval = setInterval(() => {
+      if(!window.MathJax){
+        return;
+      }
+      window.MathJax.Hub.Config(mathjaxConfig)
+      window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')])
+
+      clearInterval(mathjaxInterval)
+    }, 10)    
+  })()
+</script>
+    
+
+    <script src="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.js" async></script>
+<script async>
+  let fancyTimer = setInterval(function(){
+    if(!window.$){
+      return;
+    }
+    $(document).ready(function() {
+      $(".post img").each(function () {
+        if($(this).parent().get(0).tagName.toLowerCase() === "a") {
+          return;
+        }
+        // $(this).attr("data-fancybox", "gallery"); // if you add 'data-fancybox', img will display after showed
+        var element = document.createElement("a");
+        $(element).attr("data-fancybox", "gallery");
+        $(element).attr("href", $(this).attr("src"));
+        $(this).wrap(element);
+      });
+      
+      clearInterval(fancyTimer);
+    });
+  }, 10);
+</script>
+
+    
+  </body>
+
+</html>
diff --git a/dist/index.html b/dist/index.html
index 0d07099..926207c 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -150,20 +150,20 @@
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-Geolocation_API/">
-        <span>Web API - Geolocation</span>
+      <a href="/blog/web-api-Intersection_Observer_API/">
+        <span>Web Api - Intersection Observer</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-03-14
+        发布时间 : 2024-03-20
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-03-14
+        发布 : 2024-03-20
       </span>
       
         <span>
@@ -204,8 +204,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/Geolocation/">
-                  #Geolocation
+                <a href="/blog/tags/Intersection-Observer/">
+                  #Intersection Observer
                 </a>
               </span>
             
@@ -218,20 +218,20 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-Fullscreen_API/">
-        <span>Web API - Fullscreen</span>
+      <a href="/blog/web-api-HTML_Drag_and_Drop_API/">
+        <span>Web API - HTML Drag And Drop</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-03-14
+        发布时间 : 2024-03-20
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-03-14
+        发布 : 2024-03-20
       </span>
       
         <span>
@@ -272,8 +272,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/Fullscreen/">
-                  #Fullscreen
+                <a href="/blog/tags/Drag-Drop/">
+                  #Drag Drop
                 </a>
               </span>
             
@@ -286,20 +286,20 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-File_System_API/">
-        <span>Web API - File System</span>
+      <a href="/blog/web-api-Geolocation_API/">
+        <span>Web API - Geolocation</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-03-12
+        发布时间 : 2024-03-14
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-03-12
+        发布 : 2024-03-14
       </span>
       
         <span>
@@ -340,8 +340,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/File-System/">
-                  #File System
+                <a href="/blog/tags/Geolocation/">
+                  #Geolocation
                 </a>
               </span>
             
@@ -354,20 +354,20 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-File_API/">
-        <span>Web API - File</span>
+      <a href="/blog/web-api-Fullscreen_API/">
+        <span>Web API - Fullscreen</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-03-12
+        发布时间 : 2024-03-14
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-03-12
+        发布 : 2024-03-14
       </span>
       
         <span>
@@ -408,8 +408,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/File/">
-                  #File
+                <a href="/blog/tags/Fullscreen/">
+                  #Fullscreen
                 </a>
               </span>
             
@@ -422,8 +422,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-EyeDropper_API/">
-        <span>Web API - EyeDropper</span>
+      <a href="/blog/web-api-File_System_API/">
+        <span>Web API - File System</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -476,8 +476,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/EyeDropper/">
-                  #EyeDropper
+                <a href="/blog/tags/File-System/">
+                  #File System
                 </a>
               </span>
             
@@ -490,20 +490,20 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-Document_Picture-in-Picture_API/">
-        <span>Web API - Document Picture-in-Picture</span>
+      <a href="/blog/web-api-File_API/">
+        <span>Web API - File</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-03-11
+        发布时间 : 2024-03-12
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-03-11
+        发布 : 2024-03-12
       </span>
       
         <span>
@@ -544,8 +544,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/Document-Picture-in-Picture/">
-                  #Document Picture-in-Picture
+                <a href="/blog/tags/File/">
+                  #File
                 </a>
               </span>
             
@@ -558,20 +558,20 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-Device_orientation_events/">
-        <span>Web API - Device Orientation</span>
+      <a href="/blog/web-api-EyeDropper_API/">
+        <span>Web API - EyeDropper</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-03-11
+        发布时间 : 2024-03-12
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-03-11
+        发布 : 2024-03-12
       </span>
       
         <span>
@@ -612,8 +612,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/Device-Orientation/">
-                  #Device Orientation
+                <a href="/blog/tags/EyeDropper/">
+                  #EyeDropper
                 </a>
               </span>
             
@@ -626,8 +626,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-Document_Object_Model/">
-        <span>Web API - DOM</span>
+      <a href="/blog/web-api-Document_Picture-in-Picture_API/">
+        <span>Web API - Document Picture-in-Picture</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -680,8 +680,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/DOM/">
-                  #DOM
+                <a href="/blog/tags/Document-Picture-in-Picture/">
+                  #Document Picture-in-Picture
                 </a>
               </span>
             
@@ -694,8 +694,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-Device_Memory_API/">
-        <span>Web API - Device Memory</span>
+      <a href="/blog/web-api-Device_orientation_events/">
+        <span>Web API - Device Orientation</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -748,8 +748,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/Device-Memory/">
-                  #Device Memory
+                <a href="/blog/tags/Device-Orientation/">
+                  #Device Orientation
                 </a>
               </span>
             
@@ -762,26 +762,26 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-Credential_Management_API/">
-        <span>Web API - Credential Management</span>
+      <a href="/blog/web-api-Document_Object_Model/">
+        <span>Web API - DOM</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-03-07
+        发布时间 : 2024-03-11
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-03-07
+        发布 : 2024-03-11
       </span>
       
         <span>
         分类 :
-          <a href="/blog/categories/JavaScript/">
-            JavaScript
+          <a href="/blog/categories/Web-API/">
+            Web API
           </a>
         </span>
       
@@ -800,8 +800,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/JavaScript/">
-              JavaScript
+            <a href="/blog/categories/Web-API/">
+              Web API
             </a>
           </span>
           
@@ -816,8 +816,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/Credential-Management/">
-                  #Credential Management
+                <a href="/blog/tags/DOM/">
+                  #DOM
                 </a>
               </span>
             
diff --git a/dist/page/2/index.html b/dist/page/2/index.html
index f97b627..cb05ab6 100644
--- a/dist/page/2/index.html
+++ b/dist/page/2/index.html
@@ -152,26 +152,26 @@
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-Cookie_Store_API/">
-        <span>Web API - CookieStore</span>
+      <a href="/blog/web-api-Device_Memory_API/">
+        <span>Web API - Device Memory</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-03-07
+        发布时间 : 2024-03-11
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-03-07
+        发布 : 2024-03-11
       </span>
       
         <span>
         分类 :
-          <a href="/blog/categories/JavaScript/">
-            JavaScript
+          <a href="/blog/categories/Web-API/">
+            Web API
           </a>
         </span>
       
@@ -190,8 +190,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/JavaScript/">
-              JavaScript
+            <a href="/blog/categories/Web-API/">
+              Web API
             </a>
           </span>
           
@@ -206,8 +206,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/CookieStore/">
-                  #CookieStore
+                <a href="/blog/tags/Device-Memory/">
+                  #Device Memory
                 </a>
               </span>
             
@@ -220,8 +220,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-Clipboard_API/">
-        <span>Web API - Clipboard</span>
+      <a href="/blog/web-api-Credential_Management_API/">
+        <span>Web API - Credential Management</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -274,8 +274,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/Clipboard/">
-                  #Clipboard
+                <a href="/blog/tags/Credential-Management/">
+                  #Credential Management
                 </a>
               </span>
             
@@ -288,20 +288,20 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-CSS_Object_Model/">
-        <span>Web API - CSSOM (CSS_Object_Model)</span>
+      <a href="/blog/web-api-Cookie_Store_API/">
+        <span>Web API - CookieStore</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-03-06
+        发布时间 : 2024-03-07
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-03-06
+        发布 : 2024-03-07
       </span>
       
         <span>
@@ -342,8 +342,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/CSSOM/">
-                  #CSSOM
+                <a href="/blog/tags/CookieStore/">
+                  #CookieStore
                 </a>
               </span>
             
@@ -356,20 +356,20 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-CSS_Typed_OM_API/">
-        <span>Web API - CSS Typed Object Model</span>
+      <a href="/blog/web-api-Clipboard_API/">
+        <span>Web API - Clipboard</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-03-06
+        发布时间 : 2024-03-07
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-03-06
+        发布 : 2024-03-07
       </span>
       
         <span>
@@ -410,8 +410,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/CSS-Typed-OM/">
-                  #CSS Typed OM
+                <a href="/blog/tags/Clipboard/">
+                  #Clipboard
                 </a>
               </span>
             
@@ -424,20 +424,20 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-CSS_Properties_and_Values_API/">
-        <span>Web API - CSS Properties and Values</span>
+      <a href="/blog/web-api-CSS_Object_Model/">
+        <span>Web API - CSSOM (CSS_Object_Model)</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-03-05
+        发布时间 : 2024-03-06
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-03-05
+        发布 : 2024-03-06
       </span>
       
         <span>
@@ -478,8 +478,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/CSS-Properties-and-Values/">
-                  #CSS Properties and Values
+                <a href="/blog/tags/CSSOM/">
+                  #CSSOM
                 </a>
               </span>
             
@@ -492,20 +492,20 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-CSS_Font_Loading_API/">
-        <span>Web API - CSS Font Loading</span>
+      <a href="/blog/web-api-CSS_Typed_OM_API/">
+        <span>Web API - CSS Typed Object Model</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-03-04
+        发布时间 : 2024-03-06
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-03-04
+        发布 : 2024-03-06
       </span>
       
         <span>
@@ -546,8 +546,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/CSS-Font-Loading/">
-                  #CSS Font Loading
+                <a href="/blog/tags/CSS-Typed-OM/">
+                  #CSS Typed OM
                 </a>
               </span>
             
@@ -560,20 +560,20 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-CSS_Custom_Highlight_API/">
-        <span>Web API - CSS Custom Highlight</span>
+      <a href="/blog/web-api-CSS_Properties_and_Values_API/">
+        <span>Web API - CSS Properties and Values</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-03-04
+        发布时间 : 2024-03-05
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-03-04
+        发布 : 2024-03-05
       </span>
       
         <span>
@@ -614,8 +614,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/CSS-Custom-Highlight/">
-                  #CSS Custom Highlight
+                <a href="/blog/tags/CSS-Properties-and-Values/">
+                  #CSS Properties and Values
                 </a>
               </span>
             
@@ -628,20 +628,20 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-Broadcast_Channel_API/">
-        <span>Web API - Broadcast Channel</span>
+      <a href="/blog/web-api-CSS_Font_Loading_API/">
+        <span>Web API - CSS Font Loading</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-03-01
+        发布时间 : 2024-03-04
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-03-01
+        发布 : 2024-03-04
       </span>
       
         <span>
@@ -682,8 +682,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/Broadcast-Channel/">
-                  #Broadcast Channel
+                <a href="/blog/tags/CSS-Font-Loading/">
+                  #CSS Font Loading
                 </a>
               </span>
             
@@ -696,20 +696,20 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-Battery_Status_API/">
-        <span>Web API - Battery Status</span>
+      <a href="/blog/web-api-CSS_Custom_Highlight_API/">
+        <span>Web API - CSS Custom Highlight</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-03-01
+        发布时间 : 2024-03-04
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-03-01
+        发布 : 2024-03-04
       </span>
       
         <span>
@@ -750,8 +750,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/Battery-Status/">
-                  #Battery Status
+                <a href="/blog/tags/CSS-Custom-Highlight/">
+                  #CSS Custom Highlight
                 </a>
               </span>
             
@@ -764,20 +764,20 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-Background_Tasks_API/">
-        <span>Web API - Background Tasks</span>
+      <a href="/blog/web-api-Broadcast_Channel_API/">
+        <span>Web API - Broadcast Channel</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-02-29
+        发布时间 : 2024-03-01
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-02-29
+        发布 : 2024-03-01
       </span>
       
         <span>
@@ -818,8 +818,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/Background-Tasks/">
-                  #Background Tasks
+                <a href="/blog/tags/Broadcast-Channel/">
+                  #Broadcast Channel
                 </a>
               </span>
             
diff --git a/dist/page/3/index.html b/dist/page/3/index.html
index 5a41f63..5f2b5cc 100644
--- a/dist/page/3/index.html
+++ b/dist/page/3/index.html
@@ -152,20 +152,20 @@
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-Beacon_API/">
-        <span>Web API - Beacon</span>
+      <a href="/blog/web-api-Battery_Status_API/">
+        <span>Web API - Battery Status</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-02-28
+        发布时间 : 2024-03-01
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-02-28
+        发布 : 2024-03-01
       </span>
       
         <span>
@@ -206,8 +206,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/Beacon/">
-                  #Beacon
+                <a href="/blog/tags/Battery-Status/">
+                  #Battery Status
                 </a>
               </span>
             
@@ -220,20 +220,20 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-Badging_API/">
-        <span>Web API - Badging</span>
+      <a href="/blog/web-api-Background_Tasks_API/">
+        <span>Web API - Background Tasks</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-02-28
+        发布时间 : 2024-02-29
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-02-28
+        发布 : 2024-02-29
       </span>
       
         <span>
@@ -274,8 +274,8 @@ <h1 class="article-title">
               </span>
             
               <span class="span--tag">
-                <a href="/blog/tags/Badging/">
-                  #Badging
+                <a href="/blog/tags/Background-Tasks/">
+                  #Background Tasks
                 </a>
               </span>
             
@@ -288,8 +288,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/web-api-readme/">
-        <span>Web API 实践，最后更新2024/02月...</span>
+      <a href="/blog/web-api-Beacon_API/">
+        <span>Web API - Beacon</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -306,8 +306,8 @@ <h1 class="article-title">
       
         <span>
         分类 :
-          <a href="/blog/categories/Web-API/">
-            Web API
+          <a href="/blog/categories/JavaScript/">
+            JavaScript
           </a>
         </span>
       
@@ -326,8 +326,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/Web-API/">
-              Web API
+            <a href="/blog/categories/JavaScript/">
+              JavaScript
             </a>
           </span>
           
@@ -341,6 +341,12 @@ <h1 class="article-title">
                 </a>
               </span>
             
+              <span class="span--tag">
+                <a href="/blog/tags/Beacon/">
+                  #Beacon
+                </a>
+              </span>
+            
                     
         </span>
       </div>
@@ -350,26 +356,26 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/snapshot-impact-on-coverage/">
-        <span>snapshot对单测覆盖率的影响以及应对方案</span>
+      <a href="/blog/web-api-Badging_API/">
+        <span>Web API - Badging</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2024-01-09
+        发布时间 : 2024-02-28
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2024-01-09
+        发布 : 2024-02-28
       </span>
       
         <span>
         分类 :
-          <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
-            工程化
+          <a href="/blog/categories/JavaScript/">
+            JavaScript
           </a>
         </span>
       
@@ -388,8 +394,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
-              工程化
+            <a href="/blog/categories/JavaScript/">
+              JavaScript
             </a>
           </span>
           
@@ -398,8 +404,14 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/jest/">
-                  #jest
+                <a href="/blog/tags/webapi/">
+                  #webapi
+                </a>
+              </span>
+            
+              <span class="span--tag">
+                <a href="/blog/tags/Badging/">
+                  #Badging
                 </a>
               </span>
             
@@ -412,26 +424,26 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/github-actions-sample-eslint-in-pull-request/">
-        <span>7. GitHub Actions - 在pull request中执行eslint检测的工作流例子</span>
+      <a href="/blog/web-api-readme/">
+        <span>Web API 实践，最后更新2024/02月...</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2023-12-28
+        发布时间 : 2024-02-28
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2023-12-28
+        发布 : 2024-02-28
       </span>
       
         <span>
         分类 :
-          <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
-            工程化
+          <a href="/blog/categories/Web-API/">
+            Web API
           </a>
         </span>
       
@@ -450,8 +462,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
-              工程化
+            <a href="/blog/categories/Web-API/">
+              Web API
             </a>
           </span>
           
@@ -460,8 +472,8 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/github-actions/">
-                  #github actions
+                <a href="/blog/tags/webapi/">
+                  #webapi
                 </a>
               </span>
             
@@ -474,26 +486,26 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/react-zustand/">
-        <span>React公共状态利器 - Zustand</span>
+      <a href="/blog/snapshot-impact-on-coverage/">
+        <span>snapshot对单测覆盖率的影响以及应对方案</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2023-12-12
+        发布时间 : 2024-01-09
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2023-12-12
+        发布 : 2024-01-09
       </span>
       
         <span>
         分类 :
-          <a href="/blog/categories/React/">
-            React
+          <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
+            工程化
           </a>
         </span>
       
@@ -512,8 +524,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/React/">
-              React
+            <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
+              工程化
             </a>
           </span>
           
@@ -522,14 +534,8 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/zustand/">
-                  #zustand
-                </a>
-              </span>
-            
-              <span class="span--tag">
-                <a href="/blog/tags/react-store/">
-                  #react store
+                <a href="/blog/tags/jest/">
+                  #jest
                 </a>
               </span>
             
@@ -542,20 +548,20 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/changesets-in-monorepo/">
-        <span>在monorepo中使用changesets</span>
+      <a href="/blog/github-actions-sample-eslint-in-pull-request/">
+        <span>7. GitHub Actions - 在pull request中执行eslint检测的工作流例子</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2023-12-08
+        发布时间 : 2023-12-28
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2023-12-08
+        发布 : 2023-12-28
       </span>
       
         <span>
@@ -590,8 +596,8 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/changesets/">
-                  #changesets
+                <a href="/blog/tags/github-actions/">
+                  #github actions
                 </a>
               </span>
             
@@ -604,26 +610,26 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/tsconfig-json/">
-        <span>关于tsconfig.json，最后更新2023/11月...</span>
+      <a href="/blog/react-zustand/">
+        <span>React公共状态利器 - Zustand</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2023-09-04
+        发布时间 : 2023-12-12
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2023-09-04
+        发布 : 2023-12-12
       </span>
       
         <span>
         分类 :
-          <a href="/blog/categories/TypeScript/">
-            TypeScript
+          <a href="/blog/categories/React/">
+            React
           </a>
         </span>
       
@@ -642,8 +648,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/TypeScript/">
-              TypeScript
+            <a href="/blog/categories/React/">
+              React
             </a>
           </span>
           
@@ -652,8 +658,14 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/typescript/">
-                  #typescript
+                <a href="/blog/tags/zustand/">
+                  #zustand
+                </a>
+              </span>
+            
+              <span class="span--tag">
+                <a href="/blog/tags/react-store/">
+                  #react store
                 </a>
               </span>
             
@@ -666,26 +678,26 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/typescript-means/">
-        <span>TypeScript的小手段，最后更新2023/12月...</span>
+      <a href="/blog/changesets-in-monorepo/">
+        <span>在monorepo中使用changesets</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2023-08-02
+        发布时间 : 2023-12-08
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2023-08-02
+        发布 : 2023-12-08
       </span>
       
         <span>
         分类 :
-          <a href="/blog/categories/TypeScript/">
-            TypeScript
+          <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
+            工程化
           </a>
         </span>
       
@@ -704,8 +716,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/TypeScript/">
-              TypeScript
+            <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
+              工程化
             </a>
           </span>
           
@@ -714,8 +726,8 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/typescript/">
-                  #typescript
+                <a href="/blog/tags/changesets/">
+                  #changesets
                 </a>
               </span>
             
@@ -728,26 +740,26 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/ast-in-css-module-auto-match/">
-        <span>AST 在 css module 自动匹配中的应用</span>
+      <a href="/blog/tsconfig-json/">
+        <span>关于tsconfig.json，最后更新2023/11月...</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2023-07-26
+        发布时间 : 2023-09-04
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2023-07-26
+        发布 : 2023-09-04
       </span>
       
         <span>
         分类 :
-          <a href="/blog/categories/JavaScript/">
-            JavaScript
+          <a href="/blog/categories/TypeScript/">
+            TypeScript
           </a>
         </span>
       
@@ -766,8 +778,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/JavaScript/">
-              JavaScript
+            <a href="/blog/categories/TypeScript/">
+              TypeScript
             </a>
           </span>
           
@@ -776,14 +788,8 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/ast/">
-                  #ast
-                </a>
-              </span>
-            
-              <span class="span--tag">
-                <a href="/blog/tags/css-module/">
-                  #css module
+                <a href="/blog/tags/typescript/">
+                  #typescript
                 </a>
               </span>
             
diff --git a/dist/page/4/index.html b/dist/page/4/index.html
index 7cb68e4..5ff1814 100644
--- a/dist/page/4/index.html
+++ b/dist/page/4/index.html
@@ -152,26 +152,26 @@
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/react-usedeferredvalue/">
-        <span>React useDeferredValue在性能优化中的使用</span>
+      <a href="/blog/typescript-means/">
+        <span>TypeScript的小手段，最后更新2023/12月...</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2023-07-05
+        发布时间 : 2023-08-02
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2023-07-05
+        发布 : 2023-08-02
       </span>
       
         <span>
         分类 :
-          <a href="/blog/categories/React/">
-            React
+          <a href="/blog/categories/TypeScript/">
+            TypeScript
           </a>
         </span>
       
@@ -190,8 +190,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/React/">
-              React
+            <a href="/blog/categories/TypeScript/">
+              TypeScript
             </a>
           </span>
           
@@ -200,8 +200,8 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/react/">
-                  #react
+                <a href="/blog/tags/typescript/">
+                  #typescript
                 </a>
               </span>
             
@@ -214,26 +214,26 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/react-usetransition/">
-        <span>React useTransition在性能优化中的使用</span>
+      <a href="/blog/ast-in-css-module-auto-match/">
+        <span>AST 在 css module 自动匹配中的应用</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
     <div class="article-top-meta pc-view">
       <span>
-        发布时间 : 2023-07-05
+        发布时间 : 2023-07-26
       </span>
     </div>
     <!-- 移动端文章信息 -->
     <div class="article-top-meta mobile-view">
       <span>
-        发布 : 2023-07-05
+        发布 : 2023-07-26
       </span>
       
         <span>
         分类 :
-          <a href="/blog/categories/React/">
-            React
+          <a href="/blog/categories/JavaScript/">
+            JavaScript
           </a>
         </span>
       
@@ -252,8 +252,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/React/">
-              React
+            <a href="/blog/categories/JavaScript/">
+              JavaScript
             </a>
           </span>
           
@@ -262,8 +262,14 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/react/">
-                  #react
+                <a href="/blog/tags/ast/">
+                  #ast
+                </a>
+              </span>
+            
+              <span class="span--tag">
+                <a href="/blog/tags/css-module/">
+                  #css module
                 </a>
               </span>
             
@@ -276,8 +282,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/react-performance%20optimization/">
-        <span>React的性能优化项，最后更新2023年07月...</span>
+      <a href="/blog/react-usedeferredvalue/">
+        <span>React useDeferredValue在性能优化中的使用</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -338,8 +344,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/es6-destructuring/">
-        <span>整理ES6：解构赋值</span>
+      <a href="/blog/react-usetransition/">
+        <span>React useTransition在性能优化中的使用</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -356,8 +362,8 @@ <h1 class="article-title">
       
         <span>
         分类 :
-          <a href="/blog/categories/JavaScript/">
-            JavaScript
+          <a href="/blog/categories/React/">
+            React
           </a>
         </span>
       
@@ -376,8 +382,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/JavaScript/">
-              JavaScript
+            <a href="/blog/categories/React/">
+              React
             </a>
           </span>
           
@@ -386,14 +392,8 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/es6/">
-                  #es6
-                </a>
-              </span>
-            
-              <span class="span--tag">
-                <a href="/blog/tags/javascript/">
-                  #javascript
+                <a href="/blog/tags/react/">
+                  #react
                 </a>
               </span>
             
@@ -406,8 +406,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/es6-operator/">
-        <span>整理ES6：运算符</span>
+      <a href="/blog/react-performance%20optimization/">
+        <span>React的性能优化项，最后更新2023年07月...</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -424,8 +424,8 @@ <h1 class="article-title">
       
         <span>
         分类 :
-          <a href="/blog/categories/JavaScript/">
-            JavaScript
+          <a href="/blog/categories/React/">
+            React
           </a>
         </span>
       
@@ -444,8 +444,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/JavaScript/">
-              JavaScript
+            <a href="/blog/categories/React/">
+              React
             </a>
           </span>
           
@@ -454,14 +454,8 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/es6/">
-                  #es6
-                </a>
-              </span>
-            
-              <span class="span--tag">
-                <a href="/blog/tags/javascript/">
-                  #javascript
+                <a href="/blog/tags/react/">
+                  #react
                 </a>
               </span>
             
@@ -474,8 +468,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/es6-symbol/">
-        <span>整理ES6：聊一聊Symbol </span>
+      <a href="/blog/es6-destructuring/">
+        <span>整理ES6：解构赋值</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -542,8 +536,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/es6-set/">
-        <span>整理ES6：Set真的挺好的</span>
+      <a href="/blog/es6-operator/">
+        <span>整理ES6：运算符</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -610,8 +604,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/es6-map/">
-        <span>整理ES6：Map真的挺好的</span>
+      <a href="/blog/es6-symbol/">
+        <span>整理ES6：聊一聊Symbol </span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -678,8 +672,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/es6-proxy/">
-        <span>整理ES6：Proxy的应用场景</span>
+      <a href="/blog/es6-set/">
+        <span>整理ES6：Set真的挺好的</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -746,8 +740,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/es6-reflect/">
-        <span>整理ES6：Reflect和Object的关系</span>
+      <a href="/blog/es6-map/">
+        <span>整理ES6：Map真的挺好的</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
diff --git a/dist/page/5/index.html b/dist/page/5/index.html
index 8ea5ad9..a76d2ba 100644
--- a/dist/page/5/index.html
+++ b/dist/page/5/index.html
@@ -152,8 +152,8 @@
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/github-actions-runs/">
-        <span>6. GitHub Actions - Managing workflow runs</span>
+      <a href="/blog/es6-proxy/">
+        <span>整理ES6：Proxy的应用场景</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -170,8 +170,8 @@ <h1 class="article-title">
       
         <span>
         分类 :
-          <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
-            工程化
+          <a href="/blog/categories/JavaScript/">
+            JavaScript
           </a>
         </span>
       
@@ -190,8 +190,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
-              工程化
+            <a href="/blog/categories/JavaScript/">
+              JavaScript
             </a>
           </span>
           
@@ -200,8 +200,14 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/github-actions/">
-                  #github actions
+                <a href="/blog/tags/es6/">
+                  #es6
+                </a>
+              </span>
+            
+              <span class="span--tag">
+                <a href="/blog/tags/javascript/">
+                  #javascript
                 </a>
               </span>
             
@@ -214,8 +220,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/github-actions-jobs/">
-        <span>5. GitHub Actions - Using jobs</span>
+      <a href="/blog/es6-reflect/">
+        <span>整理ES6：Reflect和Object的关系</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -232,8 +238,8 @@ <h1 class="article-title">
       
         <span>
         分类 :
-          <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
-            工程化
+          <a href="/blog/categories/JavaScript/">
+            JavaScript
           </a>
         </span>
       
@@ -252,8 +258,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
-              工程化
+            <a href="/blog/categories/JavaScript/">
+              JavaScript
             </a>
           </span>
           
@@ -262,8 +268,14 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/github-actions/">
-                  #github actions
+                <a href="/blog/tags/es6/">
+                  #es6
+                </a>
+              </span>
+            
+              <span class="span--tag">
+                <a href="/blog/tags/javascript/">
+                  #javascript
                 </a>
               </span>
             
@@ -276,8 +288,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/github-actions-workflows/">
-        <span>4. GitHub Actions - Using workflows</span>
+      <a href="/blog/github-actions-runs/">
+        <span>6. GitHub Actions - Managing workflow runs</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -338,8 +350,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/github-actions-examples/">
-        <span>3. GitHub Actions - Examples</span>
+      <a href="/blog/github-actions-jobs/">
+        <span>5. GitHub Actions - Using jobs</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -400,8 +412,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/github-actions-learn/">
-        <span>2. GitHub Actions - Learn GitHub Actions</span>
+      <a href="/blog/github-actions-workflows/">
+        <span>4. GitHub Actions - Using workflows</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -462,8 +474,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/github-actions-quickstart/">
-        <span>1. GitHub Actions - Quickstart</span>
+      <a href="/blog/github-actions-examples/">
+        <span>3. GitHub Actions - Examples</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -524,8 +536,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/github-actions-intro/">
-        <span>0. GitHub Actions - Intro</span>
+      <a href="/blog/github-actions-learn/">
+        <span>2. GitHub Actions - Learn GitHub Actions</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -586,8 +598,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/write-components-elegantly-using-radix/">
-        <span>从Radix看如何优雅写组件</span>
+      <a href="/blog/github-actions-quickstart/">
+        <span>1. GitHub Actions - Quickstart</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -604,8 +616,8 @@ <h1 class="article-title">
       
         <span>
         分类 :
-          <a href="/blog/categories/React/">
-            React
+          <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
+            工程化
           </a>
         </span>
       
@@ -624,8 +636,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/React/">
-              React
+            <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
+              工程化
             </a>
           </span>
           
@@ -634,8 +646,8 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/radix/">
-                  #radix
+                <a href="/blog/tags/github-actions/">
+                  #github actions
                 </a>
               </span>
             
@@ -648,8 +660,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/es6-promise/">
-        <span>整理ES6：Promise的忽略点和几个方法的区别</span>
+      <a href="/blog/github-actions-intro/">
+        <span>0. GitHub Actions - Intro</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -666,8 +678,8 @@ <h1 class="article-title">
       
         <span>
         分类 :
-          <a href="/blog/categories/JavaScript/">
-            JavaScript
+          <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
+            工程化
           </a>
         </span>
       
@@ -686,8 +698,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/JavaScript/">
-              JavaScript
+            <a href="/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/">
+              工程化
             </a>
           </span>
           
@@ -696,14 +708,8 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/es6/">
-                  #es6
-                </a>
-              </span>
-            
-              <span class="span--tag">
-                <a href="/blog/tags/javascript/">
-                  #javascript
+                <a href="/blog/tags/github-actions/">
+                  #github actions
                 </a>
               </span>
             
@@ -716,8 +722,8 @@ <h1 class="article-title">
   
   <div class="post">
     <h1 class="article-title">
-      <a href="/blog/what-is-es6/">
-        <span>整理ES6：ES6是什么？</span>
+      <a href="/blog/write-components-elegantly-using-radix/">
+        <span>从Radix看如何优雅写组件</span>
       </a>
     </h1>
     <!-- PC端文章信息 -->
@@ -734,8 +740,8 @@ <h1 class="article-title">
       
         <span>
         分类 :
-          <a href="/blog/categories/JavaScript/">
-            JavaScript
+          <a href="/blog/categories/React/">
+            React
           </a>
         </span>
       
@@ -754,8 +760,8 @@ <h1 class="article-title">
         <span class="pc-view">
           
             <i class="iconfont icon-tag"></i>分类:
-            <a href="/blog/categories/JavaScript/">
-              JavaScript
+            <a href="/blog/categories/React/">
+              React
             </a>
           </span>
           
@@ -764,14 +770,8 @@ <h1 class="article-title">
             <i class="iconfont icon-06tags"></i>标签:
             
               <span class="span--tag">
-                <a href="/blog/tags/es6/">
-                  #es6
-                </a>
-              </span>
-            
-              <span class="span--tag">
-                <a href="/blog/tags/javascript/">
-                  #javascript
+                <a href="/blog/tags/radix/">
+                  #radix
                 </a>
               </span>
             
@@ -788,6 +788,8 @@ <h1 class="article-title">
       <a href="/blog/page/4/">上一页</a>
     
     
+      <a href="/blog/page/6/">下一页</a>
+    
   </nav>
 
    
diff --git a/dist/page/6/index.html b/dist/page/6/index.html
new file mode 100644
index 0000000..a894bc3
--- /dev/null
+++ b/dist/page/6/index.html
@@ -0,0 +1,448 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+  
+<head>
+  <meta charset="utf-8">
+  <meta name="author" content="董沅鑫, yuanxin.me@gmail.com" />
+  
+    <meta name="robots" content="noindex" />
+  
+  
+  
+  <title>TaoLiuJun&#39;s Blog</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  
+    <meta name="keywords" content="" />
+  
+
+  <script>
+    console.log('\n%c Hexo-theme-bmw v4.0 ' + '%c 🎉 https://github.com/dongyuanxin/theme-bmw 🎉\n' + '\n%c View demo online ' + '%c 🔍 https://godbmw.com/ 🔍  \n' , 'color: #fadfa3; background: #030307; padding:3px 0;', '', 'color: #fadfa3; background: #030307; padding:3px 0;', '');
+  </script>
+
+  
+    <meta name="description" content="Html/Css/JavaScript/TypeScript的学习心得；React的学习心得；技术设计思想；生活随想；">
+  
+
+  
+
+  
+    <link rel="icon" href="/images/favicon.ico">
+    <link rel="apple-touch-icon" href="/images/touch-icon.png">
+  
+
+  <link href="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.css" rel="stylesheet">
+  
+<link rel="stylesheet" href="/blog/css/base.css">
+<link rel="stylesheet" href="/blog/icon/iconfont.css">
+<link rel="stylesheet" href="/blog/css/github-markdown.css">
+<link rel="stylesheet" href="/blog/css/highlight.css">
+
+
+  
+<script src="/blog/js/util.js"></script>
+<script src="/blog/js/valine.min.js"></script>
+
+
+  
+
+  
+
+  
+  
+  <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js" async></script>
+  
+  
+
+<meta name="generator" content="Hexo 6.3.0"></head>
+
+  <body>
+
+    
+
+    <div id="app">
+
+      <div class="header-wrap">
+  <header>
+    <div class="site-brand">
+      <div class="site-title">
+        <a href="/blog/">Taoliujun&#39;s Blog</a>
+      </div>
+    </div>
+    <nav class="site-navigation">
+      <ul class="nav-menu">
+      
+        <li class="nav-item" data-path="/">
+          
+            <a 
+              href="/blog/"
+              target="_self"
+            >
+              主页
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="/archives/">
+          
+            <a 
+              href="/blog/archives/"
+              target="_self"
+            >
+              所有文章
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="https://github.com/taoliujun/blog/issues">
+          
+            <a 
+              href="https://github.com/taoliujun/blog/issues"
+              target="_self"
+            >
+              github
+            </a>
+          
+        </li>
+      
+      </ul>
+    </nav>
+    <i class="iconfont icon-menu"></i>
+  </header>
+</div>
+
+<script>
+  let links = document.querySelectorAll('.nav-item');
+  for(let link of links){
+    let childrenLink = link.querySelector('ul');
+    link.addEventListener('mouseenter', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown active";
+      }
+    })
+    link.addEventListener('mouseleave', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown";
+      }
+    })
+  }
+  let rootRealPath = getRealPath(window.location.pathname, true);
+  for(let link of links) {
+    let linkPath = link.getAttribute("data-path");
+    if(linkPath && getRealPath(linkPath, true) === rootRealPath) {
+      link.className = "nav-item hover";
+    }
+  }
+
+  let iconMenu = document.querySelector("i.iconfont.icon-menu"),
+    iconMenuClicked = false;
+  let navDOM = document.querySelector("nav.site-navigation");
+  iconMenu.addEventListener("click", () => {
+    iconMenuClicked 
+      ? navDOM.className = "site-navigation active"
+      : navDOM.className = "site-navigation";
+    iconMenuClicked = !iconMenuClicked;
+  })
+</script>
+
+      
+<div class="container home-index">
+  
+  <div class="post">
+    <h1 class="article-title">
+      <a href="/blog/es6-promise/">
+        <span>整理ES6：Promise的忽略点和几个方法的区别</span>
+      </a>
+    </h1>
+    <!-- PC端文章信息 -->
+    <div class="article-top-meta pc-view">
+      <span>
+        发布时间 : 2023-07-05
+      </span>
+    </div>
+    <!-- 移动端文章信息 -->
+    <div class="article-top-meta mobile-view">
+      <span>
+        发布 : 2023-07-05
+      </span>
+      
+        <span>
+        分类 :
+          <a href="/blog/categories/JavaScript/">
+            JavaScript
+          </a>
+        </span>
+      
+      
+    </div>
+    
+    <!-- 文章简介 -->
+    <div class="article-content">
+      <div class="markdown-body article-content--inner" v-html="mdToHtml(psg.summary)">
+        
+      </div>
+    </div>
+    <div class="article-footer">
+      <div class="article-meta pull-left">
+        <!-- 分类pc端可见 -->
+        <span class="pc-view">
+          
+            <i class="iconfont icon-tag"></i>分类:
+            <a href="/blog/categories/JavaScript/">
+              JavaScript
+            </a>
+          </span>
+          
+        <span>
+          
+            <i class="iconfont icon-06tags"></i>标签:
+            
+              <span class="span--tag">
+                <a href="/blog/tags/es6/">
+                  #es6
+                </a>
+              </span>
+            
+              <span class="span--tag">
+                <a href="/blog/tags/javascript/">
+                  #javascript
+                </a>
+              </span>
+            
+                    
+        </span>
+      </div>
+      
+    </div>
+  </div>
+  
+  <div class="post">
+    <h1 class="article-title">
+      <a href="/blog/what-is-es6/">
+        <span>整理ES6：ES6是什么？</span>
+      </a>
+    </h1>
+    <!-- PC端文章信息 -->
+    <div class="article-top-meta pc-view">
+      <span>
+        发布时间 : 2023-07-05
+      </span>
+    </div>
+    <!-- 移动端文章信息 -->
+    <div class="article-top-meta mobile-view">
+      <span>
+        发布 : 2023-07-05
+      </span>
+      
+        <span>
+        分类 :
+          <a href="/blog/categories/JavaScript/">
+            JavaScript
+          </a>
+        </span>
+      
+      
+    </div>
+    
+    <!-- 文章简介 -->
+    <div class="article-content">
+      <div class="markdown-body article-content--inner" v-html="mdToHtml(psg.summary)">
+        
+      </div>
+    </div>
+    <div class="article-footer">
+      <div class="article-meta pull-left">
+        <!-- 分类pc端可见 -->
+        <span class="pc-view">
+          
+            <i class="iconfont icon-tag"></i>分类:
+            <a href="/blog/categories/JavaScript/">
+              JavaScript
+            </a>
+          </span>
+          
+        <span>
+          
+            <i class="iconfont icon-06tags"></i>标签:
+            
+              <span class="span--tag">
+                <a href="/blog/tags/es6/">
+                  #es6
+                </a>
+              </span>
+            
+              <span class="span--tag">
+                <a href="/blog/tags/javascript/">
+                  #javascript
+                </a>
+              </span>
+            
+                    
+        </span>
+      </div>
+      
+    </div>
+  </div>
+  
+
+  <nav class="page-navigation">
+    
+      <a href="/blog/page/5/">上一页</a>
+    
+    
+  </nav>
+
+   
+</div>
+
+
+      <footer>
+  <p class="site-info">
+    Powered by <a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a> | Theme - <a target="_blank" rel="noopener" href="https://github.com/dongyuanxin/theme-bmw">BMW</a>
+    <br>
+    
+  </p>
+</footer>
+
+      <div class="back-to-top hidden">
+  <span>
+    <i class="iconfont icon-60"></i><span></span>%
+  </span>
+</div>
+
+<script>
+const updateIconToTop = percent => {
+  let dom = document.querySelector(".back-to-top span span");
+  dom.innerText = percent;
+  if(percent < 1) {
+    document.querySelector(".back-to-top").className = "back-to-top hidden";
+  } else {
+    document.querySelector(".back-to-top").className = "back-to-top";
+  }
+}
+
+const handleScoll = () => {
+  let isRunning = false;
+  return () => {
+    if (isRunning) return;
+    isRunning = true;
+    window.requestAnimationFrame(timestamp => {
+      let scrollTop =
+          document.documentElement.scrollTop || document.body.scrollTop,
+        scrollHeight =
+          document.documentElement.scrollHeight ||
+          document.body.scrollHeight,
+        clientHeight =
+          document.documentElement.clientHeight ||
+          document.body.clientHeight;
+      isRunning = false;
+      if (scrollTop <= 1) {
+        updateIconToTop(0);
+        return;
+      }
+      if (scrollTop + clientHeight >= scrollHeight) {
+        updateIconToTop(100);
+      } else {
+        updateIconToTop(parseInt(
+          100 * scrollTop / (scrollHeight - clientHeight),
+          10
+        ));
+      }
+    });
+  };
+}
+
+const backToTop = () => {
+  let scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop,
+    delay = 10,
+    time = 200;
+  if (scrollTop <= 20) {
+    document.documentElement.scrollTop = 0;
+    document.body.scrollTop = 0;
+    return;
+  }
+  let step = Math.ceil(scrollTop * delay / time);
+  let timer = setInterval(() => {
+    scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop;
+    if (scrollTop - step <= 0) {
+      document.documentElement.scrollTop = 0;
+      document.body.scrollTop = 0;
+      clearInterval(timer);
+    } else {
+      document.documentElement.scrollTop = scrollTop - step;
+      document.body.scrollTop = scrollTop - step;
+    }
+  }, delay);
+}
+
+document.addEventListener("scroll", handleScoll(), false);
+
+document.querySelector(".back-to-top").addEventListener("click", backToTop, false);
+
+</script>
+
+    </div>
+
+    
+      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
+<script>
+  (() => {
+    const mathjaxConfig = {
+      showProcessingMessages: false, //关闭js加载过程信息
+      messageStyle: "none", //不显示信息
+      jax: ["input/TeX", "output/HTML-CSS"],
+      tex2jax: {
+        inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
+        displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
+        skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
+      },
+      "HTML-CSS": {
+        availableFonts: ["STIX", "TeX"], //可选字体
+        showMathMenu: false //关闭右击菜单显示
+      }
+    }
+
+    let mathjaxInterval = setInterval(() => {
+      if(!window.MathJax){
+        return;
+      }
+      window.MathJax.Hub.Config(mathjaxConfig)
+      window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')])
+
+      clearInterval(mathjaxInterval)
+    }, 10)    
+  })()
+</script>
+    
+
+    <script src="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.js" async></script>
+<script async>
+  let fancyTimer = setInterval(function(){
+    if(!window.$){
+      return;
+    }
+    $(document).ready(function() {
+      $(".post img").each(function () {
+        if($(this).parent().get(0).tagName.toLowerCase() === "a") {
+          return;
+        }
+        // $(this).attr("data-fancybox", "gallery"); // if you add 'data-fancybox', img will display after showed
+        var element = document.createElement("a");
+        $(element).attr("data-fancybox", "gallery");
+        $(element).attr("href", $(this).attr("src"));
+        $(this).wrap(element);
+      });
+      
+      clearInterval(fancyTimer);
+    });
+  }, 10);
+</script>
+
+    
+  </body>
+
+</html>
diff --git a/dist/sitemap.xml b/dist/sitemap.xml
index bd09af3..9890aa6 100644
--- a/dist/sitemap.xml
+++ b/dist/sitemap.xml
@@ -4,448 +4,466 @@
   <url>
     <loc>https://taoliujun.github.io/blog/web-api-readme/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/react-zustand/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-Intersection_Observer_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/snapshot-impact-on-coverage/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-HTML_Drag_and_Drop_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/tsconfig-json/</loc>
+    <loc>https://taoliujun.github.io/blog/es6-set/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/typescript-means/</loc>
+    <loc>https://taoliujun.github.io/blog/es6-symbol/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Background_Tasks_API/</loc>
+    <loc>https://taoliujun.github.io/blog/github-actions-examples/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Badging_API/</loc>
+    <loc>https://taoliujun.github.io/blog/github-actions-jobs/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Battery_Status_API/</loc>
+    <loc>https://taoliujun.github.io/blog/github-actions-intro/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Beacon_API/</loc>
+    <loc>https://taoliujun.github.io/blog/github-actions-learn/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Broadcast_Channel_API/</loc>
+    <loc>https://taoliujun.github.io/blog/github-actions-quickstart/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-CSS_Custom_Highlight_API/</loc>
+    <loc>https://taoliujun.github.io/blog/github-actions-runs/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-CSS_Font_Loading_API/</loc>
+    <loc>https://taoliujun.github.io/blog/github-actions-sample-eslint-in-pull-request/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-CSS_Object_Model/</loc>
+    <loc>https://taoliujun.github.io/blog/github-actions-workflows/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-CSS_Properties_and_Values_API/</loc>
+    <loc>https://taoliujun.github.io/blog/react-performance%20optimization/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-CSS_Typed_OM_API/</loc>
+    <loc>https://taoliujun.github.io/blog/react-usedeferredvalue/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Clipboard_API/</loc>
+    <loc>https://taoliujun.github.io/blog/react-usetransition/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Cookie_Store_API/</loc>
+    <loc>https://taoliujun.github.io/blog/react-zustand/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Credential_Management_API/</loc>
+    <loc>https://taoliujun.github.io/blog/snapshot-impact-on-coverage/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Device_Memory_API/</loc>
+    <loc>https://taoliujun.github.io/blog/tsconfig-json/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Device_orientation_events/</loc>
+    <loc>https://taoliujun.github.io/blog/typescript-means/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Document_Object_Model/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-Background_Tasks_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-EyeDropper_API/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-Badging_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Document_Picture-in-Picture_API/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-Battery_Status_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-File_API/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-Beacon_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Fullscreen_API/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-Broadcast_Channel_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-File_System_API/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-CSS_Font_Loading_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/web-api-Geolocation_API/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-CSS_Custom_Highlight_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/what-is-es6/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-CSS_Object_Model/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/write-components-elegantly-using-radix/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-CSS_Properties_and_Values_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/ast-in-css-module-auto-match/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-Clipboard_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/changesets-in-monorepo/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-CSS_Typed_OM_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/es6-destructuring/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-Cookie_Store_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/es6-map/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-Credential_Management_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/es6-operator/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-Device_Memory_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/es6-promise/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-Document_Object_Model/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/es6-proxy/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-Device_orientation_events/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/es6-reflect/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-Document_Picture-in-Picture_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/es6-set/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-File_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/es6-symbol/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-EyeDropper_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/github-actions-examples/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-File_System_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/github-actions-intro/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-Fullscreen_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/github-actions-jobs/</loc>
+    <loc>https://taoliujun.github.io/blog/web-api-Geolocation_API/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/github-actions-learn/</loc>
+    <loc>https://taoliujun.github.io/blog/what-is-es6/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/github-actions-quickstart/</loc>
+    <loc>https://taoliujun.github.io/blog/write-components-elegantly-using-radix/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/github-actions-runs/</loc>
+    <loc>https://taoliujun.github.io/blog/ast-in-css-module-auto-match/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/github-actions-workflows/</loc>
+    <loc>https://taoliujun.github.io/blog/changesets-in-monorepo/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/github-actions-sample-eslint-in-pull-request/</loc>
+    <loc>https://taoliujun.github.io/blog/es6-destructuring/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/react-performance%20optimization/</loc>
+    <loc>https://taoliujun.github.io/blog/es6-map/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/react-usedeferredvalue/</loc>
+    <loc>https://taoliujun.github.io/blog/es6-operator/</loc>
     
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/react-usetransition/</loc>
+    <loc>https://taoliujun.github.io/blog/es6-promise/</loc>
+    
+    <lastmod>2024-03-21</lastmod>
+    
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  
+  <url>
+    <loc>https://taoliujun.github.io/blog/es6-proxy/</loc>
+    
+    <lastmod>2024-03-21</lastmod>
     
-    <lastmod>2024-03-15</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  
+  <url>
+    <loc>https://taoliujun.github.io/blog/es6-reflect/</loc>
+    
+    <lastmod>2024-03-21</lastmod>
     
     <changefreq>monthly</changefreq>
     <priority>0.6</priority>
@@ -454,7 +472,7 @@
 
   <url>
     <loc>https://taoliujun.github.io/blog</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>daily</changefreq>
     <priority>1.0</priority>
   </url>
@@ -462,245 +480,259 @@
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/ast/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/css-module/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/changesets/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/es6/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/javascript/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/github-actions/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/react/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/zustand/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/react-store/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/jest/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/typescript/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/webapi/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/Background-Tasks/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/Badging/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/Battery-Status/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/Beacon/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/Broadcast-Channel/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/tags/CSS-Custom-Highlight/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <loc>https://taoliujun.github.io/blog/tags/CSS-Font-Loading/</loc>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/tags/CSS-Font-Loading/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <loc>https://taoliujun.github.io/blog/tags/CSS-Custom-Highlight/</loc>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/CSSOM/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/CSS-Properties-and-Values/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/tags/CSS-Typed-OM/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <loc>https://taoliujun.github.io/blog/tags/Clipboard/</loc>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/tags/Clipboard/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <loc>https://taoliujun.github.io/blog/tags/CSS-Typed-OM/</loc>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/CookieStore/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/Credential-Management/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/Device-Memory/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.2</priority>
+  </url>
+  
+  <url>
+    <loc>https://taoliujun.github.io/blog/tags/DOM/</loc>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/Device-Orientation/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/tags/DOM/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <loc>https://taoliujun.github.io/blog/tags/Document-Picture-in-Picture/</loc>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/tags/EyeDropper/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <loc>https://taoliujun.github.io/blog/tags/File/</loc>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/tags/Document-Picture-in-Picture/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <loc>https://taoliujun.github.io/blog/tags/EyeDropper/</loc>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/tags/File/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <loc>https://taoliujun.github.io/blog/tags/File-System/</loc>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/Fullscreen/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
-    <loc>https://taoliujun.github.io/blog/tags/File-System/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <loc>https://taoliujun.github.io/blog/tags/Drag-Drop/</loc>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/Geolocation/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.2</priority>
+  </url>
+  
+  <url>
+    <loc>https://taoliujun.github.io/blog/tags/Intersection-Observer/</loc>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/tags/radix/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
@@ -709,35 +741,35 @@
   
   <url>
     <loc>https://taoliujun.github.io/blog/categories/JavaScript/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/categories/%E5%B7%A5%E7%A8%8B%E5%8C%96/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/categories/React/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/categories/TypeScript/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
   
   <url>
     <loc>https://taoliujun.github.io/blog/categories/Web-API/</loc>
-    <lastmod>2024-03-15</lastmod>
+    <lastmod>2024-03-21</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.2</priority>
   </url>
diff --git a/dist/tags/Drag-Drop/index.html b/dist/tags/Drag-Drop/index.html
new file mode 100644
index 0000000..7484379
--- /dev/null
+++ b/dist/tags/Drag-Drop/index.html
@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+  
+<head>
+  <meta charset="utf-8">
+  <meta name="author" content="董沅鑫, yuanxin.me@gmail.com" />
+  
+  
+  
+  <title>标签: Drag Drop | TaoLiuJun&#39;s Blog</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  
+    <meta name="keywords" content="" />
+  
+
+  <script>
+    console.log('\n%c Hexo-theme-bmw v4.0 ' + '%c 🎉 https://github.com/dongyuanxin/theme-bmw 🎉\n' + '\n%c View demo online ' + '%c 🔍 https://godbmw.com/ 🔍  \n' , 'color: #fadfa3; background: #030307; padding:3px 0;', '', 'color: #fadfa3; background: #030307; padding:3px 0;', '');
+  </script>
+
+  
+    <meta name="description" content="Html/Css/JavaScript/TypeScript的学习心得；React的学习心得；技术设计思想；生活随想；">
+  
+
+  
+
+  
+    <link rel="icon" href="/images/favicon.ico">
+    <link rel="apple-touch-icon" href="/images/touch-icon.png">
+  
+
+  <link href="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.css" rel="stylesheet">
+  
+<link rel="stylesheet" href="/blog/css/base.css">
+<link rel="stylesheet" href="/blog/icon/iconfont.css">
+<link rel="stylesheet" href="/blog/css/github-markdown.css">
+<link rel="stylesheet" href="/blog/css/highlight.css">
+
+
+  
+<script src="/blog/js/util.js"></script>
+<script src="/blog/js/valine.min.js"></script>
+
+
+  
+
+  
+
+  
+  
+  <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js" async></script>
+  
+  
+
+<meta name="generator" content="Hexo 6.3.0"></head>
+
+  <body>
+
+    
+
+    <div id="app">
+
+      <div class="header-wrap">
+  <header>
+    <div class="site-brand">
+      <div class="site-title">
+        <a href="/blog/">Taoliujun&#39;s Blog</a>
+      </div>
+    </div>
+    <nav class="site-navigation">
+      <ul class="nav-menu">
+      
+        <li class="nav-item" data-path="/">
+          
+            <a 
+              href="/blog/"
+              target="_self"
+            >
+              主页
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="/archives/">
+          
+            <a 
+              href="/blog/archives/"
+              target="_self"
+            >
+              所有文章
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="https://github.com/taoliujun/blog/issues">
+          
+            <a 
+              href="https://github.com/taoliujun/blog/issues"
+              target="_self"
+            >
+              github
+            </a>
+          
+        </li>
+      
+      </ul>
+    </nav>
+    <i class="iconfont icon-menu"></i>
+  </header>
+</div>
+
+<script>
+  let links = document.querySelectorAll('.nav-item');
+  for(let link of links){
+    let childrenLink = link.querySelector('ul');
+    link.addEventListener('mouseenter', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown active";
+      }
+    })
+    link.addEventListener('mouseleave', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown";
+      }
+    })
+  }
+  let rootRealPath = getRealPath(window.location.pathname, true);
+  for(let link of links) {
+    let linkPath = link.getAttribute("data-path");
+    if(linkPath && getRealPath(linkPath, true) === rootRealPath) {
+      link.className = "nav-item hover";
+    }
+  }
+
+  let iconMenu = document.querySelector("i.iconfont.icon-menu"),
+    iconMenuClicked = false;
+  let navDOM = document.querySelector("nav.site-navigation");
+  iconMenu.addEventListener("click", () => {
+    iconMenuClicked 
+      ? navDOM.className = "site-navigation active"
+      : navDOM.className = "site-navigation";
+    iconMenuClicked = !iconMenuClicked;
+  })
+</script>
+
+      <div class="container">
+  <div class="timeline">
+  <span class="archive-move-on"></span>
+  <span class="archive-page-counter">
+    
+      <span>当前位于 1/1 页</span>
+    
+  </span>
+  
+  
+    <div class="collection-title">
+      <h2>
+        
+          <span>标签 : Drag Drop</span>
+        
+      </h2>
+    </div>
+  
+  
+  
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-HTML_Drag_and_Drop_API/">
+          <span>Web API - HTML Drag And Drop</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        03-20
+      </div>
+    </header>
+  </article>
+  
+</div>
+  <nav class="page-navigation">
+    
+    
+  </nav>
+</div>
+
+      <footer>
+  <p class="site-info">
+    Powered by <a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a> | Theme - <a target="_blank" rel="noopener" href="https://github.com/dongyuanxin/theme-bmw">BMW</a>
+    <br>
+    
+  </p>
+</footer>
+
+      <div class="back-to-top hidden">
+  <span>
+    <i class="iconfont icon-60"></i><span></span>%
+  </span>
+</div>
+
+<script>
+const updateIconToTop = percent => {
+  let dom = document.querySelector(".back-to-top span span");
+  dom.innerText = percent;
+  if(percent < 1) {
+    document.querySelector(".back-to-top").className = "back-to-top hidden";
+  } else {
+    document.querySelector(".back-to-top").className = "back-to-top";
+  }
+}
+
+const handleScoll = () => {
+  let isRunning = false;
+  return () => {
+    if (isRunning) return;
+    isRunning = true;
+    window.requestAnimationFrame(timestamp => {
+      let scrollTop =
+          document.documentElement.scrollTop || document.body.scrollTop,
+        scrollHeight =
+          document.documentElement.scrollHeight ||
+          document.body.scrollHeight,
+        clientHeight =
+          document.documentElement.clientHeight ||
+          document.body.clientHeight;
+      isRunning = false;
+      if (scrollTop <= 1) {
+        updateIconToTop(0);
+        return;
+      }
+      if (scrollTop + clientHeight >= scrollHeight) {
+        updateIconToTop(100);
+      } else {
+        updateIconToTop(parseInt(
+          100 * scrollTop / (scrollHeight - clientHeight),
+          10
+        ));
+      }
+    });
+  };
+}
+
+const backToTop = () => {
+  let scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop,
+    delay = 10,
+    time = 200;
+  if (scrollTop <= 20) {
+    document.documentElement.scrollTop = 0;
+    document.body.scrollTop = 0;
+    return;
+  }
+  let step = Math.ceil(scrollTop * delay / time);
+  let timer = setInterval(() => {
+    scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop;
+    if (scrollTop - step <= 0) {
+      document.documentElement.scrollTop = 0;
+      document.body.scrollTop = 0;
+      clearInterval(timer);
+    } else {
+      document.documentElement.scrollTop = scrollTop - step;
+      document.body.scrollTop = scrollTop - step;
+    }
+  }, delay);
+}
+
+document.addEventListener("scroll", handleScoll(), false);
+
+document.querySelector(".back-to-top").addEventListener("click", backToTop, false);
+
+</script>
+
+    </div>
+
+    
+      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
+<script>
+  (() => {
+    const mathjaxConfig = {
+      showProcessingMessages: false, //关闭js加载过程信息
+      messageStyle: "none", //不显示信息
+      jax: ["input/TeX", "output/HTML-CSS"],
+      tex2jax: {
+        inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
+        displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
+        skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
+      },
+      "HTML-CSS": {
+        availableFonts: ["STIX", "TeX"], //可选字体
+        showMathMenu: false //关闭右击菜单显示
+      }
+    }
+
+    let mathjaxInterval = setInterval(() => {
+      if(!window.MathJax){
+        return;
+      }
+      window.MathJax.Hub.Config(mathjaxConfig)
+      window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')])
+
+      clearInterval(mathjaxInterval)
+    }, 10)    
+  })()
+</script>
+    
+
+    <script src="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.js" async></script>
+<script async>
+  let fancyTimer = setInterval(function(){
+    if(!window.$){
+      return;
+    }
+    $(document).ready(function() {
+      $(".post img").each(function () {
+        if($(this).parent().get(0).tagName.toLowerCase() === "a") {
+          return;
+        }
+        // $(this).attr("data-fancybox", "gallery"); // if you add 'data-fancybox', img will display after showed
+        var element = document.createElement("a");
+        $(element).attr("data-fancybox", "gallery");
+        $(element).attr("href", $(this).attr("src"));
+        $(this).wrap(element);
+      });
+      
+      clearInterval(fancyTimer);
+    });
+  }, 10);
+</script>
+
+    
+  </body>
+
+</html>
diff --git a/dist/tags/Intersection-Observer/index.html b/dist/tags/Intersection-Observer/index.html
new file mode 100644
index 0000000..bdf933d
--- /dev/null
+++ b/dist/tags/Intersection-Observer/index.html
@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+  
+<head>
+  <meta charset="utf-8">
+  <meta name="author" content="董沅鑫, yuanxin.me@gmail.com" />
+  
+  
+  
+  <title>标签: Intersection Observer | TaoLiuJun&#39;s Blog</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  
+    <meta name="keywords" content="" />
+  
+
+  <script>
+    console.log('\n%c Hexo-theme-bmw v4.0 ' + '%c 🎉 https://github.com/dongyuanxin/theme-bmw 🎉\n' + '\n%c View demo online ' + '%c 🔍 https://godbmw.com/ 🔍  \n' , 'color: #fadfa3; background: #030307; padding:3px 0;', '', 'color: #fadfa3; background: #030307; padding:3px 0;', '');
+  </script>
+
+  
+    <meta name="description" content="Html/Css/JavaScript/TypeScript的学习心得；React的学习心得；技术设计思想；生活随想；">
+  
+
+  
+
+  
+    <link rel="icon" href="/images/favicon.ico">
+    <link rel="apple-touch-icon" href="/images/touch-icon.png">
+  
+
+  <link href="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.css" rel="stylesheet">
+  
+<link rel="stylesheet" href="/blog/css/base.css">
+<link rel="stylesheet" href="/blog/icon/iconfont.css">
+<link rel="stylesheet" href="/blog/css/github-markdown.css">
+<link rel="stylesheet" href="/blog/css/highlight.css">
+
+
+  
+<script src="/blog/js/util.js"></script>
+<script src="/blog/js/valine.min.js"></script>
+
+
+  
+
+  
+
+  
+  
+  <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js" async></script>
+  
+  
+
+<meta name="generator" content="Hexo 6.3.0"></head>
+
+  <body>
+
+    
+
+    <div id="app">
+
+      <div class="header-wrap">
+  <header>
+    <div class="site-brand">
+      <div class="site-title">
+        <a href="/blog/">Taoliujun&#39;s Blog</a>
+      </div>
+    </div>
+    <nav class="site-navigation">
+      <ul class="nav-menu">
+      
+        <li class="nav-item" data-path="/">
+          
+            <a 
+              href="/blog/"
+              target="_self"
+            >
+              主页
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="/archives/">
+          
+            <a 
+              href="/blog/archives/"
+              target="_self"
+            >
+              所有文章
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="https://github.com/taoliujun/blog/issues">
+          
+            <a 
+              href="https://github.com/taoliujun/blog/issues"
+              target="_self"
+            >
+              github
+            </a>
+          
+        </li>
+      
+      </ul>
+    </nav>
+    <i class="iconfont icon-menu"></i>
+  </header>
+</div>
+
+<script>
+  let links = document.querySelectorAll('.nav-item');
+  for(let link of links){
+    let childrenLink = link.querySelector('ul');
+    link.addEventListener('mouseenter', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown active";
+      }
+    })
+    link.addEventListener('mouseleave', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown";
+      }
+    })
+  }
+  let rootRealPath = getRealPath(window.location.pathname, true);
+  for(let link of links) {
+    let linkPath = link.getAttribute("data-path");
+    if(linkPath && getRealPath(linkPath, true) === rootRealPath) {
+      link.className = "nav-item hover";
+    }
+  }
+
+  let iconMenu = document.querySelector("i.iconfont.icon-menu"),
+    iconMenuClicked = false;
+  let navDOM = document.querySelector("nav.site-navigation");
+  iconMenu.addEventListener("click", () => {
+    iconMenuClicked 
+      ? navDOM.className = "site-navigation active"
+      : navDOM.className = "site-navigation";
+    iconMenuClicked = !iconMenuClicked;
+  })
+</script>
+
+      <div class="container">
+  <div class="timeline">
+  <span class="archive-move-on"></span>
+  <span class="archive-page-counter">
+    
+      <span>当前位于 1/1 页</span>
+    
+  </span>
+  
+  
+    <div class="collection-title">
+      <h2>
+        
+          <span>标签 : Intersection Observer</span>
+        
+      </h2>
+    </div>
+  
+  
+  
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Intersection_Observer_API/">
+          <span>Web Api - Intersection Observer</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        03-20
+      </div>
+    </header>
+  </article>
+  
+</div>
+  <nav class="page-navigation">
+    
+    
+  </nav>
+</div>
+
+      <footer>
+  <p class="site-info">
+    Powered by <a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a> | Theme - <a target="_blank" rel="noopener" href="https://github.com/dongyuanxin/theme-bmw">BMW</a>
+    <br>
+    
+  </p>
+</footer>
+
+      <div class="back-to-top hidden">
+  <span>
+    <i class="iconfont icon-60"></i><span></span>%
+  </span>
+</div>
+
+<script>
+const updateIconToTop = percent => {
+  let dom = document.querySelector(".back-to-top span span");
+  dom.innerText = percent;
+  if(percent < 1) {
+    document.querySelector(".back-to-top").className = "back-to-top hidden";
+  } else {
+    document.querySelector(".back-to-top").className = "back-to-top";
+  }
+}
+
+const handleScoll = () => {
+  let isRunning = false;
+  return () => {
+    if (isRunning) return;
+    isRunning = true;
+    window.requestAnimationFrame(timestamp => {
+      let scrollTop =
+          document.documentElement.scrollTop || document.body.scrollTop,
+        scrollHeight =
+          document.documentElement.scrollHeight ||
+          document.body.scrollHeight,
+        clientHeight =
+          document.documentElement.clientHeight ||
+          document.body.clientHeight;
+      isRunning = false;
+      if (scrollTop <= 1) {
+        updateIconToTop(0);
+        return;
+      }
+      if (scrollTop + clientHeight >= scrollHeight) {
+        updateIconToTop(100);
+      } else {
+        updateIconToTop(parseInt(
+          100 * scrollTop / (scrollHeight - clientHeight),
+          10
+        ));
+      }
+    });
+  };
+}
+
+const backToTop = () => {
+  let scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop,
+    delay = 10,
+    time = 200;
+  if (scrollTop <= 20) {
+    document.documentElement.scrollTop = 0;
+    document.body.scrollTop = 0;
+    return;
+  }
+  let step = Math.ceil(scrollTop * delay / time);
+  let timer = setInterval(() => {
+    scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop;
+    if (scrollTop - step <= 0) {
+      document.documentElement.scrollTop = 0;
+      document.body.scrollTop = 0;
+      clearInterval(timer);
+    } else {
+      document.documentElement.scrollTop = scrollTop - step;
+      document.body.scrollTop = scrollTop - step;
+    }
+  }, delay);
+}
+
+document.addEventListener("scroll", handleScoll(), false);
+
+document.querySelector(".back-to-top").addEventListener("click", backToTop, false);
+
+</script>
+
+    </div>
+
+    
+      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
+<script>
+  (() => {
+    const mathjaxConfig = {
+      showProcessingMessages: false, //关闭js加载过程信息
+      messageStyle: "none", //不显示信息
+      jax: ["input/TeX", "output/HTML-CSS"],
+      tex2jax: {
+        inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
+        displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
+        skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
+      },
+      "HTML-CSS": {
+        availableFonts: ["STIX", "TeX"], //可选字体
+        showMathMenu: false //关闭右击菜单显示
+      }
+    }
+
+    let mathjaxInterval = setInterval(() => {
+      if(!window.MathJax){
+        return;
+      }
+      window.MathJax.Hub.Config(mathjaxConfig)
+      window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')])
+
+      clearInterval(mathjaxInterval)
+    }, 10)    
+  })()
+</script>
+    
+
+    <script src="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.js" async></script>
+<script async>
+  let fancyTimer = setInterval(function(){
+    if(!window.$){
+      return;
+    }
+    $(document).ready(function() {
+      $(".post img").each(function () {
+        if($(this).parent().get(0).tagName.toLowerCase() === "a") {
+          return;
+        }
+        // $(this).attr("data-fancybox", "gallery"); // if you add 'data-fancybox', img will display after showed
+        var element = document.createElement("a");
+        $(element).attr("data-fancybox", "gallery");
+        $(element).attr("href", $(this).attr("src"));
+        $(this).wrap(element);
+      });
+      
+      clearInterval(fancyTimer);
+    });
+  }, 10);
+</script>
+
+    
+  </body>
+
+</html>
diff --git a/dist/tags/webapi/index.html b/dist/tags/webapi/index.html
index 2f279c6..97880a5 100644
--- a/dist/tags/webapi/index.html
+++ b/dist/tags/webapi/index.html
@@ -168,12 +168,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Geolocation_API/">
-          <span>Web API - Geolocation</span>
+        <a href="/blog/web-api-Intersection_Observer_API/">
+          <span>Web Api - Intersection Observer</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-14
+        03-20
       </div>
     </header>
   </article>
@@ -182,12 +182,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Fullscreen_API/">
-          <span>Web API - Fullscreen</span>
+        <a href="/blog/web-api-HTML_Drag_and_Drop_API/">
+          <span>Web API - HTML Drag And Drop</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-14
+        03-20
       </div>
     </header>
   </article>
@@ -196,12 +196,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-File_System_API/">
-          <span>Web API - File System</span>
+        <a href="/blog/web-api-Geolocation_API/">
+          <span>Web API - Geolocation</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-12
+        03-14
       </div>
     </header>
   </article>
@@ -210,12 +210,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-File_API/">
-          <span>Web API - File</span>
+        <a href="/blog/web-api-Fullscreen_API/">
+          <span>Web API - Fullscreen</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-12
+        03-14
       </div>
     </header>
   </article>
@@ -224,8 +224,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-EyeDropper_API/">
-          <span>Web API - EyeDropper</span>
+        <a href="/blog/web-api-File_System_API/">
+          <span>Web API - File System</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -238,12 +238,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Document_Picture-in-Picture_API/">
-          <span>Web API - Document Picture-in-Picture</span>
+        <a href="/blog/web-api-File_API/">
+          <span>Web API - File</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-11
+        03-12
       </div>
     </header>
   </article>
@@ -252,12 +252,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Device_orientation_events/">
-          <span>Web API - Device Orientation</span>
+        <a href="/blog/web-api-EyeDropper_API/">
+          <span>Web API - EyeDropper</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-11
+        03-12
       </div>
     </header>
   </article>
@@ -266,8 +266,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Document_Object_Model/">
-          <span>Web API - DOM</span>
+        <a href="/blog/web-api-Document_Picture-in-Picture_API/">
+          <span>Web API - Document Picture-in-Picture</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -280,8 +280,8 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Device_Memory_API/">
-          <span>Web API - Device Memory</span>
+        <a href="/blog/web-api-Device_orientation_events/">
+          <span>Web API - Device Orientation</span>
         </a>
       </h2>
       <div class="post-meta">
@@ -294,12 +294,12 @@ <h2>
   <article class="posts-collapse">
     <header>
       <h2>
-        <a href="/blog/web-api-Credential_Management_API/">
-          <span>Web API - Credential Management</span>
+        <a href="/blog/web-api-Document_Object_Model/">
+          <span>Web API - DOM</span>
         </a>
       </h2>
       <div class="post-meta">
-        03-07
+        03-11
       </div>
     </header>
   </article>
diff --git a/dist/tags/webapi/page/2/index.html b/dist/tags/webapi/page/2/index.html
index 8ea4a5e..4e07453 100644
--- a/dist/tags/webapi/page/2/index.html
+++ b/dist/tags/webapi/page/2/index.html
@@ -165,6 +165,34 @@ <h2>
   
   
   
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Device_Memory_API/">
+          <span>Web API - Device Memory</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        03-11
+      </div>
+    </header>
+  </article>
+  
+  
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Credential_Management_API/">
+          <span>Web API - Credential Management</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        03-07
+      </div>
+    </header>
+  </article>
+  
+  
   <article class="posts-collapse">
     <header>
       <h2>
@@ -276,34 +304,6 @@ <h2>
     </header>
   </article>
   
-  
-  <article class="posts-collapse">
-    <header>
-      <h2>
-        <a href="/blog/web-api-Battery_Status_API/">
-          <span>Web API - Battery Status</span>
-        </a>
-      </h2>
-      <div class="post-meta">
-        03-01
-      </div>
-    </header>
-  </article>
-  
-  
-  <article class="posts-collapse">
-    <header>
-      <h2>
-        <a href="/blog/web-api-Background_Tasks_API/">
-          <span>Web API - Background Tasks</span>
-        </a>
-      </h2>
-      <div class="post-meta">
-        02-29
-      </div>
-    </header>
-  </article>
-  
 </div>
   <nav class="page-navigation">
     
diff --git a/dist/tags/webapi/page/3/index.html b/dist/tags/webapi/page/3/index.html
index 84696bf..e010e3e 100644
--- a/dist/tags/webapi/page/3/index.html
+++ b/dist/tags/webapi/page/3/index.html
@@ -165,6 +165,34 @@ <h2>
   
   
   
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Battery_Status_API/">
+          <span>Web API - Battery Status</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        03-01
+      </div>
+    </header>
+  </article>
+  
+  
+  <article class="posts-collapse">
+    <header>
+      <h2>
+        <a href="/blog/web-api-Background_Tasks_API/">
+          <span>Web API - Background Tasks</span>
+        </a>
+      </h2>
+      <div class="post-meta">
+        02-29
+      </div>
+    </header>
+  </article>
+  
+  
   <article class="posts-collapse">
     <header>
       <h2>
diff --git a/dist/web-api-Geolocation_API/index.html b/dist/web-api-Geolocation_API/index.html
index 844b9ed..2cfed30 100644
--- a/dist/web-api-Geolocation_API/index.html
+++ b/dist/web-api-Geolocation_API/index.html
@@ -265,6 +265,12 @@ <h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</
       </div>
     
     
+      <div class="nav-next">
+        下一篇:
+        <a href="/blog/web-api-HTML_Drag_and_Drop_API/" target="_self">Web API - HTML Drag And Drop</a>
+        <i class="iconfont icon-next"></i>
+      </div>
+    
   </nav>
 
    
diff --git a/dist/web-api-HTML_Drag_and_Drop_API/index.html b/dist/web-api-HTML_Drag_and_Drop_API/index.html
new file mode 100644
index 0000000..b8e9825
--- /dev/null
+++ b/dist/web-api-HTML_Drag_and_Drop_API/index.html
@@ -0,0 +1,457 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+  
+<head>
+  <meta charset="utf-8">
+  <meta name="author" content="董沅鑫, yuanxin.me@gmail.com" />
+  
+  
+  
+  <title>Web API - HTML Drag And Drop | TaoLiuJun&#39;s Blog</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  
+    <meta name="keywords" content="Web API,webapi,Drag Drop," />
+  
+
+  <script>
+    console.log('\n%c Hexo-theme-bmw v4.0 ' + '%c 🎉 https://github.com/dongyuanxin/theme-bmw 🎉\n' + '\n%c View demo online ' + '%c 🔍 https://godbmw.com/ 🔍  \n' , 'color: #fadfa3; background: #030307; padding:3px 0;', '', 'color: #fadfa3; background: #030307; padding:3px 0;', '');
+  </script>
+
+  
+    <meta name="description" content="Html/Css/JavaScript/TypeScript的学习心得；React的学习心得；技术设计思想；生活随想；">
+  
+
+  
+
+  
+    <link rel="icon" href="/images/favicon.ico">
+    <link rel="apple-touch-icon" href="/images/touch-icon.png">
+  
+
+  <link href="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.css" rel="stylesheet">
+  
+<link rel="stylesheet" href="/blog/css/base.css">
+<link rel="stylesheet" href="/blog/icon/iconfont.css">
+<link rel="stylesheet" href="/blog/css/github-markdown.css">
+<link rel="stylesheet" href="/blog/css/highlight.css">
+
+
+  
+<script src="/blog/js/util.js"></script>
+<script src="/blog/js/valine.min.js"></script>
+
+
+  
+
+  
+
+  
+  
+  <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js" async></script>
+  
+  
+
+<meta name="generator" content="Hexo 6.3.0"></head>
+
+  <body>
+
+    
+
+    <div id="app">
+
+      <div class="header-wrap">
+  <header>
+    <div class="site-brand">
+      <div class="site-title">
+        <a href="/blog/">Taoliujun&#39;s Blog</a>
+      </div>
+    </div>
+    <nav class="site-navigation">
+      <ul class="nav-menu">
+      
+        <li class="nav-item" data-path="/">
+          
+            <a 
+              href="/blog/"
+              target="_self"
+            >
+              主页
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="/archives/">
+          
+            <a 
+              href="/blog/archives/"
+              target="_self"
+            >
+              所有文章
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="https://github.com/taoliujun/blog/issues">
+          
+            <a 
+              href="https://github.com/taoliujun/blog/issues"
+              target="_self"
+            >
+              github
+            </a>
+          
+        </li>
+      
+      </ul>
+    </nav>
+    <i class="iconfont icon-menu"></i>
+  </header>
+</div>
+
+<script>
+  let links = document.querySelectorAll('.nav-item');
+  for(let link of links){
+    let childrenLink = link.querySelector('ul');
+    link.addEventListener('mouseenter', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown active";
+      }
+    })
+    link.addEventListener('mouseleave', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown";
+      }
+    })
+  }
+  let rootRealPath = getRealPath(window.location.pathname, true);
+  for(let link of links) {
+    let linkPath = link.getAttribute("data-path");
+    if(linkPath && getRealPath(linkPath, true) === rootRealPath) {
+      link.className = "nav-item hover";
+    }
+  }
+
+  let iconMenu = document.querySelector("i.iconfont.icon-menu"),
+    iconMenuClicked = false;
+  let navDOM = document.querySelector("nav.site-navigation");
+  iconMenu.addEventListener("click", () => {
+    iconMenuClicked 
+      ? navDOM.className = "site-navigation active"
+      : navDOM.className = "site-navigation";
+    iconMenuClicked = !iconMenuClicked;
+  })
+</script>
+
+      
+
+
+
+
+
+
+
+
+<div class="container post-index">
+
+  
+
+<div class="post">
+  <h1 class="article-title">
+    <span>Web API - HTML Drag And Drop</span>
+  </h1>
+  <div class="article-top-meta">
+    <span>
+      发布 : 
+      2024-03-20
+    </span>
+    
+      <span>
+        分类 : 
+          <a href="/blog/categories/Web-API/">
+            Web API
+          </a>
+      </span>
+    
+    
+  </div>
+
+  
+
+  <div class="article-content">
+    <div class="markdown-body">
+      <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/91">https://github.com/taoliujun/blog/issues/91</a></p>
+<!--hexo
+
+---
+url: web-api-HTML_Drag_and_Drop_API
+tags:
+  - webapi
+  - Drag Drop
+---
+
+-->
+
+<h1 id="HTML-Drag-And-Drop"><a href="#HTML-Drag-And-Drop" class="headerlink" title="HTML Drag And Drop"></a>HTML Drag And Drop</h1><blockquote>
+<p>MDN: <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API">https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API</a></p>
+</blockquote>
+<p><strong>HTML Drag And Drop</strong>允许在浏览器中拖放元素。</p>
+<p><strong>为方便描述，假设可拖动的元素为A，可被放置的元素是B。</strong></p>
+<h2 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h2><h3 id="DataTransfer"><a href="#DataTransfer" class="headerlink" title="DataTransfer"></a>DataTransfer</h3><p>拖放过程的数据对象接口，由<code>Event.dataTransfer</code>暴露，它有如下属性：</p>
+<h4 id="dropEffect"><a href="#dropEffect" class="headerlink" title="dropEffect"></a>dropEffect</h4><p>拖放过程中，在B上给用户的反馈，通常在<code>dragenter</code>事件中设置该属性，有几个值：</p>
+<ul>
+<li>copy，生成A副本，通常的反馈表现是将光标变成一个<code>+</code>的标志。</li>
+<li>move，移动A，通常的反馈表现是将光标变成一个<code>箭头</code>的标志。</li>
+<li>link，建立A的链接，通常的反馈表现是将光标变成一个<code>左镜像箭头</code>的标志。</li>
+<li>none，禁止拖放，通常的反馈表现是将源项变成灰色。</li>
+</ul>
+<blockquote>
+<p>除了<code>none</code>会禁止放置行为，其他值仅仅会产生视觉表现，实际的放置行为由<code>drop</code>事件的回调函数里决定。</p>
+</blockquote>
+<h4 id="effectAllowed"><a href="#effectAllowed" class="headerlink" title="effectAllowed"></a>effectAllowed</h4><p>拖放过程中，在A上给用户的反馈，通常在<code>dragstart</code>事件中设置该属性，有几个值：</p>
+<ul>
+<li>none，不允许拖放。</li>
+<li>copy，生成A副本。</li>
+<li>link，可以在新地方建立与A的链接。</li>
+<li>move，可移动A。</li>
+<li>copyLink，允许 copy 或者 link 操作。</li>
+<li>copyMove，允许 copy 或者 move 操作。</li>
+<li>linkMove，允许 link 或者 move 操作。</li>
+<li>all，允许所有的操作。</li>
+</ul>
+<h4 id="files"><a href="#files" class="headerlink" title="files"></a>files</h4><p>拖放的文件列表，返回<code>File[]</code>，此功能可用于将文件拖动到浏览器。</p>
+<h4 id="items"><a href="#items" class="headerlink" title="items"></a>items</h4><p>拖放操作中，数据传输项的列表，返回<code>DataTransferItemList</code>。</p>
+<h4 id="types"><a href="#types" class="headerlink" title="types"></a>types</h4><p>拖放的数据格式，和<code>items</code>的数据顺序是一一对应的。</p>
+<p>还包括了一些方法：</p>
+<h4 id="setData-x2F-getData-x2F-clearData"><a href="#setData-x2F-getData-x2F-clearData" class="headerlink" title="setData&#x2F;getData&#x2F;clearData"></a>setData&#x2F;getData&#x2F;clearData</h4><p>设置、读取、清除拖拽的数据。</p>
+<h4 id="setDragImage"><a href="#setDragImage" class="headerlink" title="setDragImage"></a>setDragImage</h4><p>设置拖动中跟随鼠标的图片，默认是A的半透明图像。</p>
+<h3 id="DataTransferItem"><a href="#DataTransferItem" class="headerlink" title="DataTransferItem"></a>DataTransferItem</h3><p>一个拖动项接口。</p>
+<h3 id="DataTransferItemList"><a href="#DataTransferItemList" class="headerlink" title="DataTransferItemList"></a>DataTransferItemList</h3><p>拖动项集合接口。</p>
+<h3 id="DragEvent"><a href="#DragEvent" class="headerlink" title="DragEvent"></a>DragEvent</h3><p>拖动事件接口。</p>
+<h2 id="属性和方法"><a href="#属性和方法" class="headerlink" title="属性和方法"></a>属性和方法</h2><p>&#x2F;&#x2F;</p>
+<h2 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h2><p>元素拖放过程中有一系列事件，为方便描述，假设可拖动的元素为A，可被放置的元素是B。</p>
+<h3 id="dragstart"><a href="#dragstart" class="headerlink" title="dragstart"></a>dragstart</h3><p>A的拖动行为开始。</p>
+<h3 id="drag"><a href="#drag" class="headerlink" title="drag"></a>drag</h3><p>A被拖动中，它会被连续触发。</p>
+<h3 id="dragenter"><a href="#dragenter" class="headerlink" title="dragenter"></a>dragenter</h3><p>A被拖动进了B。</p>
+<h3 id="dragover"><a href="#dragover" class="headerlink" title="dragover"></a>dragover</h3><p>A被拖动中，在B的区域内，它会被连续触发。</p>
+<h3 id="dragleave"><a href="#dragleave" class="headerlink" title="dragleave"></a>dragleave</h3><p>A被拖动离开了B。</p>
+<h3 id="drop"><a href="#drop" class="headerlink" title="drop"></a>drop</h3><p>A放在了B中。</p>
+<h3 id="dragend"><a href="#dragend" class="headerlink" title="dragend"></a>dragend</h3><p>A的拖动行为停止，比如放开了鼠标。</p>
+<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-api/HTML_Drag_and_Drop_API/index.html">https://taoliujun.github.io/example/web-api/HTML_Drag_and_Drop_API/index.html</a></p>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+  <div class="article-footer">
+    <div class="article-meta pull-left">
+      <span>
+        
+          <i class="iconfont icon-06tags"></i>标签: 
+          
+          <span class="span--tag">
+            <a href="/blog/tags/webapi/">
+              #webapi
+            </a>
+          </span>
+          
+          <span class="span--tag">
+            <a href="/blog/tags/Drag-Drop/">
+              #Drag Drop
+            </a>
+          </span>
+          
+        
+      </span>
+    </div>
+    <div class="article-meta pull-right">
+    </div>
+  </div>
+</div>
+
+
+  <aside id="sidebar">
+    <p id="sidebar-header"></p>
+    <ol id="sidebar-toc"></ol>
+  </aside>
+  <script async>setTimeout(generateToc, 10);</script>
+
+
+  <nav class="post-navigation">
+    
+      <div class="nav-pre">
+        <i class="iconfont icon-prev"></i>
+        上一篇:
+        <a href="/blog/web-api-Geolocation_API/" target="_self">Web API - Geolocation</a>
+      </div>
+    
+    
+      <div class="nav-next">
+        下一篇:
+        <a href="/blog/web-api-Intersection_Observer_API/" target="_self">Web Api - Intersection Observer</a>
+        <i class="iconfont icon-next"></i>
+      </div>
+    
+  </nav>
+
+   
+
+   
+
+</div>
+
+
+      <footer>
+  <p class="site-info">
+    Powered by <a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a> | Theme - <a target="_blank" rel="noopener" href="https://github.com/dongyuanxin/theme-bmw">BMW</a>
+    <br>
+    
+  </p>
+</footer>
+
+      <div class="back-to-top hidden">
+  <span>
+    <i class="iconfont icon-60"></i><span></span>%
+  </span>
+</div>
+
+<script>
+const updateIconToTop = percent => {
+  let dom = document.querySelector(".back-to-top span span");
+  dom.innerText = percent;
+  if(percent < 1) {
+    document.querySelector(".back-to-top").className = "back-to-top hidden";
+  } else {
+    document.querySelector(".back-to-top").className = "back-to-top";
+  }
+}
+
+const handleScoll = () => {
+  let isRunning = false;
+  return () => {
+    if (isRunning) return;
+    isRunning = true;
+    window.requestAnimationFrame(timestamp => {
+      let scrollTop =
+          document.documentElement.scrollTop || document.body.scrollTop,
+        scrollHeight =
+          document.documentElement.scrollHeight ||
+          document.body.scrollHeight,
+        clientHeight =
+          document.documentElement.clientHeight ||
+          document.body.clientHeight;
+      isRunning = false;
+      if (scrollTop <= 1) {
+        updateIconToTop(0);
+        return;
+      }
+      if (scrollTop + clientHeight >= scrollHeight) {
+        updateIconToTop(100);
+      } else {
+        updateIconToTop(parseInt(
+          100 * scrollTop / (scrollHeight - clientHeight),
+          10
+        ));
+      }
+    });
+  };
+}
+
+const backToTop = () => {
+  let scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop,
+    delay = 10,
+    time = 200;
+  if (scrollTop <= 20) {
+    document.documentElement.scrollTop = 0;
+    document.body.scrollTop = 0;
+    return;
+  }
+  let step = Math.ceil(scrollTop * delay / time);
+  let timer = setInterval(() => {
+    scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop;
+    if (scrollTop - step <= 0) {
+      document.documentElement.scrollTop = 0;
+      document.body.scrollTop = 0;
+      clearInterval(timer);
+    } else {
+      document.documentElement.scrollTop = scrollTop - step;
+      document.body.scrollTop = scrollTop - step;
+    }
+  }, delay);
+}
+
+document.addEventListener("scroll", handleScoll(), false);
+
+document.querySelector(".back-to-top").addEventListener("click", backToTop, false);
+
+</script>
+
+    </div>
+
+    
+      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
+<script>
+  (() => {
+    const mathjaxConfig = {
+      showProcessingMessages: false, //关闭js加载过程信息
+      messageStyle: "none", //不显示信息
+      jax: ["input/TeX", "output/HTML-CSS"],
+      tex2jax: {
+        inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
+        displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
+        skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
+      },
+      "HTML-CSS": {
+        availableFonts: ["STIX", "TeX"], //可选字体
+        showMathMenu: false //关闭右击菜单显示
+      }
+    }
+
+    let mathjaxInterval = setInterval(() => {
+      if(!window.MathJax){
+        return;
+      }
+      window.MathJax.Hub.Config(mathjaxConfig)
+      window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')])
+
+      clearInterval(mathjaxInterval)
+    }, 10)    
+  })()
+</script>
+    
+
+    <script src="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.js" async></script>
+<script async>
+  let fancyTimer = setInterval(function(){
+    if(!window.$){
+      return;
+    }
+    $(document).ready(function() {
+      $(".post img").each(function () {
+        if($(this).parent().get(0).tagName.toLowerCase() === "a") {
+          return;
+        }
+        // $(this).attr("data-fancybox", "gallery"); // if you add 'data-fancybox', img will display after showed
+        var element = document.createElement("a");
+        $(element).attr("data-fancybox", "gallery");
+        $(element).attr("href", $(this).attr("src"));
+        $(this).wrap(element);
+      });
+      
+      clearInterval(fancyTimer);
+    });
+  }, 10);
+</script>
+
+    
+  </body>
+
+</html>
diff --git a/dist/web-api-Intersection_Observer_API/index.html b/dist/web-api-Intersection_Observer_API/index.html
new file mode 100644
index 0000000..5781b29
--- /dev/null
+++ b/dist/web-api-Intersection_Observer_API/index.html
@@ -0,0 +1,466 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+  
+<head>
+  <meta charset="utf-8">
+  <meta name="author" content="董沅鑫, yuanxin.me@gmail.com" />
+  
+  
+  
+  <title>Web Api - Intersection Observer | TaoLiuJun&#39;s Blog</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  
+    <meta name="keywords" content="Web API,webapi,Intersection Observer," />
+  
+
+  <script>
+    console.log('\n%c Hexo-theme-bmw v4.0 ' + '%c 🎉 https://github.com/dongyuanxin/theme-bmw 🎉\n' + '\n%c View demo online ' + '%c 🔍 https://godbmw.com/ 🔍  \n' , 'color: #fadfa3; background: #030307; padding:3px 0;', '', 'color: #fadfa3; background: #030307; padding:3px 0;', '');
+  </script>
+
+  
+    <meta name="description" content="Html/Css/JavaScript/TypeScript的学习心得；React的学习心得；技术设计思想；生活随想；">
+  
+
+  
+
+  
+    <link rel="icon" href="/images/favicon.ico">
+    <link rel="apple-touch-icon" href="/images/touch-icon.png">
+  
+
+  <link href="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.css" rel="stylesheet">
+  
+<link rel="stylesheet" href="/blog/css/base.css">
+<link rel="stylesheet" href="/blog/icon/iconfont.css">
+<link rel="stylesheet" href="/blog/css/github-markdown.css">
+<link rel="stylesheet" href="/blog/css/highlight.css">
+
+
+  
+<script src="/blog/js/util.js"></script>
+<script src="/blog/js/valine.min.js"></script>
+
+
+  
+
+  
+
+  
+  
+  <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js" async></script>
+  
+  
+
+<meta name="generator" content="Hexo 6.3.0"></head>
+
+  <body>
+
+    
+
+    <div id="app">
+
+      <div class="header-wrap">
+  <header>
+    <div class="site-brand">
+      <div class="site-title">
+        <a href="/blog/">Taoliujun&#39;s Blog</a>
+      </div>
+    </div>
+    <nav class="site-navigation">
+      <ul class="nav-menu">
+      
+        <li class="nav-item" data-path="/">
+          
+            <a 
+              href="/blog/"
+              target="_self"
+            >
+              主页
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="/archives/">
+          
+            <a 
+              href="/blog/archives/"
+              target="_self"
+            >
+              所有文章
+            </a>
+          
+        </li>
+      
+        <li class="nav-item" data-path="https://github.com/taoliujun/blog/issues">
+          
+            <a 
+              href="https://github.com/taoliujun/blog/issues"
+              target="_self"
+            >
+              github
+            </a>
+          
+        </li>
+      
+      </ul>
+    </nav>
+    <i class="iconfont icon-menu"></i>
+  </header>
+</div>
+
+<script>
+  let links = document.querySelectorAll('.nav-item');
+  for(let link of links){
+    let childrenLink = link.querySelector('ul');
+    link.addEventListener('mouseenter', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown active";
+      }
+    })
+    link.addEventListener('mouseleave', () => {
+      if(childrenLink) {
+        childrenLink.className = "nav-menu--dropdown";
+      }
+    })
+  }
+  let rootRealPath = getRealPath(window.location.pathname, true);
+  for(let link of links) {
+    let linkPath = link.getAttribute("data-path");
+    if(linkPath && getRealPath(linkPath, true) === rootRealPath) {
+      link.className = "nav-item hover";
+    }
+  }
+
+  let iconMenu = document.querySelector("i.iconfont.icon-menu"),
+    iconMenuClicked = false;
+  let navDOM = document.querySelector("nav.site-navigation");
+  iconMenu.addEventListener("click", () => {
+    iconMenuClicked 
+      ? navDOM.className = "site-navigation active"
+      : navDOM.className = "site-navigation";
+    iconMenuClicked = !iconMenuClicked;
+  })
+</script>
+
+      
+
+
+
+
+
+
+
+
+<div class="container post-index">
+
+  
+
+<div class="post">
+  <h1 class="article-title">
+    <span>Web Api - Intersection Observer</span>
+  </h1>
+  <div class="article-top-meta">
+    <span>
+      发布 : 
+      2024-03-20
+    </span>
+    
+      <span>
+        分类 : 
+          <a href="/blog/categories/Web-API/">
+            Web API
+          </a>
+      </span>
+    
+    
+  </div>
+
+  
+
+  <div class="article-content">
+    <div class="markdown-body">
+      <p>原文链接：<a target="_blank" rel="noopener" href="https://github.com/taoliujun/blog/issues/92">https://github.com/taoliujun/blog/issues/92</a></p>
+<!--hexo
+
+---
+url: web-api-Intersection_Observer_API
+tags:
+  - webapi
+  - Intersection Observer
+---
+
+-->
+
+<h1 id="Intersection-Observer"><a href="#Intersection-Observer" class="headerlink" title="Intersection Observer"></a>Intersection Observer</h1><blockquote>
+<p>MDN: <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API</a></p>
+</blockquote>
+<p><strong>Intersection Observer</strong>用于检测目标元素与祖先元素或顶级文档的视口相交情况的变化。主要用于：</p>
+<ul>
+<li>图片懒加载。</li>
+<li>无限滚动。</li>
+<li>元素可见度埋点。</li>
+</ul>
+<h2 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h2><h3 id="IntersectionObserver"><a href="#IntersectionObserver" class="headerlink" title="IntersectionObserver"></a>IntersectionObserver</h3><p>相交观察器接口，实例化的时候接受一个回调函数，和一个配置项。</p>
+<blockquote>
+<p>观察是异步的，所以回调函数执行时获取的相交信息，不是实时的。</p>
+</blockquote>
+<p>回调函数包含了两个入参：</p>
+<ul>
+<li><p>entries，<code>IntersectionObserverEntry</code>接口集合。</p>
+</li>
+<li><p>observer，本实例。</p>
+</li>
+<li><p>配置项包含属性：</p>
+</li>
+<li><p>root，必须是被观察元素的祖先元素，或<code>null</code>表示为顶级文档。被观察元素将与该元素相交。</p>
+</li>
+<li><p>rootMargin，计算交叉时偏移。默认为<code>0 0 0 0</code>。</p>
+</li>
+<li><p>threshold，相交比例阈值，0-1，表示相交比例达到多少时会触发回调函数，默认为<code>0</code>。</p>
+</li>
+</ul>
+<p>本接口实例返回了一系列属性，如<code>root</code>、<code>rootMargin</code>等，意义同入参配置项。还返回了一系列方法如下：</p>
+<ul>
+<li>observe，加入一个被观察元素。</li>
+<li>unobserve，移除一个被观察元素。</li>
+<li>disconnect，停止观察。</li>
+<li>takeRecords，返回被观察者集合的相交信息。</li>
+</ul>
+<h3 id="IntersectionObserverEntry"><a href="#IntersectionObserverEntry" class="headerlink" title="IntersectionObserverEntry"></a>IntersectionObserverEntry</h3><p>某一时刻的相交信息，包含了一系列属性：</p>
+<ul>
+<li>boundingClientRect，被观察者的边界信息。</li>
+<li>intersectionRect，相交区域。</li>
+<li>intersectionRatio，相交比例。</li>
+<li>isIntersecting，是否相交。</li>
+<li>rootBounds，根元素的边界信息。</li>
+<li>target，被观察者元素。</li>
+<li>time，交叉触发时间差。</li>
+</ul>
+<h2 id="属性和方法"><a href="#属性和方法" class="headerlink" title="属性和方法"></a>属性和方法</h2><p>&#x2F;&#x2F;</p>
+<h2 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h2><p>&#x2F;&#x2F;</p>
+<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p>示例：<a href="https://taoliujun.github.io/example/web-api/Intersection_Observer_API/index.html">https://taoliujun.github.io/example/web-api/Intersection_Observer_API/index.html</a></p>
+<ol>
+<li>在高度400的父观察元素中，放3个高度300的被观察元素，触发阈值是<code>[0,1]</code>，表示被观察者的相交区域比例在0或1发生变化的时候，都会触发回到函数，初始化日志：</li>
+</ol>
+<p><img src="https://github.com/taoliujun/blog/assets/5689134/7c93addb-c0b1-4705-873d-fcd150550e22" alt="image"></p>
+<p>元素1全部可见，元素2是0.33的区域可见，元素3则完全不可见。</p>
+<ol>
+<li>滚动一点，元素1触发了1阈值。</li>
+</ol>
+<p><img src="https://github.com/taoliujun/blog/assets/5689134/791e2220-8837-4784-9139-094b9d6db4eb" alt="image"></p>
+<ol start="3">
+<li>再滚动一点，元素1没有触发0阈值，所以日志中没有它；元素2触发了1阈值；元素3触发了0阈值。</li>
+</ol>
+<p><img src="https://github.com/taoliujun/blog/assets/5689134/28587ac6-29d7-4693-90fb-844d3b4f4239" alt="image"></p>
+
+    </div>
+  </div>
+  
+  
+  
+
+  
+
+  <div class="article-footer">
+    <div class="article-meta pull-left">
+      <span>
+        
+          <i class="iconfont icon-06tags"></i>标签: 
+          
+          <span class="span--tag">
+            <a href="/blog/tags/webapi/">
+              #webapi
+            </a>
+          </span>
+          
+          <span class="span--tag">
+            <a href="/blog/tags/Intersection-Observer/">
+              #Intersection Observer
+            </a>
+          </span>
+          
+        
+      </span>
+    </div>
+    <div class="article-meta pull-right">
+    </div>
+  </div>
+</div>
+
+
+  <aside id="sidebar">
+    <p id="sidebar-header"></p>
+    <ol id="sidebar-toc"></ol>
+  </aside>
+  <script async>setTimeout(generateToc, 10);</script>
+
+
+  <nav class="post-navigation">
+    
+      <div class="nav-pre">
+        <i class="iconfont icon-prev"></i>
+        上一篇:
+        <a href="/blog/web-api-HTML_Drag_and_Drop_API/" target="_self">Web API - HTML Drag And Drop</a>
+      </div>
+    
+    
+  </nav>
+
+   
+
+   
+
+</div>
+
+
+      <footer>
+  <p class="site-info">
+    Powered by <a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a> | Theme - <a target="_blank" rel="noopener" href="https://github.com/dongyuanxin/theme-bmw">BMW</a>
+    <br>
+    
+  </p>
+</footer>
+
+      <div class="back-to-top hidden">
+  <span>
+    <i class="iconfont icon-60"></i><span></span>%
+  </span>
+</div>
+
+<script>
+const updateIconToTop = percent => {
+  let dom = document.querySelector(".back-to-top span span");
+  dom.innerText = percent;
+  if(percent < 1) {
+    document.querySelector(".back-to-top").className = "back-to-top hidden";
+  } else {
+    document.querySelector(".back-to-top").className = "back-to-top";
+  }
+}
+
+const handleScoll = () => {
+  let isRunning = false;
+  return () => {
+    if (isRunning) return;
+    isRunning = true;
+    window.requestAnimationFrame(timestamp => {
+      let scrollTop =
+          document.documentElement.scrollTop || document.body.scrollTop,
+        scrollHeight =
+          document.documentElement.scrollHeight ||
+          document.body.scrollHeight,
+        clientHeight =
+          document.documentElement.clientHeight ||
+          document.body.clientHeight;
+      isRunning = false;
+      if (scrollTop <= 1) {
+        updateIconToTop(0);
+        return;
+      }
+      if (scrollTop + clientHeight >= scrollHeight) {
+        updateIconToTop(100);
+      } else {
+        updateIconToTop(parseInt(
+          100 * scrollTop / (scrollHeight - clientHeight),
+          10
+        ));
+      }
+    });
+  };
+}
+
+const backToTop = () => {
+  let scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop,
+    delay = 10,
+    time = 200;
+  if (scrollTop <= 20) {
+    document.documentElement.scrollTop = 0;
+    document.body.scrollTop = 0;
+    return;
+  }
+  let step = Math.ceil(scrollTop * delay / time);
+  let timer = setInterval(() => {
+    scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop;
+    if (scrollTop - step <= 0) {
+      document.documentElement.scrollTop = 0;
+      document.body.scrollTop = 0;
+      clearInterval(timer);
+    } else {
+      document.documentElement.scrollTop = scrollTop - step;
+      document.body.scrollTop = scrollTop - step;
+    }
+  }, delay);
+}
+
+document.addEventListener("scroll", handleScoll(), false);
+
+document.querySelector(".back-to-top").addEventListener("click", backToTop, false);
+
+</script>
+
+    </div>
+
+    
+      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
+<script>
+  (() => {
+    const mathjaxConfig = {
+      showProcessingMessages: false, //关闭js加载过程信息
+      messageStyle: "none", //不显示信息
+      jax: ["input/TeX", "output/HTML-CSS"],
+      tex2jax: {
+        inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
+        displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
+        skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
+      },
+      "HTML-CSS": {
+        availableFonts: ["STIX", "TeX"], //可选字体
+        showMathMenu: false //关闭右击菜单显示
+      }
+    }
+
+    let mathjaxInterval = setInterval(() => {
+      if(!window.MathJax){
+        return;
+      }
+      window.MathJax.Hub.Config(mathjaxConfig)
+      window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')])
+
+      clearInterval(mathjaxInterval)
+    }, 10)    
+  })()
+</script>
+    
+
+    <script src="https://cdn.bootcss.com/fancybox/3.5.2/jquery.fancybox.min.js" async></script>
+<script async>
+  let fancyTimer = setInterval(function(){
+    if(!window.$){
+      return;
+    }
+    $(document).ready(function() {
+      $(".post img").each(function () {
+        if($(this).parent().get(0).tagName.toLowerCase() === "a") {
+          return;
+        }
+        // $(this).attr("data-fancybox", "gallery"); // if you add 'data-fancybox', img will display after showed
+        var element = document.createElement("a");
+        $(element).attr("data-fancybox", "gallery");
+        $(element).attr("href", $(this).attr("src"));
+        $(this).wrap(element);
+      });
+      
+      clearInterval(fancyTimer);
+    });
+  }, 10);
+</script>
+
+    
+  </body>
+
+</html>
diff --git a/dist/web-api-readme/index.html b/dist/web-api-readme/index.html
index 31dee06..acb420e 100644
--- a/dist/web-api-readme/index.html
+++ b/dist/web-api-readme/index.html
@@ -195,7 +195,7 @@ <h1 class="article-title">
 <blockquote>
 <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><!--hexo-->
+<h2 id="目录见下"><a href="#目录见下" class="headerlink" title="目录见下"></a>目录见下</h2><!--hexo-->
 <h3 id="A"><a href="#A" class="headerlink" title="A"></a>A</h3><ul>
 <li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Audio_Output_Devices_API">Audio Output Devices API</a> 选择音频播放设备。<em>Experimental</em></li>
 </ul>
@@ -257,7 +257,7 @@ <h3 id="G"><a href="#G" class="headerlink" title="G"></a>G</h3><ul>
 </ul>
 <h3 id="H"><a href="#H" class="headerlink" title="H"></a>H</h3><ul>
 <li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API">HTML DOM</a> DOM操作，包括form data、canvas、video等</li>
-<li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a> 拖放</li>
+<li><input checked="" disabled="" type="checkbox"> #91 ，<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a> 拖放</li>
 <li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API">HTML Sanitizer API</a> 安全的HTML字符串 <em>Experimental</em></li>
 <li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/History_API">History API</a> 浏览器会话记录</li>
 <li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs">Houdini API</a> 扩展CSS的样式和布局</li>
@@ -269,7 +269,7 @@ <h3 id="I"><a href="#I" class="headerlink" title="I"></a>I</h3><ul>
 <li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Ink_API">Ink API</a> 调用系统的笔触合成功能 <em>Experimental</em></li>
 <li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/InputDeviceCapabilities_API">Input Device Capabilities API</a> <em>Experimental</em></li>
 <li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Insertable_Streams_for_MediaStreamTrack_API">Insertable Streams for MediaStreamTrack API</a> 操作媒体流，比如合成音频、往视频里加一个帽子</li>
-<li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> 监听元素是否出现在视口</li>
+<li><input checked="" disabled="" type="checkbox"> #92，<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> 监听元素是否出现在视口</li>
 </ul>
 <h3 id="K"><a href="#K" class="headerlink" title="K"></a>K</h3><ul>
 <li><input disabled="" type="checkbox"> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API">Keyboard API</a> 访问物理键盘的信息、如布局等 <em>Experimental</em></li>
diff --git a/src/db.json b/src/db.json
index 071a83f..12bc9ea 100644
--- a/src/db.json
+++ b/src/db.json
@@ -1 +1 @@
-{"meta":{"version":1,"warehouse":"4.0.2"},"models":{"Asset":[{"_id":"themes/bmw/source/css/base.css","path":"css/base.css","modified":1,"renderable":1},{"_id":"themes/bmw/source/css/base.css.map","path":"css/base.css.map","modified":1,"renderable":1},{"_id":"themes/bmw/source/css/github-markdown.css","path":"css/github-markdown.css","modified":1,"renderable":1},{"_id":"themes/bmw/source/css/highlight.css","path":"css/highlight.css","modified":1,"renderable":1},{"_id":"themes/bmw/source/css/prism.css","path":"css/prism.css","modified":1,"renderable":1},{"_id":"themes/bmw/source/icon/demo_fontclass.html","path":"icon/demo_fontclass.html","modified":1,"renderable":1},{"_id":"themes/bmw/source/icon/iconfont.css","path":"icon/iconfont.css","modified":1,"renderable":1},{"_id":"themes/bmw/source/icon/iconfont.eot","path":"icon/iconfont.eot","modified":1,"renderable":1},{"_id":"themes/bmw/source/icon/iconfont.js","path":"icon/iconfont.js","modified":1,"renderable":1},{"_id":"themes/bmw/source/icon/iconfont.svg","path":"icon/iconfont.svg","modified":1,"renderable":1},{"_id":"themes/bmw/source/icon/iconfont.ttf","path":"icon/iconfont.ttf","modified":1,"renderable":1},{"_id":"themes/bmw/source/icon/iconfont.woff","path":"icon/iconfont.woff","modified":1,"renderable":1},{"_id":"themes/bmw/source/images/alipay.png","path":"images/alipay.png","modified":1,"renderable":1},{"_id":"themes/bmw/source/images/favicon.ico","path":"images/favicon.ico","modified":1,"renderable":1},{"_id":"themes/bmw/source/images/touch-icon.png","path":"images/touch-icon.png","modified":1,"renderable":1},{"_id":"themes/bmw/source/images/wechat.png","path":"images/wechat.png","modified":1,"renderable":1},{"_id":"themes/bmw/source/js/util.js","path":"js/util.js","modified":1,"renderable":1},{"_id":"themes/bmw/source/js/valine.min.js","path":"js/valine.min.js","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/animation.scss","path":"scss/animation.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/article.scss","path":"scss/article.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/base.scss","path":"scss/base.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/mathjax.scss","path":"scss/mathjax.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/vcomments.scss","path":"scss/vcomments.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/stylus/highlight.styl","path":"stylus/highlight.styl","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/layout/about.scss","path":"scss/layout/about.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/layout/category.scss","path":"scss/layout/category.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/layout/friend.scss","path":"scss/layout/friend.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/layout/home.scss","path":"scss/layout/home.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/layout/index.scss","path":"scss/layout/index.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/layout/post.scss","path":"scss/layout/post.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/layout/tag.scss","path":"scss/layout/tag.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/partial/footer.scss","path":"scss/partial/footer.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/partial/navigation.scss","path":"scss/partial/navigation.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/partial/reward.scss","path":"scss/partial/reward.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/partial/timeline.scss","path":"scss/partial/timeline.scss","modified":1,"renderable":1}],"Cache":[{"_id":"source/_posts/ast-in-css-module-auto-match.md","hash":"57243d11328b5b236e753cf43e3aeaf92581d5c8","modified":1710496324131},{"_id":"source/_posts/changesets-in-monorepo.md","hash":"028e5a939286e4d64d530cfce91dfd8ce48ff8bc","modified":1710496324131},{"_id":"source/_posts/es6-destructuring.md","hash":"14256da572743cb2ec5dfa96e7bfbe36f0d1662c","modified":1710496324131},{"_id":"source/_posts/es6-map.md","hash":"1c004ce951d740f148ac18fc64df7261bdac2c94","modified":1710496324131},{"_id":"source/_posts/es6-operator.md","hash":"3ea73f56b24d7c69d59810aa2d1abc9d850a79f4","modified":1710496324131},{"_id":"source/_posts/es6-promise.md","hash":"65ecdccb17128c0680d96667944dc9c89a386ac5","modified":1710496324131},{"_id":"source/_posts/es6-proxy.md","hash":"b90e92ade7360df923dc577c4a82a8a7b1cd1e55","modified":1710496324131},{"_id":"source/_posts/es6-reflect.md","hash":"2106ce9eeba6a2fde6b0a1b745ec45aa18dfcc3c","modified":1710496324131},{"_id":"source/_posts/es6-set.md","hash":"90c7946c5ff3c077400cc0b41c39e12577f4839a","modified":1710496324131},{"_id":"source/_posts/es6-symbol.md","hash":"de300a1125fb2b54db5c5ed2159603ef76af7584","modified":1710496324131},{"_id":"source/_posts/github-actions-examples.md","hash":"447bddffb8264f48acf58ad353b7fc217564f892","modified":1710496324131},{"_id":"source/_posts/github-actions-intro.md","hash":"a83c76905a6e0914c86b1a926a8796ed856a0d5e","modified":1710496324131},{"_id":"source/_posts/github-actions-jobs.md","hash":"e9a026ecf09a82d48e770e2f92f095e3a27cbde8","modified":1710496324131},{"_id":"source/_posts/github-actions-learn.md","hash":"0c0b4c67d64f84b9824a2ddef979dcd76fb438e5","modified":1710496324131},{"_id":"source/_posts/github-actions-quickstart.md","hash":"74ba308dae7aed5228948aa59b7cc2b5b200b2fa","modified":1710496324131},{"_id":"source/_posts/github-actions-runs.md","hash":"8c85a6c4f08c951e1418e4dc0098a720d8b93e34","modified":1710496324131},{"_id":"source/_posts/github-actions-sample-eslint-in-pull-request.md","hash":"90053841520f1e0bc092fbf24ac1f975ab2e8070","modified":1710496324131},{"_id":"source/_posts/github-actions-workflows.md","hash":"c741cbe78aaacf2cd443d5de96826ca6c850fea0","modified":1710496324131},{"_id":"source/_posts/react-performance optimization.md","hash":"4c5ab18461891d2786c41e8993815e6135dfb1a4","modified":1710496324131},{"_id":"source/_posts/react-usedeferredvalue.md","hash":"f33a9314f722fe6eca1fcbf090ae11385dfe0771","modified":1710496324131},{"_id":"source/_posts/react-usetransition.md","hash":"6c1e1d0c887c1d92d76590a8059e369ba96b9409","modified":1710496324131},{"_id":"source/_posts/react-zustand.md","hash":"346576eb884e3157eb3e630225a314d9f0cd36fe","modified":1710496324135},{"_id":"source/_posts/snapshot-impact-on-coverage.md","hash":"58a3c96463a7f8f98f131e868f53f4d313d3af30","modified":1710496324135},{"_id":"source/_posts/tsconfig-json.md","hash":"7b1afc50798072eb2c6872bf14a39e362b5a9384","modified":1710496324135},{"_id":"source/_posts/typescript-means.md","hash":"bc4c5fbcdf3d022678d478ee7393daeb696ee0b8","modified":1710496324135},{"_id":"source/_posts/web-api-Background_Tasks_API.md","hash":"3aa6f43ef44402abea7e62e2690b1f283f147a73","modified":1710496324135},{"_id":"source/_posts/web-api-Badging_API.md","hash":"82453a1f547bc895f3c224194f480de5b282210a","modified":1710496324135},{"_id":"source/_posts/web-api-Battery_Status_API.md","hash":"870f88fd4d7d58628b6207a57e160bd019d5f2e9","modified":1710496324135},{"_id":"source/_posts/web-api-Beacon_API.md","hash":"2e8762cb50b47ef63be48e3a0a55560d5c802a3d","modified":1710496324135},{"_id":"source/_posts/web-api-Broadcast_Channel_API.md","hash":"0504a4ad4c7d65cacdd7bba153a9f0f33372357a","modified":1710496324135},{"_id":"source/_posts/web-api-CSS_Custom_Highlight_API.md","hash":"eb8f5f57d11f685cadd845208be6167cb55afa9e","modified":1710496324135},{"_id":"source/_posts/web-api-CSS_Font_Loading_API.md","hash":"a70aa5a15f216647b4db137c0f3f6809a2b0268d","modified":1710496324135},{"_id":"source/_posts/web-api-CSS_Object_Model.md","hash":"5bd07b29ecc410a52d10bb8fb771d8607eeae983","modified":1710496324135},{"_id":"source/_posts/web-api-CSS_Properties_and_Values_API.md","hash":"548f7fa1b5b44745694bd5663ef2a53c3f82d362","modified":1710496324135},{"_id":"source/_posts/web-api-CSS_Typed_OM_API.md","hash":"c0bb28f4aa8df9dffd22ccc00784b84b1b280d0b","modified":1710496324135},{"_id":"source/_posts/web-api-Clipboard_API.md","hash":"5211c807ad9021a26b45de79600238348547e72f","modified":1710496324135},{"_id":"source/_posts/web-api-Cookie_Store_API.md","hash":"ec18e367bb4dc7e3a005f5d65a8f88b6912808b9","modified":1710496324135},{"_id":"source/_posts/web-api-Credential_Management_API.md","hash":"585073152933102838012cfe9f532b072a7df482","modified":1710496324135},{"_id":"source/_posts/web-api-Device_Memory_API.md","hash":"ae2fe144ab1b6a488e9b6738bf1c3772a0232915","modified":1710496324135},{"_id":"source/_posts/web-api-Device_orientation_events.md","hash":"bce158fca1c53b592292b1295b595bb0d2ab985d","modified":1710496324135},{"_id":"source/_posts/web-api-Document_Object_Model.md","hash":"6b6aa4db376bb9becc8a13c2158b74d0e853ac6e","modified":1710496324135},{"_id":"source/_posts/web-api-Document_Picture-in-Picture_API.md","hash":"5bd3185ecff8f32b01455b330625cc43e1633455","modified":1710496324135},{"_id":"source/_posts/web-api-EyeDropper_API.md","hash":"d08dc9dd59ac682f13f05f0ea23b0a8d05d6e426","modified":1710496324135},{"_id":"source/_posts/web-api-File_API.md","hash":"2a43351ad88a54f6add337fbd54de8f6d1e14391","modified":1710496324135},{"_id":"source/_posts/web-api-File_System_API.md","hash":"657e9ddcda140c1123a84ad8795d5fc04b892ca9","modified":1710496324135},{"_id":"source/_posts/web-api-Fullscreen_API.md","hash":"bbba6bce4df29d4abb71da4b60bf70b74f0bdcba","modified":1710496324135},{"_id":"source/_posts/web-api-Geolocation_API.md","hash":"b8c0fb2c8fe84ea2c73918b540fa0c9c6f639254","modified":1710496324135},{"_id":"source/_posts/web-api-readme.md","hash":"3ae7485b82a800ece491c44d248dd505a356f4e7","modified":1710496329991},{"_id":"source/_posts/what-is-es6.md","hash":"fd3d6c8c60ca914b00153cba27a84b3ad395a0b3","modified":1710496324135},{"_id":"source/_posts/write-components-elegantly-using-radix.md","hash":"a50deb6fbb3d782319c9c426dd24547d95d9298e","modified":1710496324135},{"_id":"themes/bmw/source/scss/animation.scss","hash":"da39a3ee5e6b4b0d3255bfef95601890afd80709","modified":1710496324139},{"_id":"themes/bmw/LICENSE","hash":"ecd7addf36fdeb14bcef981bfbe7aa121810ac30","modified":1710496324135},{"_id":"themes/bmw/README.md","hash":"c6143c44538c9d6d293af94095dc4b6364a21c3f","modified":1710496324135},{"_id":"themes/bmw/_config.yml","hash":"4a0d6139b20102637dc687496c23364eb775437d","modified":1710496324135},{"_id":"themes/bmw/docs/中文文档.md","hash":"198b7eb8150772d4752baec770f3aea67687ac1e","modified":1710496324135},{"_id":"themes/bmw/layout/archive.ejs","hash":"c770c490af2ac726a905fca7ba8a7ffcf49468e7","modified":1710496324135},{"_id":"themes/bmw/layout/category.ejs","hash":"c770c490af2ac726a905fca7ba8a7ffcf49468e7","modified":1710496324135},{"_id":"themes/bmw/layout/index.ejs","hash":"fea34b0179ec6b7cf91273ba61f853a544d60284","modified":1710496324135},{"_id":"themes/bmw/layout/layout.ejs","hash":"d54e37533cabb21d3ad98f2f44a53030550fb8ec","modified":1710496324135},{"_id":"themes/bmw/layout/post.ejs","hash":"fb5ba7d8910aaf4f6ae811d1cada93aa03a2dc56","modified":1710496324135},{"_id":"themes/bmw/layout/tag.ejs","hash":"c770c490af2ac726a905fca7ba8a7ffcf49468e7","modified":1710496324135},{"_id":"themes/bmw/layout/_partial/comment.ejs","hash":"9d82642448abbd30dc00ae906821968a27f92148","modified":1710496324135},{"_id":"themes/bmw/layout/_partial/fancybox.ejs","hash":"be6f655a475098bf3fa1da218c352b8c07e5df90","modified":1710496324135},{"_id":"themes/bmw/layout/_partial/footer.ejs","hash":"d9e8980f8f1b95a54156a2a29f1d50ea0286e5d5","modified":1710496324135},{"_id":"themes/bmw/layout/_partial/header.ejs","hash":"511350a1c2f77821a9b7a231c7340ac9fb4ce21f","modified":1710496324135},{"_id":"themes/bmw/layout/_partial/mathjax.ejs","hash":"1c71755c63ae74fafb633bfe383ad0a584843259","modified":1710496324135},{"_id":"themes/bmw/layout/_partial/navigation.ejs","hash":"021c84bfeb638c71bbd39868601d3c9f39658209","modified":1710496324135},{"_id":"themes/bmw/layout/_partial/player.ejs","hash":"55f4e5edd194ad7f793d91325e69c0bf2c0ba0a9","modified":1710496324135},{"_id":"themes/bmw/layout/_partial/reward.ejs","hash":"9189965b71044de79e633d365be07ccd796b520b","modified":1710496324135},{"_id":"themes/bmw/layout/_partial/social.ejs","hash":"c37342ff555f67b199e265b5678517d1bfbe7d80","modified":1710496324135},{"_id":"themes/bmw/layout/_partial/timer.ejs","hash":"bfca7a62af6aa01f2dd3ad660392d68a2c68e62c","modified":1710496324135},{"_id":"themes/bmw/layout/component/back-to-up.ejs","hash":"dbe8fc9f58da9d7b6622bb0c652d41c1c8acfb1f","modified":1710496324135},{"_id":"themes/bmw/layout/component/passage-viewer.ejs","hash":"907d2ef218a9a9935c06e0434e89275f9548de17","modified":1710496324135},{"_id":"themes/bmw/layout/component/timeline.ejs","hash":"a5e3ea8779f22250edbcf06e6d4873ba056ee8a3","modified":1710496324135},{"_id":"themes/bmw/source/css/base.css","hash":"dc44d009646091562cda4fc5b6cb6912779be6a7","modified":1710496324135},{"_id":"themes/bmw/source/css/base.css.map","hash":"96f74f144960dc1af4f7eda0edb955fde4a78ed5","modified":1710496324135},{"_id":"themes/bmw/source/css/github-markdown.css","hash":"0410ba978d226febee6d3236e8c5147689771299","modified":1710496324135},{"_id":"themes/bmw/source/css/highlight.css","hash":"ce8f7a91da7e2980e3778cef0bcff2a5e4b66b75","modified":1710496324135},{"_id":"themes/bmw/source/css/prism.css","hash":"a3acad3ed1d1d0a4f265d772f6cb190107d72e55","modified":1710496324135},{"_id":"themes/bmw/source/icon/demo_fontclass.html","hash":"52e0e3bb43e5fab3245cd6dbee11a2bf6fe8a46e","modified":1710496324135},{"_id":"themes/bmw/source/icon/iconfont.css","hash":"7c38a344145825ed80bc1e4da757a4733fb50652","modified":1710496324135},{"_id":"themes/bmw/source/icon/iconfont.eot","hash":"adc3cc9072b4d2f3939fb2f177ddcf7bd4ab009a","modified":1710496324135},{"_id":"themes/bmw/source/icon/iconfont.js","hash":"c5e9d861865c112c1b9971e0409503ed95c815c0","modified":1710496324135},{"_id":"themes/bmw/source/icon/iconfont.ttf","hash":"0a3b2a7882c61d6b4c85fe4e72f9f26948c6758d","modified":1710496324135},{"_id":"themes/bmw/source/icon/iconfont.svg","hash":"f169491400b047eae7108fcd600b2dae5e457ad3","modified":1710496324135},{"_id":"themes/bmw/source/icon/iconfont.woff","hash":"6dd1f927e13de5db063a4898e563a70a14e13b80","modified":1710496324135},{"_id":"themes/bmw/source/images/alipay.png","hash":"d58434f2543e983ecb2e2240d92bdc825e40fa60","modified":1710496324135},{"_id":"themes/bmw/source/images/favicon.ico","hash":"cc7c201861748e92f4809507096df74a40ef496a","modified":1710496324135},{"_id":"themes/bmw/source/images/touch-icon.png","hash":"df5a490c2e8d549ca767505fbe46eed3cbe3df43","modified":1710496324135},{"_id":"themes/bmw/source/images/wechat.png","hash":"4742a2f020b5be1d9b12681faaeace8a7c91c570","modified":1710496324135},{"_id":"themes/bmw/source/js/util.js","hash":"e934cc45e3f7e5f5be3618ba9e9a1f4637482a7b","modified":1710496324135},{"_id":"themes/bmw/source/scss/article.scss","hash":"ed53f9ee14f84c651fd6b3deb864d4362508e64a","modified":1710496324139},{"_id":"themes/bmw/source/scss/base.scss","hash":"dc8ece1d059dc3669690bfd9feda866bd590e71c","modified":1710496324139},{"_id":"themes/bmw/source/scss/mathjax.scss","hash":"1c505af96fa77d65ad5d13081c71a612e2f9587f","modified":1710496324139},{"_id":"themes/bmw/source/scss/vcomments.scss","hash":"6f0d9b22aa0988831c1700b8c5ef55bc655f4b50","modified":1710496324139},{"_id":"themes/bmw/source/stylus/highlight.styl","hash":"8061950ee824c1b91bee01bd3373d858dc9296a9","modified":1710496324139},{"_id":"themes/bmw/source/scss/layout/about.scss","hash":"b5530f7eba54053a504014e3d13d6c4fddfca65e","modified":1710496324139},{"_id":"themes/bmw/source/scss/layout/category.scss","hash":"71e35eee5232fb33b5ea40d64d2f1073db798838","modified":1710496324139},{"_id":"themes/bmw/source/scss/layout/friend.scss","hash":"d722788163872ac59bd138c5bd5ffe0ac5b75459","modified":1710496324139},{"_id":"themes/bmw/source/scss/layout/home.scss","hash":"0b3905cf565219cf970c512351c1b918ab802a02","modified":1710496324139},{"_id":"themes/bmw/source/scss/layout/index.scss","hash":"21f96d488fe8b64ff2ab016fab9e8a1c02a87d30","modified":1710496324139},{"_id":"themes/bmw/source/scss/layout/post.scss","hash":"1ed149bf23774237c90f68610336a43c190d98e2","modified":1710496324139},{"_id":"themes/bmw/source/scss/layout/tag.scss","hash":"46611ae788ed3cc5185f909864da26f012c1c978","modified":1710496324139},{"_id":"themes/bmw/source/scss/partial/footer.scss","hash":"38b7bf06a2918c3b8fff8103de202860e312ca4d","modified":1710496324139},{"_id":"themes/bmw/source/scss/partial/navigation.scss","hash":"29dafd5e8a8cfa45f7069ef40f5ef3e499b60124","modified":1710496324139},{"_id":"themes/bmw/source/scss/partial/reward.scss","hash":"32e04d72f58098affa010e59f8f1f63da06374e2","modified":1710496324139},{"_id":"themes/bmw/source/scss/partial/timeline.scss","hash":"066c1e7a8e3a956d5885c104b8236c9803123b72","modified":1710496324139},{"_id":"themes/bmw/source/js/valine.min.js","hash":"ede5d4e0bc808cc8d9852b176237dc9b951a7045","modified":1710496324139},{"_id":"public/sitemap.xml","hash":"e3983c21e57406985dcc3439c526f8d3f6eeccf0","modified":1710496331954},{"_id":"public/web-api-Geolocation_API/index.html","hash":"1c240680975b25d13d883ddc459904b32b82a5ce","modified":1710496331954},{"_id":"public/web-api-Fullscreen_API/index.html","hash":"4036233e53e3b475a3ff993a3eaa2d284ba0dde1","modified":1710496331954},{"_id":"public/web-api-File_System_API/index.html","hash":"4ada8e3935e62d09c40fbd6af15dbe58f8bdcf33","modified":1710496331954},{"_id":"public/web-api-File_API/index.html","hash":"54d6cf1019a2ba81b5a682448f0e4466077546b1","modified":1710496331954},{"_id":"public/web-api-EyeDropper_API/index.html","hash":"a8faaea754be648723652953e061f48ba3ae06fe","modified":1710496331954},{"_id":"public/web-api-Document_Picture-in-Picture_API/index.html","hash":"c2c942df52f65945a54dbbfd7cb7742851a27aa9","modified":1710496331954},{"_id":"public/web-api-Device_orientation_events/index.html","hash":"4fa6b1c85a7b6625bd50f2f7448e943b6d281ed9","modified":1710496331954},{"_id":"public/web-api-Document_Object_Model/index.html","hash":"3c16307ae0b3017ee9f313e9b71765170dccb719","modified":1710496331954},{"_id":"public/web-api-Device_Memory_API/index.html","hash":"80a7526e6935117387a67328c5ee4aa5d7839f6d","modified":1710496331954},{"_id":"public/web-api-Credential_Management_API/index.html","hash":"327d8e98cc14b7ffa17ca09a7ac42b8ac765ca39","modified":1710496331954},{"_id":"public/web-api-Cookie_Store_API/index.html","hash":"8b806e6734c03a6d204d673b12d628d35c9917f7","modified":1710496331954},{"_id":"public/web-api-Clipboard_API/index.html","hash":"5598dca405cafaf876ca28b9a145813eff0fe4cf","modified":1710496331954},{"_id":"public/web-api-CSS_Object_Model/index.html","hash":"2ed9852fdb3885add1eb5d5713585b38871ea11c","modified":1710496331954},{"_id":"public/web-api-CSS_Typed_OM_API/index.html","hash":"b3db97df636aa999411a4f3603b355b322c7aa63","modified":1710496331954},{"_id":"public/web-api-CSS_Properties_and_Values_API/index.html","hash":"ad41b3c44ffd4fd3cc58cb5bdca1279483c35635","modified":1710496331954},{"_id":"public/web-api-CSS_Font_Loading_API/index.html","hash":"305dadd531108da4a978de1dbcc0baf1a338c4d2","modified":1710496331954},{"_id":"public/web-api-CSS_Custom_Highlight_API/index.html","hash":"e191747355f6058ddbcd1c2e6e611381e46be36d","modified":1710496331954},{"_id":"public/web-api-Broadcast_Channel_API/index.html","hash":"234ff87d79bfc678e79ea8c105fbd80f9eb56c96","modified":1710496331954},{"_id":"public/web-api-Battery_Status_API/index.html","hash":"f2a7950f25a145888252a2ec8e105e264e9bca3f","modified":1710496331954},{"_id":"public/web-api-Background_Tasks_API/index.html","hash":"25e9e0335fbd5b4a7b92fc8a357cc0fa726d03d9","modified":1710496331954},{"_id":"public/web-api-Beacon_API/index.html","hash":"785f3a5a6ae2e4ebdfff8370cdf916480a7cf5fd","modified":1710496331954},{"_id":"public/web-api-Badging_API/index.html","hash":"c5320a14f29c29dde0142c6272bbfca6989e90f8","modified":1710496331954},{"_id":"public/web-api-readme/index.html","hash":"624a24a76dbcc61a3e8abf9015b75c5e9c2408cc","modified":1710496331954},{"_id":"public/snapshot-impact-on-coverage/index.html","hash":"8b3b718ca7751d02e12004d19955fc0332879623","modified":1710496331954},{"_id":"public/github-actions-sample-eslint-in-pull-request/index.html","hash":"6786e65db48b46dd33c16595dfa8bd34f0dc04ce","modified":1710496331954},{"_id":"public/react-zustand/index.html","hash":"883b442bca31c2b65c056603acc0def1f64b04bd","modified":1710496331954},{"_id":"public/changesets-in-monorepo/index.html","hash":"67893ff325c340bda2fe8902fc705018def5495c","modified":1710496331954},{"_id":"public/tsconfig-json/index.html","hash":"b0732728c68bc0241689daf62abaf622979e8769","modified":1710496331954},{"_id":"public/typescript-means/index.html","hash":"916f6879c303e628c59bc45ade6247b6e542fda4","modified":1710496331954},{"_id":"public/ast-in-css-module-auto-match/index.html","hash":"bfcfd9fb24a63145f957e7d01a6dc04b315f620d","modified":1710496331954},{"_id":"public/react-usedeferredvalue/index.html","hash":"4e0b01f17f9341c0ba1edfc606b784dd9937c703","modified":1710496331954},{"_id":"public/react-usetransition/index.html","hash":"62a14d078edf44421a620c232dbee4543458aab2","modified":1710496331954},{"_id":"public/react-performance optimization/index.html","hash":"ffe7025983d89b966b17cf1304883b2495b18f26","modified":1710496331954},{"_id":"public/es6-destructuring/index.html","hash":"824b7937ca87887421b100221883d44c2c2fd410","modified":1710496331954},{"_id":"public/es6-operator/index.html","hash":"524720478e7c4812493a4748a5f9293dc6c08ffc","modified":1710496331954},{"_id":"public/es6-symbol/index.html","hash":"2836e5c9a870482371ac07860f094ce5461e7379","modified":1710496331954},{"_id":"public/es6-set/index.html","hash":"d6d2445419101628611e6a011e4a481928b617e0","modified":1710496331954},{"_id":"public/es6-map/index.html","hash":"2f23f11412be13dffeb2942464d548e70758a7b2","modified":1710496331954},{"_id":"public/es6-proxy/index.html","hash":"83cfe34e5b5fa6f24824e40f6bd1affc3de5c969","modified":1710496331954},{"_id":"public/es6-reflect/index.html","hash":"81fab0cfdff88507fe0f1774f04fce5861dba97c","modified":1710496331954},{"_id":"public/github-actions-runs/index.html","hash":"dd230fb1c430ec3f209b4cb35fe52f12153c49ca","modified":1710496331954},{"_id":"public/github-actions-jobs/index.html","hash":"775d64cdf6060ccb75d969abade5ec4b204291cf","modified":1710496331954},{"_id":"public/github-actions-workflows/index.html","hash":"46e33c582ed0364c578bf182ebc0c40488a2c726","modified":1710496331954},{"_id":"public/github-actions-examples/index.html","hash":"39634bf779bcceec7c5acacef8786987f8df2132","modified":1710496331954},{"_id":"public/github-actions-learn/index.html","hash":"959040ee41169098728bc2c24c740c7688225759","modified":1710496331954},{"_id":"public/github-actions-quickstart/index.html","hash":"3f13a993321f4a3a1ef7fd1083990f878ef0dc2d","modified":1710496331954},{"_id":"public/github-actions-intro/index.html","hash":"8f87b2487595db1583b4d14834b6b1b6e06a5272","modified":1710496331954},{"_id":"public/write-components-elegantly-using-radix/index.html","hash":"782e787f778989e8c7db5ba01793eca546b926b0","modified":1710496331954},{"_id":"public/es6-promise/index.html","hash":"714618d136ebe12b869e1ab6001474eb2eeaf031","modified":1710496331954},{"_id":"public/what-is-es6/index.html","hash":"30af791fcb5019019245667d6963aaca32206a09","modified":1710496331954},{"_id":"public/archives/index.html","hash":"1968ccbeacfb3271f70df38d147ab46b03237f27","modified":1710496331954},{"_id":"public/archives/page/2/index.html","hash":"85f54fd2762e2c3954907fcbcceac03068c8b743","modified":1710496331954},{"_id":"public/archives/page/3/index.html","hash":"1b94c05e84199dab67ddb3d4c1402214da7e1e7a","modified":1710496331954},{"_id":"public/archives/page/4/index.html","hash":"8fa9b83e464f9513c0deafbeae2d143cb0cecb99","modified":1710496331954},{"_id":"public/archives/page/5/index.html","hash":"c340b9e994657094bdf4978ca9bad2d797ae7ca6","modified":1710496331954},{"_id":"public/archives/2023/index.html","hash":"7fffc239d5deac7a86e1a03f0590118c6a043915","modified":1710496331954},{"_id":"public/archives/2023/page/2/index.html","hash":"8cfe975e706af4fef167b231e3d062283ba7d085","modified":1710496331954},{"_id":"public/archives/2023/page/3/index.html","hash":"bbb64357a7fe8e8610124897678d72efd2f2ca2a","modified":1710496331954},{"_id":"public/archives/2023/07/index.html","hash":"60729593fb5c7feda36e855edfdee5df8980c7b3","modified":1710496331954},{"_id":"public/archives/2023/07/page/2/index.html","hash":"234ab3fa573289d347de2867bd9d462324916862","modified":1710496331954},{"_id":"public/archives/2023/07/page/3/index.html","hash":"10dc4370250e90190a785c539f0b94decbf2f9c3","modified":1710496331954},{"_id":"public/archives/2023/08/index.html","hash":"c92806358ae372fd16585032f4503aed2280b1ae","modified":1710496331954},{"_id":"public/archives/2023/09/index.html","hash":"07116fe6d285b66e40f4fe2c78a6d93f6b1ad7cf","modified":1710496331954},{"_id":"public/archives/2023/12/index.html","hash":"fd3ba00236b24b007e1d4d37513cf510f528939c","modified":1710496331954},{"_id":"public/archives/2024/index.html","hash":"bfe6cc3be6594756e4ecb43c1732449eee470a8b","modified":1710496331954},{"_id":"public/archives/2024/page/2/index.html","hash":"2140221bcdcca313f5ef4eb6741cd5d690346a85","modified":1710496331954},{"_id":"public/archives/2024/page/3/index.html","hash":"aec4b4ca029d4493ff6f2aaee4c34d3891466b88","modified":1710496331954},{"_id":"public/archives/2024/01/index.html","hash":"4e4057de4704d68f782a39c6a63b118ba755cde7","modified":1710496331954},{"_id":"public/archives/2024/02/index.html","hash":"92e35457d9234d08322d751121907f7241d6ffad","modified":1710496331954},{"_id":"public/archives/2024/03/index.html","hash":"a53dc5b9767fda155be737eefbe6ec07950f81b1","modified":1710496331954},{"_id":"public/archives/2024/03/page/2/index.html","hash":"3c7ebed90862c10c74b6ad7fe027ab99abb5625e","modified":1710496331954},{"_id":"public/categories/JavaScript/index.html","hash":"88aaa0d44421ff7cd06762a0ddd1867f8523db71","modified":1710496331954},{"_id":"public/categories/JavaScript/page/2/index.html","hash":"2a5d7743b2dc116e9e00c2e9888258f44d984f53","modified":1710496331954},{"_id":"public/categories/JavaScript/page/3/index.html","hash":"44d85e19e335fb69f17a983d63418461cc6123c1","modified":1710496331954},{"_id":"public/categories/工程化/index.html","hash":"f79a45a12a61522958b894f1a806d03d92f02327","modified":1710496331954},{"_id":"public/categories/工程化/page/2/index.html","hash":"8529b691041d0ec7976bd8f54e2a7063eaf3a701","modified":1710496331954},{"_id":"public/categories/React/index.html","hash":"bee1300213b423c763f587aa18e443051ee72dd2","modified":1710496331954},{"_id":"public/categories/TypeScript/index.html","hash":"04c8c07f87aa770fe7c2a54f57b218bec735baf2","modified":1710496331954},{"_id":"public/categories/Web-API/index.html","hash":"f048bb963f51b59a87d55b880b270a35a6ac70de","modified":1710496331954},{"_id":"public/index.html","hash":"817584fb5e68c006104c28de9fcc09964c95de16","modified":1710496331954},{"_id":"public/page/2/index.html","hash":"2295ced04e71c8ac42bdc709b3fb6540fee4b570","modified":1710496331954},{"_id":"public/page/3/index.html","hash":"c03d4001403b451e5672e0c7c41994c0ec63596f","modified":1710496331954},{"_id":"public/page/4/index.html","hash":"f2904d8d29d0fa83104b63ae09f2df40dfa4e7ad","modified":1710496331954},{"_id":"public/page/5/index.html","hash":"69fa3b27e8995375f7669e34f160d0d309e38298","modified":1710496331954},{"_id":"public/tags/ast/index.html","hash":"f877fbfc68535dd9ecc32eb00ce92030b0b41927","modified":1710496331954},{"_id":"public/tags/css-module/index.html","hash":"655fb4edfb699f61400683069a8fbbfd1281841c","modified":1710496331954},{"_id":"public/tags/changesets/index.html","hash":"7128db32fc09dd4c4448f06cb9a1e9b5620808eb","modified":1710496331954},{"_id":"public/tags/es6/index.html","hash":"993eac64fb2d9f476c5506e4e9656eaa893cfe82","modified":1710496331954},{"_id":"public/tags/javascript/index.html","hash":"85eae5dfd0459adca55e324a81d3398e8a49c66d","modified":1710496331954},{"_id":"public/tags/github-actions/index.html","hash":"790c60051871a4d3106e534a8218f96982ca87c3","modified":1710496331954},{"_id":"public/tags/react/index.html","hash":"454b4b6086db82f5199ec89bf804c8561aa8f5dc","modified":1710496331954},{"_id":"public/tags/zustand/index.html","hash":"f754f2d6a1fe11cf8f49cbbd0de9db8cf1d6245b","modified":1710496331954},{"_id":"public/tags/react-store/index.html","hash":"51b2d01c005c9960c1c678d901d9594141843186","modified":1710496331954},{"_id":"public/tags/jest/index.html","hash":"4a10633b5efd3553dd5e898dc1794b77e88c33e1","modified":1710496331954},{"_id":"public/tags/typescript/index.html","hash":"6bdbaf3e31eb40b5b119db59f7555435df359d08","modified":1710496331954},{"_id":"public/tags/webapi/index.html","hash":"4f3ff364f7ab247fe1087608a433324451e3ab6c","modified":1710496331954},{"_id":"public/tags/webapi/page/2/index.html","hash":"91e75f9e2a685d343b2bb100d571f29150673620","modified":1710496331954},{"_id":"public/tags/webapi/page/3/index.html","hash":"037a2c603346459ed4143b7e7fd3f55cafdbd2c7","modified":1710496331954},{"_id":"public/tags/Background-Tasks/index.html","hash":"ff225c860e3d522b13dd4ec274d4e15dae448b70","modified":1710496331954},{"_id":"public/tags/Badging/index.html","hash":"fe5b600d91f1dc9b393c1e337264fad0f41b6acc","modified":1710496331954},{"_id":"public/tags/Battery-Status/index.html","hash":"d9460ae5a9d771e7ce795f561fedfe34a70c8ffe","modified":1710496331954},{"_id":"public/tags/Beacon/index.html","hash":"61a9c8785cb53057a5666048dd491cea8dbfae3c","modified":1710496331954},{"_id":"public/tags/Broadcast-Channel/index.html","hash":"041325362eaf16dc3e7816761b1b96b18ad073e7","modified":1710496331954},{"_id":"public/tags/CSS-Custom-Highlight/index.html","hash":"86548c16a5d29a015ba229eddaf855f9206c79a5","modified":1710496331954},{"_id":"public/tags/CSS-Font-Loading/index.html","hash":"36a474c9779da2b21555a34e96a20d82dc4dfe27","modified":1710496331954},{"_id":"public/tags/CSSOM/index.html","hash":"c22b3060977eba45a51ae7bcdcb16cc0a7d066be","modified":1710496331954},{"_id":"public/tags/CSS-Properties-and-Values/index.html","hash":"830216d994c58aa14839e8ee7bd6b215931402d1","modified":1710496331954},{"_id":"public/tags/CSS-Typed-OM/index.html","hash":"a9a8b2dd4c9bb327e6402dfaf91a2a465a2c199d","modified":1710496331954},{"_id":"public/tags/Clipboard/index.html","hash":"c94c615b3402291fb6c108a84fe930953e9015f7","modified":1710496331954},{"_id":"public/tags/CookieStore/index.html","hash":"b3ad027a76e396feddef7b614f25a027ea3a8d4e","modified":1710496331954},{"_id":"public/tags/Credential-Management/index.html","hash":"166c55809ce55db272fc5cf548241a6945326b06","modified":1710496331954},{"_id":"public/tags/Device-Memory/index.html","hash":"33fd1224a1c1fc07745813fe11a05c4a4edcb54a","modified":1710496331954},{"_id":"public/tags/Device-Orientation/index.html","hash":"58aae53bbfc4adbbf5a3f0e1048e0e789697ecb7","modified":1710496331954},{"_id":"public/tags/DOM/index.html","hash":"195a6f9160cc838df1932813077359f5e0c74ee6","modified":1710496331954},{"_id":"public/tags/EyeDropper/index.html","hash":"577dfcc1e412d3cb9939487b6d131ec0a612c3c0","modified":1710496331954},{"_id":"public/tags/Document-Picture-in-Picture/index.html","hash":"4b2bb8eebc9c76bdc9de0cc52159e7b307f01bda","modified":1710496331954},{"_id":"public/tags/File/index.html","hash":"9413979bb641da6d346ba10b440596ca5a17b443","modified":1710496331954},{"_id":"public/tags/Fullscreen/index.html","hash":"050bc3be7b0b267498037dcedf52ee1ba7fb0498","modified":1710496331954},{"_id":"public/tags/File-System/index.html","hash":"421c2733c9a2036492736c5bf3f010f411d0aa91","modified":1710496331954},{"_id":"public/tags/Geolocation/index.html","hash":"47e36634d365aa1f726220b586e6b666014daac9","modified":1710496331954},{"_id":"public/tags/radix/index.html","hash":"771c4fcbd7951099245bef4e99216ff9d904ea14","modified":1710496331954},{"_id":"public/scss/animation.scss","hash":"da39a3ee5e6b4b0d3255bfef95601890afd80709","modified":1710496331954},{"_id":"public/css/base.css.map","hash":"96f74f144960dc1af4f7eda0edb955fde4a78ed5","modified":1710496331954},{"_id":"public/icon/iconfont.eot","hash":"adc3cc9072b4d2f3939fb2f177ddcf7bd4ab009a","modified":1710496331954},{"_id":"public/icon/iconfont.svg","hash":"f169491400b047eae7108fcd600b2dae5e457ad3","modified":1710496331954},{"_id":"public/icon/iconfont.ttf","hash":"0a3b2a7882c61d6b4c85fe4e72f9f26948c6758d","modified":1710496331954},{"_id":"public/icon/iconfont.woff","hash":"6dd1f927e13de5db063a4898e563a70a14e13b80","modified":1710496331954},{"_id":"public/images/alipay.png","hash":"d58434f2543e983ecb2e2240d92bdc825e40fa60","modified":1710496331954},{"_id":"public/images/favicon.ico","hash":"cc7c201861748e92f4809507096df74a40ef496a","modified":1710496331954},{"_id":"public/images/touch-icon.png","hash":"df5a490c2e8d549ca767505fbe46eed3cbe3df43","modified":1710496331954},{"_id":"public/images/wechat.png","hash":"4742a2f020b5be1d9b12681faaeace8a7c91c570","modified":1710496331954},{"_id":"public/scss/article.scss","hash":"ed53f9ee14f84c651fd6b3deb864d4362508e64a","modified":1710496331954},{"_id":"public/scss/base.scss","hash":"dc8ece1d059dc3669690bfd9feda866bd590e71c","modified":1710496331954},{"_id":"public/scss/mathjax.scss","hash":"1c505af96fa77d65ad5d13081c71a612e2f9587f","modified":1710496331954},{"_id":"public/scss/vcomments.scss","hash":"6f0d9b22aa0988831c1700b8c5ef55bc655f4b50","modified":1710496331954},{"_id":"public/scss/layout/about.scss","hash":"b5530f7eba54053a504014e3d13d6c4fddfca65e","modified":1710496331954},{"_id":"public/scss/layout/category.scss","hash":"71e35eee5232fb33b5ea40d64d2f1073db798838","modified":1710496331954},{"_id":"public/scss/layout/friend.scss","hash":"d722788163872ac59bd138c5bd5ffe0ac5b75459","modified":1710496331954},{"_id":"public/scss/layout/home.scss","hash":"0b3905cf565219cf970c512351c1b918ab802a02","modified":1710496331954},{"_id":"public/scss/layout/index.scss","hash":"21f96d488fe8b64ff2ab016fab9e8a1c02a87d30","modified":1710496331954},{"_id":"public/scss/layout/post.scss","hash":"1ed149bf23774237c90f68610336a43c190d98e2","modified":1710496331954},{"_id":"public/scss/layout/tag.scss","hash":"46611ae788ed3cc5185f909864da26f012c1c978","modified":1710496331954},{"_id":"public/scss/partial/footer.scss","hash":"38b7bf06a2918c3b8fff8103de202860e312ca4d","modified":1710496331954},{"_id":"public/scss/partial/navigation.scss","hash":"29dafd5e8a8cfa45f7069ef40f5ef3e499b60124","modified":1710496331954},{"_id":"public/scss/partial/reward.scss","hash":"32e04d72f58098affa010e59f8f1f63da06374e2","modified":1710496331954},{"_id":"public/scss/partial/timeline.scss","hash":"066c1e7a8e3a956d5885c104b8236c9803123b72","modified":1710496331954},{"_id":"public/css/base.css","hash":"dc44d009646091562cda4fc5b6cb6912779be6a7","modified":1710496331954},{"_id":"public/css/github-markdown.css","hash":"0410ba978d226febee6d3236e8c5147689771299","modified":1710496331954},{"_id":"public/css/prism.css","hash":"a3acad3ed1d1d0a4f265d772f6cb190107d72e55","modified":1710496331954},{"_id":"public/css/highlight.css","hash":"ce8f7a91da7e2980e3778cef0bcff2a5e4b66b75","modified":1710496331954},{"_id":"public/icon/demo_fontclass.html","hash":"52e0e3bb43e5fab3245cd6dbee11a2bf6fe8a46e","modified":1710496331954},{"_id":"public/icon/iconfont.css","hash":"7c38a344145825ed80bc1e4da757a4733fb50652","modified":1710496331954},{"_id":"public/icon/iconfont.js","hash":"c5e9d861865c112c1b9971e0409503ed95c815c0","modified":1710496331954},{"_id":"public/js/util.js","hash":"e934cc45e3f7e5f5be3618ba9e9a1f4637482a7b","modified":1710496331954},{"_id":"public/js/valine.min.js","hash":"ede5d4e0bc808cc8d9852b176237dc9b951a7045","modified":1710496331954},{"_id":"public/stylus/highlight.css","hash":"2f39e0fcb3bf8124045ef6fa5f7aec2575a968fc","modified":1710496331954}],"Category":[{"name":"JavaScript","_id":"cltshcosb0004hdom7del6smu"},{"name":"工程化","_id":"cltshcosd0008hdom1jeq7rqq"},{"name":"React","_id":"cltshcosr001hhdom68hf3m88"},{"name":"TypeScript","_id":"cltshcosx0023hdomehcm5dbk"},{"name":"Web API","_id":"cltshcotb003bhdomc7ry8b1a"}],"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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcos40000hdom1hgl40fa","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcos80001hdom7eb46n4d","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosb0003hdom7vnu1ne8","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosc0005hdom97rp1lt1","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosd0006hdom3mk7hpto","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcose0009hdom6koo0p1v","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosf000ahdom7r1z75gj","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosg000dhdom7csrhxai","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosh000ghdomg1xb7pex","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosj000khdomcks6gtjd","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosj000nhdom8r5098fi","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosk000qhdom8gvma8iw","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosl000shdom25pdd9sx","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosm000uhdomf8mwb3k3","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosn000yhdom3vhc694f","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosn0011hdom6jwsgglv","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":"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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcoso0014hdomb59s20b0","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":"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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosp0016hdomc4mg9w9e","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":"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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosq001ahdom4zm02fvc","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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosq001dhdom7298e1tu","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公共状态利器 - 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-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosr001ghdom1idp1lfl","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":"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-15T09:52:04.131Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcoss001jhdombp980f0t","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":"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-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcost001nhdomg49k27va","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-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosu001rhdomguweac1k","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-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosu001uhdome8xx54on","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-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosv001xhdom6hlu9yps","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 - 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-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosw0021hdom1zkv1uo5","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 - 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-api/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-api/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-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosx0025hdom5hjj5mzn","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-api/Battery_Status_API/index.html\">https://taoliujun.github.io/example/web-api/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-api/Battery_Status_API/index.html\">https://taoliujun.github.io/example/web-api/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 - 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-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosy0028hdomdxm8gksu","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-api/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-api/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-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcosz002bhdomgwcx2qzq","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-api/Broadcast_Channel_API/index.html\">https://taoliujun.github.io/example/web-api/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-api/Broadcast_Channel_API/index.html\">https://taoliujun.github.io/example/web-api/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 - CSS Custom Highlight","date":"2024-03-04T18:55:53.000Z","url":"web-api-CSS_Custom_Highlight_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/63](https://github.com/taoliujun/blog/issues/63)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Custom_Highlight_API\ntags:\n  - webapi\n  - CSS Custom Highlight\n---\n\n-->\n\n# CSS Custom Highlight\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API\n\n**CSS Custom Highlight**为页面上的[Range](https://developer.mozilla.org/en-US/docs/Web/API/Range)对象，创建高亮标识，并结合css伪元素`::highlight`自定义显示。\n\n使用场景有*搜索词高亮*、*多人协作时的文本多色高亮*等。\n\n## 接口\n\n### Highlight\n\n创建高亮对象，并包含若干`Range`对象。例如：\n\n```javascript\nconst user1Highlight = new Highlight(range1, range2);\n```\n\n### HighlightRegistry\n\n为高亮对象注册css标识，即可在css中访问。例如：\n\n```javascript\n// javascript\nCSS.highlights.set('user-1-highlight', user1Highlight);\n```\n\n```css\n// css\n::highlight(user-1-highlight) {\n    background-color: yellow;\n    color: black;\n}\n```\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Custom_Highlight_API/index.html\n\n1. 为`Range`区域设置了特殊的样式。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/3362d87f-c006-42b3-8d71-0949e65b7080)\n\n\n\n\n","source":"_posts/web-api-CSS_Custom_Highlight_API.md","raw":"---\ntitle: \"Web API - CSS Custom Highlight\"\ndate: \"2024-03-05T02:55:53Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-CSS_Custom_Highlight_API\ntags:\n  - webapi\n  - CSS Custom Highlight\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/63](https://github.com/taoliujun/blog/issues/63)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Custom_Highlight_API\ntags:\n  - webapi\n  - CSS Custom Highlight\n---\n\n-->\n\n# CSS Custom Highlight\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API\n\n**CSS Custom Highlight**为页面上的[Range](https://developer.mozilla.org/en-US/docs/Web/API/Range)对象，创建高亮标识，并结合css伪元素`::highlight`自定义显示。\n\n使用场景有*搜索词高亮*、*多人协作时的文本多色高亮*等。\n\n## 接口\n\n### Highlight\n\n创建高亮对象，并包含若干`Range`对象。例如：\n\n```javascript\nconst user1Highlight = new Highlight(range1, range2);\n```\n\n### HighlightRegistry\n\n为高亮对象注册css标识，即可在css中访问。例如：\n\n```javascript\n// javascript\nCSS.highlights.set('user-1-highlight', user1Highlight);\n```\n\n```css\n// css\n::highlight(user-1-highlight) {\n    background-color: yellow;\n    color: black;\n}\n```\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Custom_Highlight_API/index.html\n\n1. 为`Range`区域设置了特殊的样式。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/3362d87f-c006-42b3-8d71-0949e65b7080)\n\n\n\n\n","slug":"web-api-CSS_Custom_Highlight_API","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcot0002fhdom5pcq17h7","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/63\">https://github.com/taoliujun/blog/issues/63</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Custom_Highlight_API\ntags:\n  - webapi\n  - CSS Custom Highlight\n---\n\n-->\n\n<h1 id=\"CSS-Custom-Highlight\"><a href=\"#CSS-Custom-Highlight\" class=\"headerlink\" title=\"CSS Custom Highlight\"></a>CSS Custom Highlight</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API</a></p>\n</blockquote>\n<p><strong>CSS Custom Highlight</strong>为页面上的<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Range\">Range</a>对象，创建高亮标识，并结合css伪元素<code>::highlight</code>自定义显示。</p>\n<p>使用场景有<em>搜索词高亮</em>、<em>多人协作时的文本多色高亮</em>等。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Highlight\"><a href=\"#Highlight\" class=\"headerlink\" title=\"Highlight\"></a>Highlight</h3><p>创建高亮对象，并包含若干<code>Range</code>对象。例如：</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\"><span class=\"keyword\">const</span> user1Highlight = <span class=\"keyword\">new</span> <span class=\"title class_\">Highlight</span>(range1, range2);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"HighlightRegistry\"><a href=\"#HighlightRegistry\" class=\"headerlink\" title=\"HighlightRegistry\"></a>HighlightRegistry</h3><p>为高亮对象注册css标识，即可在css中访问。例如：</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=\"comment\">// javascript</span></span><br><span class=\"line\"><span class=\"variable constant_\">CSS</span>.<span class=\"property\">highlights</span>.<span class=\"title function_\">set</span>(<span class=\"string\">&#x27;user-1-highlight&#x27;</span>, user1Highlight);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">// css</span><br><span class=\"line\">::<span class=\"built_in\">highlight</span>(user-<span class=\"number\">1</span>-highlight) &#123;</span><br><span class=\"line\">    <span class=\"attribute\">background-color</span>: yellow;</span><br><span class=\"line\">    <span class=\"attribute\">color</span>: black;</span><br><span class=\"line\">&#125;</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/CSS_Custom_Highlight_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Custom_Highlight_API/index.html</a></p>\n<ol>\n<li>为<code>Range</code>区域设置了特殊的样式。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/3362d87f-c006-42b3-8d71-0949e65b7080\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/63\">https://github.com/taoliujun/blog/issues/63</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Custom_Highlight_API\ntags:\n  - webapi\n  - CSS Custom Highlight\n---\n\n-->\n\n<h1 id=\"CSS-Custom-Highlight\"><a href=\"#CSS-Custom-Highlight\" class=\"headerlink\" title=\"CSS Custom Highlight\"></a>CSS Custom Highlight</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API</a></p>\n</blockquote>\n<p><strong>CSS Custom Highlight</strong>为页面上的<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Range\">Range</a>对象，创建高亮标识，并结合css伪元素<code>::highlight</code>自定义显示。</p>\n<p>使用场景有<em>搜索词高亮</em>、<em>多人协作时的文本多色高亮</em>等。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Highlight\"><a href=\"#Highlight\" class=\"headerlink\" title=\"Highlight\"></a>Highlight</h3><p>创建高亮对象，并包含若干<code>Range</code>对象。例如：</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\"><span class=\"keyword\">const</span> user1Highlight = <span class=\"keyword\">new</span> <span class=\"title class_\">Highlight</span>(range1, range2);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"HighlightRegistry\"><a href=\"#HighlightRegistry\" class=\"headerlink\" title=\"HighlightRegistry\"></a>HighlightRegistry</h3><p>为高亮对象注册css标识，即可在css中访问。例如：</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=\"comment\">// javascript</span></span><br><span class=\"line\"><span class=\"variable constant_\">CSS</span>.<span class=\"property\">highlights</span>.<span class=\"title function_\">set</span>(<span class=\"string\">&#x27;user-1-highlight&#x27;</span>, user1Highlight);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">// css</span><br><span class=\"line\">::<span class=\"built_in\">highlight</span>(user-<span class=\"number\">1</span>-highlight) &#123;</span><br><span class=\"line\">    <span class=\"attribute\">background-color</span>: yellow;</span><br><span class=\"line\">    <span class=\"attribute\">color</span>: black;</span><br><span class=\"line\">&#125;</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/CSS_Custom_Highlight_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Custom_Highlight_API/index.html</a></p>\n<ol>\n<li>为<code>Range</code>区域设置了特殊的样式。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/3362d87f-c006-42b3-8d71-0949e65b7080\" alt=\"image\"></p>\n"},{"title":"Web API - CSS Font Loading","date":"2024-03-04T20:06:50.000Z","url":"web-api-CSS_Font_Loading_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/65](https://github.com/taoliujun/blog/issues/65)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Font_Loading_API\ntags:\n  - webapi\n  - CSS Font Loading\n---\n\n-->\n\n# CSS Font Loading\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API\n\n**CSS Font Loading**和css的`@font-face`所作功能一致，在javascript中加载字体可以更精确控制其加载状态，并用在canvas等场景中。\n\n## 接口\n\n### FontFace\n\n创建字体对象。\n\n```javascript\nconst font1 = new FontFace(\n    'f1',\n    `url(https://fonts.gstatic.com/s/kodemono/v1/A2BYn5pb0QgtVEPFnlYOnYLweZGZuA.woff2) format('woff2')`,\n    {\n      weight: '800'\n    }\n);\nfont1.load();\ndocument.fonts.add(font1);\n```\n\n> 第三个参数描述符和css `@font-face`的属性`font-style`等是一样的作用，用于精确匹配字体源的。\n\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Font_Loading_API/index.html\n\n1. 加载字体，在dom中自动生效，以及在canvas中作图。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/dee25ceb-9ddb-4cf8-9f7f-93382d3211b2)\n\n\n\n\n","source":"_posts/web-api-CSS_Font_Loading_API.md","raw":"---\ntitle: \"Web API - CSS Font Loading\"\ndate: \"2024-03-05T04:06:50Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-CSS_Font_Loading_API\ntags:\n  - webapi\n  - CSS Font Loading\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/65](https://github.com/taoliujun/blog/issues/65)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Font_Loading_API\ntags:\n  - webapi\n  - CSS Font Loading\n---\n\n-->\n\n# CSS Font Loading\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API\n\n**CSS Font Loading**和css的`@font-face`所作功能一致，在javascript中加载字体可以更精确控制其加载状态，并用在canvas等场景中。\n\n## 接口\n\n### FontFace\n\n创建字体对象。\n\n```javascript\nconst font1 = new FontFace(\n    'f1',\n    `url(https://fonts.gstatic.com/s/kodemono/v1/A2BYn5pb0QgtVEPFnlYOnYLweZGZuA.woff2) format('woff2')`,\n    {\n      weight: '800'\n    }\n);\nfont1.load();\ndocument.fonts.add(font1);\n```\n\n> 第三个参数描述符和css `@font-face`的属性`font-style`等是一样的作用，用于精确匹配字体源的。\n\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Font_Loading_API/index.html\n\n1. 加载字体，在dom中自动生效，以及在canvas中作图。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/dee25ceb-9ddb-4cf8-9f7f-93382d3211b2)\n\n\n\n\n","slug":"web-api-CSS_Font_Loading_API","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcot1002ihdom290mcld7","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/65\">https://github.com/taoliujun/blog/issues/65</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Font_Loading_API\ntags:\n  - webapi\n  - CSS Font Loading\n---\n\n-->\n\n<h1 id=\"CSS-Font-Loading\"><a href=\"#CSS-Font-Loading\" class=\"headerlink\" title=\"CSS Font Loading\"></a>CSS Font Loading</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API</a></p>\n</blockquote>\n<p><strong>CSS Font Loading</strong>和css的<code>@font-face</code>所作功能一致，在javascript中加载字体可以更精确控制其加载状态，并用在canvas等场景中。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"FontFace\"><a href=\"#FontFace\" class=\"headerlink\" title=\"FontFace\"></a>FontFace</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><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> font1 = <span class=\"keyword\">new</span> <span class=\"title class_\">FontFace</span>(</span><br><span class=\"line\">    <span class=\"string\">&#x27;f1&#x27;</span>,</span><br><span class=\"line\">    <span class=\"string\">`url(https://fonts.gstatic.com/s/kodemono/v1/A2BYn5pb0QgtVEPFnlYOnYLweZGZuA.woff2) format(&#x27;woff2&#x27;)`</span>,</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">weight</span>: <span class=\"string\">&#x27;800&#x27;</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">);</span><br><span class=\"line\">font1.<span class=\"title function_\">load</span>();</span><br><span class=\"line\"><span class=\"variable language_\">document</span>.<span class=\"property\">fonts</span>.<span class=\"title function_\">add</span>(font1);</span><br></pre></td></tr></table></figure>\n\n<blockquote>\n<p>第三个参数描述符和css <code>@font-face</code>的属性<code>font-style</code>等是一样的作用，用于精确匹配字体源的。</p>\n</blockquote>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/CSS_Font_Loading_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Font_Loading_API/index.html</a></p>\n<ol>\n<li>加载字体，在dom中自动生效，以及在canvas中作图。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/dee25ceb-9ddb-4cf8-9f7f-93382d3211b2\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/65\">https://github.com/taoliujun/blog/issues/65</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Font_Loading_API\ntags:\n  - webapi\n  - CSS Font Loading\n---\n\n-->\n\n<h1 id=\"CSS-Font-Loading\"><a href=\"#CSS-Font-Loading\" class=\"headerlink\" title=\"CSS Font Loading\"></a>CSS Font Loading</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API</a></p>\n</blockquote>\n<p><strong>CSS Font Loading</strong>和css的<code>@font-face</code>所作功能一致，在javascript中加载字体可以更精确控制其加载状态，并用在canvas等场景中。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"FontFace\"><a href=\"#FontFace\" class=\"headerlink\" title=\"FontFace\"></a>FontFace</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><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> font1 = <span class=\"keyword\">new</span> <span class=\"title class_\">FontFace</span>(</span><br><span class=\"line\">    <span class=\"string\">&#x27;f1&#x27;</span>,</span><br><span class=\"line\">    <span class=\"string\">`url(https://fonts.gstatic.com/s/kodemono/v1/A2BYn5pb0QgtVEPFnlYOnYLweZGZuA.woff2) format(&#x27;woff2&#x27;)`</span>,</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">weight</span>: <span class=\"string\">&#x27;800&#x27;</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">);</span><br><span class=\"line\">font1.<span class=\"title function_\">load</span>();</span><br><span class=\"line\"><span class=\"variable language_\">document</span>.<span class=\"property\">fonts</span>.<span class=\"title function_\">add</span>(font1);</span><br></pre></td></tr></table></figure>\n\n<blockquote>\n<p>第三个参数描述符和css <code>@font-face</code>的属性<code>font-style</code>等是一样的作用，用于精确匹配字体源的。</p>\n</blockquote>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/CSS_Font_Loading_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Font_Loading_API/index.html</a></p>\n<ol>\n<li>加载字体，在dom中自动生效，以及在canvas中作图。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/dee25ceb-9ddb-4cf8-9f7f-93382d3211b2\" alt=\"image\"></p>\n"},{"title":"Web API - CSSOM (CSS_Object_Model)","date":"2024-03-06T23:45:28.000Z","url":"web-api-CSS_Object_Model","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/71](https://github.com/taoliujun/blog/issues/71)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Object_Model\ntags:\n  - webapi\n  - CSSOM\n---\n\n-->\n\n# CSSOM\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model\n\n**CSSOM**全称`CSS Object Model`，它是CSS相关管理接口、事件的合集，例如：\n\n-   CSS单条规则的接口`CSSRule`。\n-   提供高亮方法`registerProperty`的`CSS`接口。\n-   `window.screen`返回的`Screen`接口。\n-   `addEventListener(\"animationend\")`事件处理。\n\n> 类似DOM，也是一系列接口的合集。\n\n这里不一一说明，需要实践具体接口。\n\n\n\n\n","source":"_posts/web-api-CSS_Object_Model.md","raw":"---\ntitle: \"Web API - CSSOM (CSS_Object_Model)\"\ndate: \"2024-03-07T07:45:28Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-CSS_Object_Model\ntags:\n  - webapi\n  - CSSOM\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/71](https://github.com/taoliujun/blog/issues/71)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Object_Model\ntags:\n  - webapi\n  - CSSOM\n---\n\n-->\n\n# CSSOM\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model\n\n**CSSOM**全称`CSS Object Model`，它是CSS相关管理接口、事件的合集，例如：\n\n-   CSS单条规则的接口`CSSRule`。\n-   提供高亮方法`registerProperty`的`CSS`接口。\n-   `window.screen`返回的`Screen`接口。\n-   `addEventListener(\"animationend\")`事件处理。\n\n> 类似DOM，也是一系列接口的合集。\n\n这里不一一说明，需要实践具体接口。\n\n\n\n\n","slug":"web-api-CSS_Object_Model","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcot4002lhdom2mg8ajc0","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/71\">https://github.com/taoliujun/blog/issues/71</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Object_Model\ntags:\n  - webapi\n  - CSSOM\n---\n\n-->\n\n<h1 id=\"CSSOM\"><a href=\"#CSSOM\" class=\"headerlink\" title=\"CSSOM\"></a>CSSOM</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model</a></p>\n</blockquote>\n<p><strong>CSSOM</strong>全称<code>CSS Object Model</code>，它是CSS相关管理接口、事件的合集，例如：</p>\n<ul>\n<li>CSS单条规则的接口<code>CSSRule</code>。</li>\n<li>提供高亮方法<code>registerProperty</code>的<code>CSS</code>接口。</li>\n<li><code>window.screen</code>返回的<code>Screen</code>接口。</li>\n<li><code>addEventListener(&quot;animationend&quot;)</code>事件处理。</li>\n</ul>\n<blockquote>\n<p>类似DOM，也是一系列接口的合集。</p>\n</blockquote>\n<p>这里不一一说明，需要实践具体接口。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/71\">https://github.com/taoliujun/blog/issues/71</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Object_Model\ntags:\n  - webapi\n  - CSSOM\n---\n\n-->\n\n<h1 id=\"CSSOM\"><a href=\"#CSSOM\" class=\"headerlink\" title=\"CSSOM\"></a>CSSOM</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model</a></p>\n</blockquote>\n<p><strong>CSSOM</strong>全称<code>CSS Object Model</code>，它是CSS相关管理接口、事件的合集，例如：</p>\n<ul>\n<li>CSS单条规则的接口<code>CSSRule</code>。</li>\n<li>提供高亮方法<code>registerProperty</code>的<code>CSS</code>接口。</li>\n<li><code>window.screen</code>返回的<code>Screen</code>接口。</li>\n<li><code>addEventListener(&quot;animationend&quot;)</code>事件处理。</li>\n</ul>\n<blockquote>\n<p>类似DOM，也是一系列接口的合集。</p>\n</blockquote>\n<p>这里不一一说明，需要实践具体接口。</p>\n"},{"title":"Web API - CSS Properties and Values","date":"2024-03-05T02:04:49.000Z","url":"web-api-CSS_Properties_and_Values_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/67](https://github.com/taoliujun/blog/issues/67)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Properties_and_Values_API\ntags:\n  - webapi\n  - CSS Properties and Values\n---\n\n-->\n\n# CSS Properties and Values\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API\n\n**CSS Properties and Values**用于为CSS扩展属性，\n\n> 和`CSS variables`有类似点，但后者只是一个变量，没有CSS属性之特性：比如继承特性。\n\n## 接口\n\n### CSSPropertyRule\n\n属性和值的定义描述。\n\n> syntax选项标识了值的预期语法，如`<color>`。\n\n## 方法\n\n### registerProperty\n\n创建自定义css属性。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Properties_and_Values_API/index.html\n\n1. 两个Div使用了一样的样式，但`registerProperty`注册了**非继承**的属性，所以`.parent1 .item1`并未继承`.parent1`中设置的属性值，而使用了默认值。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9caf3326-17d2-4390-8484-5ec5e2ea835e)\n\n\n\n\n","source":"_posts/web-api-CSS_Properties_and_Values_API.md","raw":"---\ntitle: \"Web API - CSS Properties and Values\"\ndate: \"2024-03-05T10:04:49Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-CSS_Properties_and_Values_API\ntags:\n  - webapi\n  - CSS Properties and Values\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/67](https://github.com/taoliujun/blog/issues/67)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Properties_and_Values_API\ntags:\n  - webapi\n  - CSS Properties and Values\n---\n\n-->\n\n# CSS Properties and Values\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API\n\n**CSS Properties and Values**用于为CSS扩展属性，\n\n> 和`CSS variables`有类似点，但后者只是一个变量，没有CSS属性之特性：比如继承特性。\n\n## 接口\n\n### CSSPropertyRule\n\n属性和值的定义描述。\n\n> syntax选项标识了值的预期语法，如`<color>`。\n\n## 方法\n\n### registerProperty\n\n创建自定义css属性。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Properties_and_Values_API/index.html\n\n1. 两个Div使用了一样的样式，但`registerProperty`注册了**非继承**的属性，所以`.parent1 .item1`并未继承`.parent1`中设置的属性值，而使用了默认值。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9caf3326-17d2-4390-8484-5ec5e2ea835e)\n\n\n\n\n","slug":"web-api-CSS_Properties_and_Values_API","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcot5002nhdom9iqg9cqv","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/67\">https://github.com/taoliujun/blog/issues/67</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Properties_and_Values_API\ntags:\n  - webapi\n  - CSS Properties and Values\n---\n\n-->\n\n<h1 id=\"CSS-Properties-and-Values\"><a href=\"#CSS-Properties-and-Values\" class=\"headerlink\" title=\"CSS Properties and Values\"></a>CSS Properties and Values</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API</a></p>\n</blockquote>\n<p><strong>CSS Properties and Values</strong>用于为CSS扩展属性，</p>\n<blockquote>\n<p>和<code>CSS variables</code>有类似点，但后者只是一个变量，没有CSS属性之特性：比如继承特性。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"CSSPropertyRule\"><a href=\"#CSSPropertyRule\" class=\"headerlink\" title=\"CSSPropertyRule\"></a>CSSPropertyRule</h3><p>属性和值的定义描述。</p>\n<blockquote>\n<p>syntax选项标识了值的预期语法，如<code>&lt;color&gt;</code>。</p>\n</blockquote>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"registerProperty\"><a href=\"#registerProperty\" class=\"headerlink\" title=\"registerProperty\"></a>registerProperty</h3><p>创建自定义css属性。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/CSS_Properties_and_Values_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Properties_and_Values_API/index.html</a></p>\n<ol>\n<li>两个Div使用了一样的样式，但<code>registerProperty</code>注册了<strong>非继承</strong>的属性，所以<code>.parent1 .item1</code>并未继承<code>.parent1</code>中设置的属性值，而使用了默认值。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9caf3326-17d2-4390-8484-5ec5e2ea835e\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/67\">https://github.com/taoliujun/blog/issues/67</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Properties_and_Values_API\ntags:\n  - webapi\n  - CSS Properties and Values\n---\n\n-->\n\n<h1 id=\"CSS-Properties-and-Values\"><a href=\"#CSS-Properties-and-Values\" class=\"headerlink\" title=\"CSS Properties and Values\"></a>CSS Properties and Values</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API</a></p>\n</blockquote>\n<p><strong>CSS Properties and Values</strong>用于为CSS扩展属性，</p>\n<blockquote>\n<p>和<code>CSS variables</code>有类似点，但后者只是一个变量，没有CSS属性之特性：比如继承特性。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"CSSPropertyRule\"><a href=\"#CSSPropertyRule\" class=\"headerlink\" title=\"CSSPropertyRule\"></a>CSSPropertyRule</h3><p>属性和值的定义描述。</p>\n<blockquote>\n<p>syntax选项标识了值的预期语法，如<code>&lt;color&gt;</code>。</p>\n</blockquote>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"registerProperty\"><a href=\"#registerProperty\" class=\"headerlink\" title=\"registerProperty\"></a>registerProperty</h3><p>创建自定义css属性。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/CSS_Properties_and_Values_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Properties_and_Values_API/index.html</a></p>\n<ol>\n<li>两个Div使用了一样的样式，但<code>registerProperty</code>注册了<strong>非继承</strong>的属性，所以<code>.parent1 .item1</code>并未继承<code>.parent1</code>中设置的属性值，而使用了默认值。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9caf3326-17d2-4390-8484-5ec5e2ea835e\" alt=\"image\"></p>\n"},{"title":"Web API - CSS Typed Object Model","date":"2024-03-06T00:54:11.000Z","url":"web-api-CSS_Typed_OM_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/69](https://github.com/taoliujun/blog/issues/69)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Typed_OM_API\ntags:\n  - webapi\n  - CSS Typed OM\n---\n\n-->\n\n# CSS Typed OM\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API\n\n**CSS Typed OM**全称`CSS Typed Object Model`，提供了一系列访问和操作CSS值的方法。\n\n在以往，使用`HTMLElement.style`管理元素的样式，它只是一个`string`类型，管理很笨拙，可读性也差。而本API将CSS值解析为可读性很高的对象，据此可以科学的管理它。\n\n> 和`HTMLElement.style`相比，本API更有可读性，性能更高。\n\n## 接口\n\n有公用类型`CSSStyleValue`和若干特殊类型如`CSSImageValue`、`CSSKeywordValue`等组成。\n\n### CSSStyleValue\n\n它是所有CSS值类型的公用类型，提供了`parse`方法将一个字符串解析成样式对象，例：\n\n```javascript\n// 返回 CSSStyleValue 类型\nCSSStyleValue.parse('color', '#f00');\n// 返回 CSSTransformValue 类型\nCSSStyleValue.parse('transform', 'translate(30px, 20px) rotate(45deg)');\n```\n\n### CSSKeywordValue\n\nCSS保留关键字类型如`initial`，例：\n\n```javascript\n// 返回 CSSKeywordValue {value: 'normal'} 类型，因为normal是保留关键字。\n$0.computedStyleMap().get('font-style');\n```\n\n### 其他类型见MDN\n\n### StylePropertyMapReadOnly\n\n提供`get`、`getAll`等方法读取样式。\n\n### StylePropertyMap\n\n继承于`StylePropertyMapReadOnly`，提供`append`、`set`等方法操作样式，如：\n\n```javascript\n// 将元素的文本颜色设置为红色\n$0.attributeStyleMap.set('color', 'red');\n```\n\n## 方法和属性\n\n### computedStyleMap\n\n`HTMLelement.computedStyleMap()`返回`StylePropertyMapReadOnly`类型。\n\n### attributeStyleMap\n\n`HTMLElement.attributeStyleMap`返回`StylePropertyMap`类型。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Typed_OM_API/index.html\n\n1. 在例子中，打印出元素所有的样式，或打印出指定的样式：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/50ce9bcd-62e4-42de-9368-81c6017b6476)\n\n2. 改变元素的颜色样式：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/7893da8e-63f7-4810-8a93-9ad5cc36cb22)\n\n\n\n\n","source":"_posts/web-api-CSS_Typed_OM_API.md","raw":"---\ntitle: \"Web API - CSS Typed Object Model\"\ndate: \"2024-03-06T08:54:11Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-CSS_Typed_OM_API\ntags:\n  - webapi\n  - CSS Typed OM\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/69](https://github.com/taoliujun/blog/issues/69)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Typed_OM_API\ntags:\n  - webapi\n  - CSS Typed OM\n---\n\n-->\n\n# CSS Typed OM\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API\n\n**CSS Typed OM**全称`CSS Typed Object Model`，提供了一系列访问和操作CSS值的方法。\n\n在以往，使用`HTMLElement.style`管理元素的样式，它只是一个`string`类型，管理很笨拙，可读性也差。而本API将CSS值解析为可读性很高的对象，据此可以科学的管理它。\n\n> 和`HTMLElement.style`相比，本API更有可读性，性能更高。\n\n## 接口\n\n有公用类型`CSSStyleValue`和若干特殊类型如`CSSImageValue`、`CSSKeywordValue`等组成。\n\n### CSSStyleValue\n\n它是所有CSS值类型的公用类型，提供了`parse`方法将一个字符串解析成样式对象，例：\n\n```javascript\n// 返回 CSSStyleValue 类型\nCSSStyleValue.parse('color', '#f00');\n// 返回 CSSTransformValue 类型\nCSSStyleValue.parse('transform', 'translate(30px, 20px) rotate(45deg)');\n```\n\n### CSSKeywordValue\n\nCSS保留关键字类型如`initial`，例：\n\n```javascript\n// 返回 CSSKeywordValue {value: 'normal'} 类型，因为normal是保留关键字。\n$0.computedStyleMap().get('font-style');\n```\n\n### 其他类型见MDN\n\n### StylePropertyMapReadOnly\n\n提供`get`、`getAll`等方法读取样式。\n\n### StylePropertyMap\n\n继承于`StylePropertyMapReadOnly`，提供`append`、`set`等方法操作样式，如：\n\n```javascript\n// 将元素的文本颜色设置为红色\n$0.attributeStyleMap.set('color', 'red');\n```\n\n## 方法和属性\n\n### computedStyleMap\n\n`HTMLelement.computedStyleMap()`返回`StylePropertyMapReadOnly`类型。\n\n### attributeStyleMap\n\n`HTMLElement.attributeStyleMap`返回`StylePropertyMap`类型。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Typed_OM_API/index.html\n\n1. 在例子中，打印出元素所有的样式，或打印出指定的样式：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/50ce9bcd-62e4-42de-9368-81c6017b6476)\n\n2. 改变元素的颜色样式：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/7893da8e-63f7-4810-8a93-9ad5cc36cb22)\n\n\n\n\n","slug":"web-api-CSS_Typed_OM_API","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcot6002rhdom3el21w9c","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/69\">https://github.com/taoliujun/blog/issues/69</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Typed_OM_API\ntags:\n  - webapi\n  - CSS Typed OM\n---\n\n-->\n\n<h1 id=\"CSS-Typed-OM\"><a href=\"#CSS-Typed-OM\" class=\"headerlink\" title=\"CSS Typed OM\"></a>CSS Typed OM</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API</a></p>\n</blockquote>\n<p><strong>CSS Typed OM</strong>全称<code>CSS Typed Object Model</code>，提供了一系列访问和操作CSS值的方法。</p>\n<p>在以往，使用<code>HTMLElement.style</code>管理元素的样式，它只是一个<code>string</code>类型，管理很笨拙，可读性也差。而本API将CSS值解析为可读性很高的对象，据此可以科学的管理它。</p>\n<blockquote>\n<p>和<code>HTMLElement.style</code>相比，本API更有可读性，性能更高。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><p>有公用类型<code>CSSStyleValue</code>和若干特殊类型如<code>CSSImageValue</code>、<code>CSSKeywordValue</code>等组成。</p>\n<h3 id=\"CSSStyleValue\"><a href=\"#CSSStyleValue\" class=\"headerlink\" title=\"CSSStyleValue\"></a>CSSStyleValue</h3><p>它是所有CSS值类型的公用类型，提供了<code>parse</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><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 返回 CSSStyleValue 类型</span></span><br><span class=\"line\"><span class=\"title class_\">CSSStyleValue</span>.<span class=\"title function_\">parse</span>(<span class=\"string\">&#x27;color&#x27;</span>, <span class=\"string\">&#x27;#f00&#x27;</span>);</span><br><span class=\"line\"><span class=\"comment\">// 返回 CSSTransformValue 类型</span></span><br><span class=\"line\"><span class=\"title class_\">CSSStyleValue</span>.<span class=\"title function_\">parse</span>(<span class=\"string\">&#x27;transform&#x27;</span>, <span class=\"string\">&#x27;translate(30px, 20px) rotate(45deg)&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"CSSKeywordValue\"><a href=\"#CSSKeywordValue\" class=\"headerlink\" title=\"CSSKeywordValue\"></a>CSSKeywordValue</h3><p>CSS保留关键字类型如<code>initial</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=\"comment\">// 返回 CSSKeywordValue &#123;value: &#x27;normal&#x27;&#125; 类型，因为normal是保留关键字。</span></span><br><span class=\"line\">$0.<span class=\"title function_\">computedStyleMap</span>().<span class=\"title function_\">get</span>(<span class=\"string\">&#x27;font-style&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"其他类型见MDN\"><a href=\"#其他类型见MDN\" class=\"headerlink\" title=\"其他类型见MDN\"></a>其他类型见MDN</h3><h3 id=\"StylePropertyMapReadOnly\"><a href=\"#StylePropertyMapReadOnly\" class=\"headerlink\" title=\"StylePropertyMapReadOnly\"></a>StylePropertyMapReadOnly</h3><p>提供<code>get</code>、<code>getAll</code>等方法读取样式。</p>\n<h3 id=\"StylePropertyMap\"><a href=\"#StylePropertyMap\" class=\"headerlink\" title=\"StylePropertyMap\"></a>StylePropertyMap</h3><p>继承于<code>StylePropertyMapReadOnly</code>，提供<code>append</code>、<code>set</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=\"comment\">// 将元素的文本颜色设置为红色</span></span><br><span class=\"line\">$0.<span class=\"property\">attributeStyleMap</span>.<span class=\"title function_\">set</span>(<span class=\"string\">&#x27;color&#x27;</span>, <span class=\"string\">&#x27;red&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"computedStyleMap\"><a href=\"#computedStyleMap\" class=\"headerlink\" title=\"computedStyleMap\"></a>computedStyleMap</h3><p><code>HTMLelement.computedStyleMap()</code>返回<code>StylePropertyMapReadOnly</code>类型。</p>\n<h3 id=\"attributeStyleMap\"><a href=\"#attributeStyleMap\" class=\"headerlink\" title=\"attributeStyleMap\"></a>attributeStyleMap</h3><p><code>HTMLElement.attributeStyleMap</code>返回<code>StylePropertyMap</code>类型。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/CSS_Typed_OM_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Typed_OM_API/index.html</a></p>\n<ol>\n<li>在例子中，打印出元素所有的样式，或打印出指定的样式：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/50ce9bcd-62e4-42de-9368-81c6017b6476\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>改变元素的颜色样式：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/7893da8e-63f7-4810-8a93-9ad5cc36cb22\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/69\">https://github.com/taoliujun/blog/issues/69</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Typed_OM_API\ntags:\n  - webapi\n  - CSS Typed OM\n---\n\n-->\n\n<h1 id=\"CSS-Typed-OM\"><a href=\"#CSS-Typed-OM\" class=\"headerlink\" title=\"CSS Typed OM\"></a>CSS Typed OM</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API</a></p>\n</blockquote>\n<p><strong>CSS Typed OM</strong>全称<code>CSS Typed Object Model</code>，提供了一系列访问和操作CSS值的方法。</p>\n<p>在以往，使用<code>HTMLElement.style</code>管理元素的样式，它只是一个<code>string</code>类型，管理很笨拙，可读性也差。而本API将CSS值解析为可读性很高的对象，据此可以科学的管理它。</p>\n<blockquote>\n<p>和<code>HTMLElement.style</code>相比，本API更有可读性，性能更高。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><p>有公用类型<code>CSSStyleValue</code>和若干特殊类型如<code>CSSImageValue</code>、<code>CSSKeywordValue</code>等组成。</p>\n<h3 id=\"CSSStyleValue\"><a href=\"#CSSStyleValue\" class=\"headerlink\" title=\"CSSStyleValue\"></a>CSSStyleValue</h3><p>它是所有CSS值类型的公用类型，提供了<code>parse</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><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 返回 CSSStyleValue 类型</span></span><br><span class=\"line\"><span class=\"title class_\">CSSStyleValue</span>.<span class=\"title function_\">parse</span>(<span class=\"string\">&#x27;color&#x27;</span>, <span class=\"string\">&#x27;#f00&#x27;</span>);</span><br><span class=\"line\"><span class=\"comment\">// 返回 CSSTransformValue 类型</span></span><br><span class=\"line\"><span class=\"title class_\">CSSStyleValue</span>.<span class=\"title function_\">parse</span>(<span class=\"string\">&#x27;transform&#x27;</span>, <span class=\"string\">&#x27;translate(30px, 20px) rotate(45deg)&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"CSSKeywordValue\"><a href=\"#CSSKeywordValue\" class=\"headerlink\" title=\"CSSKeywordValue\"></a>CSSKeywordValue</h3><p>CSS保留关键字类型如<code>initial</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=\"comment\">// 返回 CSSKeywordValue &#123;value: &#x27;normal&#x27;&#125; 类型，因为normal是保留关键字。</span></span><br><span class=\"line\">$0.<span class=\"title function_\">computedStyleMap</span>().<span class=\"title function_\">get</span>(<span class=\"string\">&#x27;font-style&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"其他类型见MDN\"><a href=\"#其他类型见MDN\" class=\"headerlink\" title=\"其他类型见MDN\"></a>其他类型见MDN</h3><h3 id=\"StylePropertyMapReadOnly\"><a href=\"#StylePropertyMapReadOnly\" class=\"headerlink\" title=\"StylePropertyMapReadOnly\"></a>StylePropertyMapReadOnly</h3><p>提供<code>get</code>、<code>getAll</code>等方法读取样式。</p>\n<h3 id=\"StylePropertyMap\"><a href=\"#StylePropertyMap\" class=\"headerlink\" title=\"StylePropertyMap\"></a>StylePropertyMap</h3><p>继承于<code>StylePropertyMapReadOnly</code>，提供<code>append</code>、<code>set</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=\"comment\">// 将元素的文本颜色设置为红色</span></span><br><span class=\"line\">$0.<span class=\"property\">attributeStyleMap</span>.<span class=\"title function_\">set</span>(<span class=\"string\">&#x27;color&#x27;</span>, <span class=\"string\">&#x27;red&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"computedStyleMap\"><a href=\"#computedStyleMap\" class=\"headerlink\" title=\"computedStyleMap\"></a>computedStyleMap</h3><p><code>HTMLelement.computedStyleMap()</code>返回<code>StylePropertyMapReadOnly</code>类型。</p>\n<h3 id=\"attributeStyleMap\"><a href=\"#attributeStyleMap\" class=\"headerlink\" title=\"attributeStyleMap\"></a>attributeStyleMap</h3><p><code>HTMLElement.attributeStyleMap</code>返回<code>StylePropertyMap</code>类型。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/CSS_Typed_OM_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Typed_OM_API/index.html</a></p>\n<ol>\n<li>在例子中，打印出元素所有的样式，或打印出指定的样式：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/50ce9bcd-62e4-42de-9368-81c6017b6476\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>改变元素的颜色样式：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/7893da8e-63f7-4810-8a93-9ad5cc36cb22\" alt=\"image\"></p>\n"},{"title":"Web API - Clipboard","date":"2024-03-07T17:51:33.000Z","url":"web-api-Clipboard_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/72](https://github.com/taoliujun/blog/issues/72)\n\n<!--hexo\n\n---\nurl: web-api-Clipboard_API\ntags:\n  - webapi\n  - Clipboard\n---\n\n-->\n\n# Clipboard\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API\n\n**Clipboard**提供了对系统剪切板的读取、写入方法。\n\n> 不要再使用`document.execCommand()`了。\n\n## 接口\n\n### Clipboard\n\n使用`Navigator.cliboard`可得到`Clipboard`接口实例，提供了`read`和`write`方法。另外，`readText`和`writeText`方法是一对读取写入文本信息的快捷方法。\n\n### ClipboardItem\n\n剪切板数据对象，包含了数据类型`type`（如`image/png`）和数据流`blob`。\n\n## 方法和属性\n\n略，见示例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Clipboard_API/index.html\n\n1. 复制输入框的文本到系统剪切板中、或从系统剪切板中读取：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/007c9e39-b66b-4910-ad55-e4391c4088bd)\n\n2. 复制canvas的图像数据到剪切板、或从剪切板中读取：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/852608b5-dc86-4c24-9748-55004fee34ce)\n\n\n\n\n","source":"_posts/web-api-Clipboard_API.md","raw":"---\ntitle: \"Web API - Clipboard\"\ndate: \"2024-03-08T01:51:33Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-Clipboard_API\ntags:\n  - webapi\n  - Clipboard\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/72](https://github.com/taoliujun/blog/issues/72)\n\n<!--hexo\n\n---\nurl: web-api-Clipboard_API\ntags:\n  - webapi\n  - Clipboard\n---\n\n-->\n\n# Clipboard\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API\n\n**Clipboard**提供了对系统剪切板的读取、写入方法。\n\n> 不要再使用`document.execCommand()`了。\n\n## 接口\n\n### Clipboard\n\n使用`Navigator.cliboard`可得到`Clipboard`接口实例，提供了`read`和`write`方法。另外，`readText`和`writeText`方法是一对读取写入文本信息的快捷方法。\n\n### ClipboardItem\n\n剪切板数据对象，包含了数据类型`type`（如`image/png`）和数据流`blob`。\n\n## 方法和属性\n\n略，见示例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Clipboard_API/index.html\n\n1. 复制输入框的文本到系统剪切板中、或从系统剪切板中读取：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/007c9e39-b66b-4910-ad55-e4391c4088bd)\n\n2. 复制canvas的图像数据到剪切板、或从剪切板中读取：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/852608b5-dc86-4c24-9748-55004fee34ce)\n\n\n\n\n","slug":"web-api-Clipboard_API","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcot6002uhdomfxafcju9","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/72\">https://github.com/taoliujun/blog/issues/72</a></p>\n<!--hexo\n\n---\nurl: web-api-Clipboard_API\ntags:\n  - webapi\n  - Clipboard\n---\n\n-->\n\n<h1 id=\"Clipboard\"><a href=\"#Clipboard\" class=\"headerlink\" title=\"Clipboard\"></a>Clipboard</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API\">https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API</a></p>\n</blockquote>\n<p><strong>Clipboard</strong>提供了对系统剪切板的读取、写入方法。</p>\n<blockquote>\n<p>不要再使用<code>document.execCommand()</code>了。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Clipboard-1\"><a href=\"#Clipboard-1\" class=\"headerlink\" title=\"Clipboard\"></a>Clipboard</h3><p>使用<code>Navigator.cliboard</code>可得到<code>Clipboard</code>接口实例，提供了<code>read</code>和<code>write</code>方法。另外，<code>readText</code>和<code>writeText</code>方法是一对读取写入文本信息的快捷方法。</p>\n<h3 id=\"ClipboardItem\"><a href=\"#ClipboardItem\" class=\"headerlink\" title=\"ClipboardItem\"></a>ClipboardItem</h3><p>剪切板数据对象，包含了数据类型<code>type</code>（如<code>image/png</code>）和数据流<code>blob</code>。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><p>略，见示例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Clipboard_API/index.html\">https://taoliujun.github.io/example/web-api/Clipboard_API/index.html</a></p>\n<ol>\n<li>复制输入框的文本到系统剪切板中、或从系统剪切板中读取：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/007c9e39-b66b-4910-ad55-e4391c4088bd\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>复制canvas的图像数据到剪切板、或从剪切板中读取：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/852608b5-dc86-4c24-9748-55004fee34ce\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/72\">https://github.com/taoliujun/blog/issues/72</a></p>\n<!--hexo\n\n---\nurl: web-api-Clipboard_API\ntags:\n  - webapi\n  - Clipboard\n---\n\n-->\n\n<h1 id=\"Clipboard\"><a href=\"#Clipboard\" class=\"headerlink\" title=\"Clipboard\"></a>Clipboard</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API\">https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API</a></p>\n</blockquote>\n<p><strong>Clipboard</strong>提供了对系统剪切板的读取、写入方法。</p>\n<blockquote>\n<p>不要再使用<code>document.execCommand()</code>了。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Clipboard-1\"><a href=\"#Clipboard-1\" class=\"headerlink\" title=\"Clipboard\"></a>Clipboard</h3><p>使用<code>Navigator.cliboard</code>可得到<code>Clipboard</code>接口实例，提供了<code>read</code>和<code>write</code>方法。另外，<code>readText</code>和<code>writeText</code>方法是一对读取写入文本信息的快捷方法。</p>\n<h3 id=\"ClipboardItem\"><a href=\"#ClipboardItem\" class=\"headerlink\" title=\"ClipboardItem\"></a>ClipboardItem</h3><p>剪切板数据对象，包含了数据类型<code>type</code>（如<code>image/png</code>）和数据流<code>blob</code>。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><p>略，见示例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Clipboard_API/index.html\">https://taoliujun.github.io/example/web-api/Clipboard_API/index.html</a></p>\n<ol>\n<li>复制输入框的文本到系统剪切板中、或从系统剪切板中读取：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/007c9e39-b66b-4910-ad55-e4391c4088bd\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>复制canvas的图像数据到剪切板、或从剪切板中读取：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/852608b5-dc86-4c24-9748-55004fee34ce\" alt=\"image\"></p>\n"},{"title":"Web API - CookieStore","date":"2024-03-07T19:40:40.000Z","url":"web-api-Cookie_Store_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/75](https://github.com/taoliujun/blog/issues/75)\n\n<!--hexo\n\n---\nurl: web-api-Cookie_Store_API\ntags:\n  - webapi\n  - CookieStore\n---\n\n-->\n\n# CookieStore\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\n\n**CookieStore**提供了对cookie的读取写入。相比`document.cookies`管理cookie的笨拙，本API更为明了。\n\n## 接口\n\n### CookieStore\n\n使用`window.cookieStore`可获取本接口实例，提供了`get`、`set`、`getAll`、`delete`方法管理cookie，并支持cookie的所有特性如domain、path、expires等。\n\n且还提供了`change`、`delete`事件监听。\n\n### CookieStoreManager\n\n订阅cookie变动。\n\n## 方法和属性\n\n略，见示例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Cookie_Store_API/index.html\n\n1. 写入、读取永久的cookie：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/d72df988-15d3-4214-ae9a-a6184cb5ba3e)\n\n2. 写入、读取会过期的cookie：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9a89eb49-7a7f-40f3-b523-6ce5bead38cd)\n\n\n\n\n","source":"_posts/web-api-Cookie_Store_API.md","raw":"---\ntitle: \"Web API - CookieStore\"\ndate: \"2024-03-08T03:40:40Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-Cookie_Store_API\ntags:\n  - webapi\n  - CookieStore\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/75](https://github.com/taoliujun/blog/issues/75)\n\n<!--hexo\n\n---\nurl: web-api-Cookie_Store_API\ntags:\n  - webapi\n  - CookieStore\n---\n\n-->\n\n# CookieStore\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\n\n**CookieStore**提供了对cookie的读取写入。相比`document.cookies`管理cookie的笨拙，本API更为明了。\n\n## 接口\n\n### CookieStore\n\n使用`window.cookieStore`可获取本接口实例，提供了`get`、`set`、`getAll`、`delete`方法管理cookie，并支持cookie的所有特性如domain、path、expires等。\n\n且还提供了`change`、`delete`事件监听。\n\n### CookieStoreManager\n\n订阅cookie变动。\n\n## 方法和属性\n\n略，见示例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Cookie_Store_API/index.html\n\n1. 写入、读取永久的cookie：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/d72df988-15d3-4214-ae9a-a6184cb5ba3e)\n\n2. 写入、读取会过期的cookie：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9a89eb49-7a7f-40f3-b523-6ce5bead38cd)\n\n\n\n\n","slug":"web-api-Cookie_Store_API","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcot7002xhdomcwtg6lf5","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/75\">https://github.com/taoliujun/blog/issues/75</a></p>\n<!--hexo\n\n---\nurl: web-api-Cookie_Store_API\ntags:\n  - webapi\n  - CookieStore\n---\n\n-->\n\n<h1 id=\"CookieStore\"><a href=\"#CookieStore\" class=\"headerlink\" title=\"CookieStore\"></a>CookieStore</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\">https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API</a></p>\n</blockquote>\n<p><strong>CookieStore</strong>提供了对cookie的读取写入。相比<code>document.cookies</code>管理cookie的笨拙，本API更为明了。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"CookieStore-1\"><a href=\"#CookieStore-1\" class=\"headerlink\" title=\"CookieStore\"></a>CookieStore</h3><p>使用<code>window.cookieStore</code>可获取本接口实例，提供了<code>get</code>、<code>set</code>、<code>getAll</code>、<code>delete</code>方法管理cookie，并支持cookie的所有特性如domain、path、expires等。</p>\n<p>且还提供了<code>change</code>、<code>delete</code>事件监听。</p>\n<h3 id=\"CookieStoreManager\"><a href=\"#CookieStoreManager\" class=\"headerlink\" title=\"CookieStoreManager\"></a>CookieStoreManager</h3><p>订阅cookie变动。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><p>略，见示例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Cookie_Store_API/index.html\">https://taoliujun.github.io/example/web-api/Cookie_Store_API/index.html</a></p>\n<ol>\n<li>写入、读取永久的cookie：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/d72df988-15d3-4214-ae9a-a6184cb5ba3e\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>写入、读取会过期的cookie：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9a89eb49-7a7f-40f3-b523-6ce5bead38cd\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/75\">https://github.com/taoliujun/blog/issues/75</a></p>\n<!--hexo\n\n---\nurl: web-api-Cookie_Store_API\ntags:\n  - webapi\n  - CookieStore\n---\n\n-->\n\n<h1 id=\"CookieStore\"><a href=\"#CookieStore\" class=\"headerlink\" title=\"CookieStore\"></a>CookieStore</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\">https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API</a></p>\n</blockquote>\n<p><strong>CookieStore</strong>提供了对cookie的读取写入。相比<code>document.cookies</code>管理cookie的笨拙，本API更为明了。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"CookieStore-1\"><a href=\"#CookieStore-1\" class=\"headerlink\" title=\"CookieStore\"></a>CookieStore</h3><p>使用<code>window.cookieStore</code>可获取本接口实例，提供了<code>get</code>、<code>set</code>、<code>getAll</code>、<code>delete</code>方法管理cookie，并支持cookie的所有特性如domain、path、expires等。</p>\n<p>且还提供了<code>change</code>、<code>delete</code>事件监听。</p>\n<h3 id=\"CookieStoreManager\"><a href=\"#CookieStoreManager\" class=\"headerlink\" title=\"CookieStoreManager\"></a>CookieStoreManager</h3><p>订阅cookie变动。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><p>略，见示例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Cookie_Store_API/index.html\">https://taoliujun.github.io/example/web-api/Cookie_Store_API/index.html</a></p>\n<ol>\n<li>写入、读取永久的cookie：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/d72df988-15d3-4214-ae9a-a6184cb5ba3e\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>写入、读取会过期的cookie：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9a89eb49-7a7f-40f3-b523-6ce5bead38cd\" alt=\"image\"></p>\n"},{"title":"Web API - Credential Management","date":"2024-03-07T21:51:27.000Z","url":"web-api-Credential_Management_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/77](https://github.com/taoliujun/blog/issues/77)\n\n<!--hexo\n\n---\nurl: web-api-Credential_Management_API\ntags:\n  - webapi\n  - Credential Management\n---\n\n-->\n\n# Credential Management\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API\n\n**Credential Management**用于管理网页的登录凭证如如密码、秘钥对。比如在第一次登录时保存密码凭证，以后读取该凭证后自动登录，省去用户重复输入账号密码的步骤（尽管可能还需要用户在浏览器弹出框里选择要登录的用户）。\n\n在一些浏览器如chrome的Password Manager配置`chrome://password-manager/settings`中，有一个选项**Offer to save passwords**：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/11785f82-c37c-450a-9711-a46cf2eb6346)\n\n是否允许保存密码。它在打开后，有两个作用，一是允许代码调用`credentials.store`存储凭证信息；二是允许浏览器智能的为你存储网页的登录凭证，即便该网页并未显式调用`credentials.store`。它的效果如下：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/3469d848-16cc-4439-871a-5d574d1ab34f)\n\n## 接口\n\n### Credential\n\n基础凭证接口，本身不能直接使用。\n\n### PasswordCredential\n\n密码凭证接口，继承于`Credential`，用于存储、读取密码类型的凭证。\n\n### FederatedCredential\n\n联合凭证接口，比如接入google联合登录凭证。\n\n### CredentialsContainer\n\n`Navigator.credentials`获取该接口实例，提供`create`、`get`、`store`等方法来创建、读取、存储凭证。`create`接口一般不直接使用，而直接用`PasswordCredential`这种具体的接口去创建凭证。\n\n## 方法和属性\n\n略，见示例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Credential_Management_API/index.html\n\n1. 输入账号密码，点击登录，提示是否存储密码凭证：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9b476376-3c0e-4467-b42b-5d8685186839)\n\n2. 读取密码凭证并打印：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/69de9bd3-08eb-4f67-91e7-86f1c94d16f9)\n\n3. 如果有多个凭证，需要用户手动选择使用哪个凭证：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9b4859ba-0ebe-4f3f-945a-50f654e78ee9)\n\n\n\n\n","source":"_posts/web-api-Credential_Management_API.md","raw":"---\ntitle: \"Web API - Credential Management\"\ndate: \"2024-03-08T05:51:27Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-Credential_Management_API\ntags:\n  - webapi\n  - Credential Management\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/77](https://github.com/taoliujun/blog/issues/77)\n\n<!--hexo\n\n---\nurl: web-api-Credential_Management_API\ntags:\n  - webapi\n  - Credential Management\n---\n\n-->\n\n# Credential Management\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API\n\n**Credential Management**用于管理网页的登录凭证如如密码、秘钥对。比如在第一次登录时保存密码凭证，以后读取该凭证后自动登录，省去用户重复输入账号密码的步骤（尽管可能还需要用户在浏览器弹出框里选择要登录的用户）。\n\n在一些浏览器如chrome的Password Manager配置`chrome://password-manager/settings`中，有一个选项**Offer to save passwords**：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/11785f82-c37c-450a-9711-a46cf2eb6346)\n\n是否允许保存密码。它在打开后，有两个作用，一是允许代码调用`credentials.store`存储凭证信息；二是允许浏览器智能的为你存储网页的登录凭证，即便该网页并未显式调用`credentials.store`。它的效果如下：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/3469d848-16cc-4439-871a-5d574d1ab34f)\n\n## 接口\n\n### Credential\n\n基础凭证接口，本身不能直接使用。\n\n### PasswordCredential\n\n密码凭证接口，继承于`Credential`，用于存储、读取密码类型的凭证。\n\n### FederatedCredential\n\n联合凭证接口，比如接入google联合登录凭证。\n\n### CredentialsContainer\n\n`Navigator.credentials`获取该接口实例，提供`create`、`get`、`store`等方法来创建、读取、存储凭证。`create`接口一般不直接使用，而直接用`PasswordCredential`这种具体的接口去创建凭证。\n\n## 方法和属性\n\n略，见示例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Credential_Management_API/index.html\n\n1. 输入账号密码，点击登录，提示是否存储密码凭证：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9b476376-3c0e-4467-b42b-5d8685186839)\n\n2. 读取密码凭证并打印：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/69de9bd3-08eb-4f67-91e7-86f1c94d16f9)\n\n3. 如果有多个凭证，需要用户手动选择使用哪个凭证：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9b4859ba-0ebe-4f3f-945a-50f654e78ee9)\n\n\n\n\n","slug":"web-api-Credential_Management_API","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcot8002zhdom9bd637km","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/77\">https://github.com/taoliujun/blog/issues/77</a></p>\n<!--hexo\n\n---\nurl: web-api-Credential_Management_API\ntags:\n  - webapi\n  - Credential Management\n---\n\n-->\n\n<h1 id=\"Credential-Management\"><a href=\"#Credential-Management\" class=\"headerlink\" title=\"Credential Management\"></a>Credential Management</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API\">https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API</a></p>\n</blockquote>\n<p><strong>Credential Management</strong>用于管理网页的登录凭证如如密码、秘钥对。比如在第一次登录时保存密码凭证，以后读取该凭证后自动登录，省去用户重复输入账号密码的步骤（尽管可能还需要用户在浏览器弹出框里选择要登录的用户）。</p>\n<p>在一些浏览器如chrome的Password Manager配置<code>chrome://password-manager/settings</code>中，有一个选项<strong>Offer to save passwords</strong>：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/11785f82-c37c-450a-9711-a46cf2eb6346\" alt=\"image\"></p>\n<p>是否允许保存密码。它在打开后，有两个作用，一是允许代码调用<code>credentials.store</code>存储凭证信息；二是允许浏览器智能的为你存储网页的登录凭证，即便该网页并未显式调用<code>credentials.store</code>。它的效果如下：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/3469d848-16cc-4439-871a-5d574d1ab34f\" alt=\"image\"></p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Credential\"><a href=\"#Credential\" class=\"headerlink\" title=\"Credential\"></a>Credential</h3><p>基础凭证接口，本身不能直接使用。</p>\n<h3 id=\"PasswordCredential\"><a href=\"#PasswordCredential\" class=\"headerlink\" title=\"PasswordCredential\"></a>PasswordCredential</h3><p>密码凭证接口，继承于<code>Credential</code>，用于存储、读取密码类型的凭证。</p>\n<h3 id=\"FederatedCredential\"><a href=\"#FederatedCredential\" class=\"headerlink\" title=\"FederatedCredential\"></a>FederatedCredential</h3><p>联合凭证接口，比如接入google联合登录凭证。</p>\n<h3 id=\"CredentialsContainer\"><a href=\"#CredentialsContainer\" class=\"headerlink\" title=\"CredentialsContainer\"></a>CredentialsContainer</h3><p><code>Navigator.credentials</code>获取该接口实例，提供<code>create</code>、<code>get</code>、<code>store</code>等方法来创建、读取、存储凭证。<code>create</code>接口一般不直接使用，而直接用<code>PasswordCredential</code>这种具体的接口去创建凭证。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><p>略，见示例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Credential_Management_API/index.html\">https://taoliujun.github.io/example/web-api/Credential_Management_API/index.html</a></p>\n<ol>\n<li>输入账号密码，点击登录，提示是否存储密码凭证：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9b476376-3c0e-4467-b42b-5d8685186839\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>读取密码凭证并打印：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/69de9bd3-08eb-4f67-91e7-86f1c94d16f9\" alt=\"image\"></p>\n<ol start=\"3\">\n<li>如果有多个凭证，需要用户手动选择使用哪个凭证：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9b4859ba-0ebe-4f3f-945a-50f654e78ee9\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/77\">https://github.com/taoliujun/blog/issues/77</a></p>\n<!--hexo\n\n---\nurl: web-api-Credential_Management_API\ntags:\n  - webapi\n  - Credential Management\n---\n\n-->\n\n<h1 id=\"Credential-Management\"><a href=\"#Credential-Management\" class=\"headerlink\" title=\"Credential Management\"></a>Credential Management</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API\">https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API</a></p>\n</blockquote>\n<p><strong>Credential Management</strong>用于管理网页的登录凭证如如密码、秘钥对。比如在第一次登录时保存密码凭证，以后读取该凭证后自动登录，省去用户重复输入账号密码的步骤（尽管可能还需要用户在浏览器弹出框里选择要登录的用户）。</p>\n<p>在一些浏览器如chrome的Password Manager配置<code>chrome://password-manager/settings</code>中，有一个选项<strong>Offer to save passwords</strong>：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/11785f82-c37c-450a-9711-a46cf2eb6346\" alt=\"image\"></p>\n<p>是否允许保存密码。它在打开后，有两个作用，一是允许代码调用<code>credentials.store</code>存储凭证信息；二是允许浏览器智能的为你存储网页的登录凭证，即便该网页并未显式调用<code>credentials.store</code>。它的效果如下：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/3469d848-16cc-4439-871a-5d574d1ab34f\" alt=\"image\"></p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Credential\"><a href=\"#Credential\" class=\"headerlink\" title=\"Credential\"></a>Credential</h3><p>基础凭证接口，本身不能直接使用。</p>\n<h3 id=\"PasswordCredential\"><a href=\"#PasswordCredential\" class=\"headerlink\" title=\"PasswordCredential\"></a>PasswordCredential</h3><p>密码凭证接口，继承于<code>Credential</code>，用于存储、读取密码类型的凭证。</p>\n<h3 id=\"FederatedCredential\"><a href=\"#FederatedCredential\" class=\"headerlink\" title=\"FederatedCredential\"></a>FederatedCredential</h3><p>联合凭证接口，比如接入google联合登录凭证。</p>\n<h3 id=\"CredentialsContainer\"><a href=\"#CredentialsContainer\" class=\"headerlink\" title=\"CredentialsContainer\"></a>CredentialsContainer</h3><p><code>Navigator.credentials</code>获取该接口实例，提供<code>create</code>、<code>get</code>、<code>store</code>等方法来创建、读取、存储凭证。<code>create</code>接口一般不直接使用，而直接用<code>PasswordCredential</code>这种具体的接口去创建凭证。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><p>略，见示例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Credential_Management_API/index.html\">https://taoliujun.github.io/example/web-api/Credential_Management_API/index.html</a></p>\n<ol>\n<li>输入账号密码，点击登录，提示是否存储密码凭证：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9b476376-3c0e-4467-b42b-5d8685186839\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>读取密码凭证并打印：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/69de9bd3-08eb-4f67-91e7-86f1c94d16f9\" alt=\"image\"></p>\n<ol start=\"3\">\n<li>如果有多个凭证，需要用户手动选择使用哪个凭证：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9b4859ba-0ebe-4f3f-945a-50f654e78ee9\" alt=\"image\"></p>\n"},{"title":"Web API - Device Memory","date":"2024-03-11T21:08:54.000Z","url":"web-api-Device_Memory_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/79](https://github.com/taoliujun/blog/issues/79)\n\n<!--hexo\n\n---\nurl: web-api-Device_Memory_API\ntags:\n  - webapi\n  - Device Memory\n---\n\n-->\n\n# Device Memory\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API\n\n**Device Memory**获取设备可用的内存大小，这是一个大约量。\n\n## 方法和属性\n\n### Navigator.deviceMemory\n\n内存可用容量，单位是GB，数值是2的次方：0.25, 0.5, 1, 2, 4, 8。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Device_Memory_API/index.html\n\n\n\n\n","source":"_posts/web-api-Device_Memory_API.md","raw":"---\ntitle: \"Web API - Device Memory\"\ndate: \"2024-03-12T05:08:54Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-Device_Memory_API\ntags:\n  - webapi\n  - Device Memory\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/79](https://github.com/taoliujun/blog/issues/79)\n\n<!--hexo\n\n---\nurl: web-api-Device_Memory_API\ntags:\n  - webapi\n  - Device Memory\n---\n\n-->\n\n# Device Memory\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API\n\n**Device Memory**获取设备可用的内存大小，这是一个大约量。\n\n## 方法和属性\n\n### Navigator.deviceMemory\n\n内存可用容量，单位是GB，数值是2的次方：0.25, 0.5, 1, 2, 4, 8。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Device_Memory_API/index.html\n\n\n\n\n","slug":"web-api-Device_Memory_API","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcot90033hdom01ll9tco","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/79\">https://github.com/taoliujun/blog/issues/79</a></p>\n<!--hexo\n\n---\nurl: web-api-Device_Memory_API\ntags:\n  - webapi\n  - Device Memory\n---\n\n-->\n\n<h1 id=\"Device-Memory\"><a href=\"#Device-Memory\" class=\"headerlink\" title=\"Device Memory\"></a>Device Memory</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API\">https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API</a></p>\n</blockquote>\n<p><strong>Device Memory</strong>获取设备可用的内存大小，这是一个大约量。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"Navigator-deviceMemory\"><a href=\"#Navigator-deviceMemory\" class=\"headerlink\" title=\"Navigator.deviceMemory\"></a>Navigator.deviceMemory</h3><p>内存可用容量，单位是GB，数值是2的次方：0.25, 0.5, 1, 2, 4, 8。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Device_Memory_API/index.html\">https://taoliujun.github.io/example/web-api/Device_Memory_API/index.html</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/79\">https://github.com/taoliujun/blog/issues/79</a></p>\n<!--hexo\n\n---\nurl: web-api-Device_Memory_API\ntags:\n  - webapi\n  - Device Memory\n---\n\n-->\n\n<h1 id=\"Device-Memory\"><a href=\"#Device-Memory\" class=\"headerlink\" title=\"Device Memory\"></a>Device Memory</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API\">https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API</a></p>\n</blockquote>\n<p><strong>Device Memory</strong>获取设备可用的内存大小，这是一个大约量。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"Navigator-deviceMemory\"><a href=\"#Navigator-deviceMemory\" class=\"headerlink\" title=\"Navigator.deviceMemory\"></a>Navigator.deviceMemory</h3><p>内存可用容量，单位是GB，数值是2的次方：0.25, 0.5, 1, 2, 4, 8。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Device_Memory_API/index.html\">https://taoliujun.github.io/example/web-api/Device_Memory_API/index.html</a></p>\n"},{"title":"Web API - Device Orientation","date":"2024-03-11T22:31:13.000Z","url":"web-api-Device_orientation_events","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/81](https://github.com/taoliujun/blog/issues/81)\n\n<!--hexo\n\n---\nurl: web-api-Device_orientation_events\ntags:\n  - webapi\n  - Device Orientation\n---\n\n-->\n\n# Device Orientation\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events\n\n**Device Orientation**用于获取设备的方向、和运动信息。移动设备的加速度传感器、陀螺仪、指南针等组件为浏览器提供了一系列运动信息，可以监听事件获取到相关信息。\n\n> 三轴指的是手机沿着北方向竖向平放在桌子上，左右是X轴，上下是Y轴，高低是Z轴。\n\n## 接口\n\n下面的接口里的数据概念有所类似但又有细节差异，使用时仔细参考官方文档。\n\n### DeviceMotionEvent\n\n设备的加速度和旋转速率的变化事件。包含以下信息：\n\n-   `acceleration`，加速度，不包括重力计算。\n-   `accelerationIncludingGravity`，加速度，包括重力计算。\n-   `interval`，获取数据的频率，单位毫秒。\n-   `rotationRate`，三个轴上的速率。\n\n### DeviceMotionEventAcceleration\n\n设备在三个轴上的加速度量的变化事件。包含以下信息：\n\n-   `z`，Z轴变化量。\n-   `x`，X轴变化量。\n-   `y`，Y轴变化量。\n\n### DeviceMotionEventRotationRate\n\n设备在三个轴的旋转速率的变化事件。包含以下信息：\n\n-   `alpha`，Z轴速率，即每秒变化量。\n-   `beta`，X轴速率。\n-   `gamma`，Y轴速率。\n\n### DeviceOrientationEvent\n\n设备物理方向的变化事件。包含了以下信息：\n\n-   `absolute`，数据信息是否是绝对量（地球坐标）。\n-   `alpha`，Z轴变化量。\n-   `beta`，X轴变化量。\n-   `gamma`，Y轴变化量。\n\n## 方法和属性\n\n### Event.devicemotion\n\n事件监听，返回`DeviceMotionEvent`。\n\n### Event.deviceorientation\n\n事件监听，返回`DeviceOrientationEvent`\n\n### Event.deviceorientationabsolute\n\n事件监听，返回`DeviceOrientationEvent`\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Device_orientation_events/index.html\n\n\n\n\n","source":"_posts/web-api-Device_orientation_events.md","raw":"---\ntitle: \"Web API - Device Orientation\"\ndate: \"2024-03-12T06:31:13Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-Device_orientation_events\ntags:\n  - webapi\n  - Device Orientation\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/81](https://github.com/taoliujun/blog/issues/81)\n\n<!--hexo\n\n---\nurl: web-api-Device_orientation_events\ntags:\n  - webapi\n  - Device Orientation\n---\n\n-->\n\n# Device Orientation\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events\n\n**Device Orientation**用于获取设备的方向、和运动信息。移动设备的加速度传感器、陀螺仪、指南针等组件为浏览器提供了一系列运动信息，可以监听事件获取到相关信息。\n\n> 三轴指的是手机沿着北方向竖向平放在桌子上，左右是X轴，上下是Y轴，高低是Z轴。\n\n## 接口\n\n下面的接口里的数据概念有所类似但又有细节差异，使用时仔细参考官方文档。\n\n### DeviceMotionEvent\n\n设备的加速度和旋转速率的变化事件。包含以下信息：\n\n-   `acceleration`，加速度，不包括重力计算。\n-   `accelerationIncludingGravity`，加速度，包括重力计算。\n-   `interval`，获取数据的频率，单位毫秒。\n-   `rotationRate`，三个轴上的速率。\n\n### DeviceMotionEventAcceleration\n\n设备在三个轴上的加速度量的变化事件。包含以下信息：\n\n-   `z`，Z轴变化量。\n-   `x`，X轴变化量。\n-   `y`，Y轴变化量。\n\n### DeviceMotionEventRotationRate\n\n设备在三个轴的旋转速率的变化事件。包含以下信息：\n\n-   `alpha`，Z轴速率，即每秒变化量。\n-   `beta`，X轴速率。\n-   `gamma`，Y轴速率。\n\n### DeviceOrientationEvent\n\n设备物理方向的变化事件。包含了以下信息：\n\n-   `absolute`，数据信息是否是绝对量（地球坐标）。\n-   `alpha`，Z轴变化量。\n-   `beta`，X轴变化量。\n-   `gamma`，Y轴变化量。\n\n## 方法和属性\n\n### Event.devicemotion\n\n事件监听，返回`DeviceMotionEvent`。\n\n### Event.deviceorientation\n\n事件监听，返回`DeviceOrientationEvent`\n\n### Event.deviceorientationabsolute\n\n事件监听，返回`DeviceOrientationEvent`\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Device_orientation_events/index.html\n\n\n\n\n","slug":"web-api-Device_orientation_events","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcot90036hdom3nou55z0","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/81\">https://github.com/taoliujun/blog/issues/81</a></p>\n<!--hexo\n\n---\nurl: web-api-Device_orientation_events\ntags:\n  - webapi\n  - Device Orientation\n---\n\n-->\n\n<h1 id=\"Device-Orientation\"><a href=\"#Device-Orientation\" class=\"headerlink\" title=\"Device Orientation\"></a>Device Orientation</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events\">https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events</a></p>\n</blockquote>\n<p><strong>Device Orientation</strong>用于获取设备的方向、和运动信息。移动设备的加速度传感器、陀螺仪、指南针等组件为浏览器提供了一系列运动信息，可以监听事件获取到相关信息。</p>\n<blockquote>\n<p>三轴指的是手机沿着北方向竖向平放在桌子上，左右是X轴，上下是Y轴，高低是Z轴。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><p>下面的接口里的数据概念有所类似但又有细节差异，使用时仔细参考官方文档。</p>\n<h3 id=\"DeviceMotionEvent\"><a href=\"#DeviceMotionEvent\" class=\"headerlink\" title=\"DeviceMotionEvent\"></a>DeviceMotionEvent</h3><p>设备的加速度和旋转速率的变化事件。包含以下信息：</p>\n<ul>\n<li><code>acceleration</code>，加速度，不包括重力计算。</li>\n<li><code>accelerationIncludingGravity</code>，加速度，包括重力计算。</li>\n<li><code>interval</code>，获取数据的频率，单位毫秒。</li>\n<li><code>rotationRate</code>，三个轴上的速率。</li>\n</ul>\n<h3 id=\"DeviceMotionEventAcceleration\"><a href=\"#DeviceMotionEventAcceleration\" class=\"headerlink\" title=\"DeviceMotionEventAcceleration\"></a>DeviceMotionEventAcceleration</h3><p>设备在三个轴上的加速度量的变化事件。包含以下信息：</p>\n<ul>\n<li><code>z</code>，Z轴变化量。</li>\n<li><code>x</code>，X轴变化量。</li>\n<li><code>y</code>，Y轴变化量。</li>\n</ul>\n<h3 id=\"DeviceMotionEventRotationRate\"><a href=\"#DeviceMotionEventRotationRate\" class=\"headerlink\" title=\"DeviceMotionEventRotationRate\"></a>DeviceMotionEventRotationRate</h3><p>设备在三个轴的旋转速率的变化事件。包含以下信息：</p>\n<ul>\n<li><code>alpha</code>，Z轴速率，即每秒变化量。</li>\n<li><code>beta</code>，X轴速率。</li>\n<li><code>gamma</code>，Y轴速率。</li>\n</ul>\n<h3 id=\"DeviceOrientationEvent\"><a href=\"#DeviceOrientationEvent\" class=\"headerlink\" title=\"DeviceOrientationEvent\"></a>DeviceOrientationEvent</h3><p>设备物理方向的变化事件。包含了以下信息：</p>\n<ul>\n<li><code>absolute</code>，数据信息是否是绝对量（地球坐标）。</li>\n<li><code>alpha</code>，Z轴变化量。</li>\n<li><code>beta</code>，X轴变化量。</li>\n<li><code>gamma</code>，Y轴变化量。</li>\n</ul>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"Event-devicemotion\"><a href=\"#Event-devicemotion\" class=\"headerlink\" title=\"Event.devicemotion\"></a>Event.devicemotion</h3><p>事件监听，返回<code>DeviceMotionEvent</code>。</p>\n<h3 id=\"Event-deviceorientation\"><a href=\"#Event-deviceorientation\" class=\"headerlink\" title=\"Event.deviceorientation\"></a>Event.deviceorientation</h3><p>事件监听，返回<code>DeviceOrientationEvent</code></p>\n<h3 id=\"Event-deviceorientationabsolute\"><a href=\"#Event-deviceorientationabsolute\" class=\"headerlink\" title=\"Event.deviceorientationabsolute\"></a>Event.deviceorientationabsolute</h3><p>事件监听，返回<code>DeviceOrientationEvent</code></p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Device_orientation_events/index.html\">https://taoliujun.github.io/example/web-api/Device_orientation_events/index.html</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/81\">https://github.com/taoliujun/blog/issues/81</a></p>\n<!--hexo\n\n---\nurl: web-api-Device_orientation_events\ntags:\n  - webapi\n  - Device Orientation\n---\n\n-->\n\n<h1 id=\"Device-Orientation\"><a href=\"#Device-Orientation\" class=\"headerlink\" title=\"Device Orientation\"></a>Device Orientation</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events\">https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events</a></p>\n</blockquote>\n<p><strong>Device Orientation</strong>用于获取设备的方向、和运动信息。移动设备的加速度传感器、陀螺仪、指南针等组件为浏览器提供了一系列运动信息，可以监听事件获取到相关信息。</p>\n<blockquote>\n<p>三轴指的是手机沿着北方向竖向平放在桌子上，左右是X轴，上下是Y轴，高低是Z轴。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><p>下面的接口里的数据概念有所类似但又有细节差异，使用时仔细参考官方文档。</p>\n<h3 id=\"DeviceMotionEvent\"><a href=\"#DeviceMotionEvent\" class=\"headerlink\" title=\"DeviceMotionEvent\"></a>DeviceMotionEvent</h3><p>设备的加速度和旋转速率的变化事件。包含以下信息：</p>\n<ul>\n<li><code>acceleration</code>，加速度，不包括重力计算。</li>\n<li><code>accelerationIncludingGravity</code>，加速度，包括重力计算。</li>\n<li><code>interval</code>，获取数据的频率，单位毫秒。</li>\n<li><code>rotationRate</code>，三个轴上的速率。</li>\n</ul>\n<h3 id=\"DeviceMotionEventAcceleration\"><a href=\"#DeviceMotionEventAcceleration\" class=\"headerlink\" title=\"DeviceMotionEventAcceleration\"></a>DeviceMotionEventAcceleration</h3><p>设备在三个轴上的加速度量的变化事件。包含以下信息：</p>\n<ul>\n<li><code>z</code>，Z轴变化量。</li>\n<li><code>x</code>，X轴变化量。</li>\n<li><code>y</code>，Y轴变化量。</li>\n</ul>\n<h3 id=\"DeviceMotionEventRotationRate\"><a href=\"#DeviceMotionEventRotationRate\" class=\"headerlink\" title=\"DeviceMotionEventRotationRate\"></a>DeviceMotionEventRotationRate</h3><p>设备在三个轴的旋转速率的变化事件。包含以下信息：</p>\n<ul>\n<li><code>alpha</code>，Z轴速率，即每秒变化量。</li>\n<li><code>beta</code>，X轴速率。</li>\n<li><code>gamma</code>，Y轴速率。</li>\n</ul>\n<h3 id=\"DeviceOrientationEvent\"><a href=\"#DeviceOrientationEvent\" class=\"headerlink\" title=\"DeviceOrientationEvent\"></a>DeviceOrientationEvent</h3><p>设备物理方向的变化事件。包含了以下信息：</p>\n<ul>\n<li><code>absolute</code>，数据信息是否是绝对量（地球坐标）。</li>\n<li><code>alpha</code>，Z轴变化量。</li>\n<li><code>beta</code>，X轴变化量。</li>\n<li><code>gamma</code>，Y轴变化量。</li>\n</ul>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"Event-devicemotion\"><a href=\"#Event-devicemotion\" class=\"headerlink\" title=\"Event.devicemotion\"></a>Event.devicemotion</h3><p>事件监听，返回<code>DeviceMotionEvent</code>。</p>\n<h3 id=\"Event-deviceorientation\"><a href=\"#Event-deviceorientation\" class=\"headerlink\" title=\"Event.deviceorientation\"></a>Event.deviceorientation</h3><p>事件监听，返回<code>DeviceOrientationEvent</code></p>\n<h3 id=\"Event-deviceorientationabsolute\"><a href=\"#Event-deviceorientationabsolute\" class=\"headerlink\" title=\"Event.deviceorientationabsolute\"></a>Event.deviceorientationabsolute</h3><p>事件监听，返回<code>DeviceOrientationEvent</code></p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Device_orientation_events/index.html\">https://taoliujun.github.io/example/web-api/Device_orientation_events/index.html</a></p>\n"},{"title":"Web API - DOM","date":"2024-03-11T21:09:58.000Z","url":"web-api-Document_Object_Model","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/80](https://github.com/taoliujun/blog/issues/80)\n\n<!--hexo\n\n---\nurl: web-api-Document_Object_Model\ntags:\n  - webapi\n  - DOM\n---\n\n-->\n\n# DOM\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\n\n**DOM**用来描述文档树，与JavaScript连接起来。它是前端编程中使用最频繁的接口合集，涵盖了文档属性、节点管理、事件，难以一一列举。\n\n\n\n\n","source":"_posts/web-api-Document_Object_Model.md","raw":"---\ntitle: \"Web API - DOM\"\ndate: \"2024-03-12T05:09:58Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-Document_Object_Model\ntags:\n  - webapi\n  - DOM\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/80](https://github.com/taoliujun/blog/issues/80)\n\n<!--hexo\n\n---\nurl: web-api-Document_Object_Model\ntags:\n  - webapi\n  - DOM\n---\n\n-->\n\n# DOM\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\n\n**DOM**用来描述文档树，与JavaScript连接起来。它是前端编程中使用最频繁的接口合集，涵盖了文档属性、节点管理、事件，难以一一列举。\n\n\n\n\n","slug":"web-api-Document_Object_Model","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcota003ahdom33vd2ptf","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/80\">https://github.com/taoliujun/blog/issues/80</a></p>\n<!--hexo\n\n---\nurl: web-api-Document_Object_Model\ntags:\n  - webapi\n  - DOM\n---\n\n-->\n\n<h1 id=\"DOM\"><a href=\"#DOM\" class=\"headerlink\" title=\"DOM\"></a>DOM</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\">https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model</a></p>\n</blockquote>\n<p><strong>DOM</strong>用来描述文档树，与JavaScript连接起来。它是前端编程中使用最频繁的接口合集，涵盖了文档属性、节点管理、事件，难以一一列举。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/80\">https://github.com/taoliujun/blog/issues/80</a></p>\n<!--hexo\n\n---\nurl: web-api-Document_Object_Model\ntags:\n  - webapi\n  - DOM\n---\n\n-->\n\n<h1 id=\"DOM\"><a href=\"#DOM\" class=\"headerlink\" title=\"DOM\"></a>DOM</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\">https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model</a></p>\n</blockquote>\n<p><strong>DOM</strong>用来描述文档树，与JavaScript连接起来。它是前端编程中使用最频繁的接口合集，涵盖了文档属性、节点管理、事件，难以一一列举。</p>\n"},{"title":"Web API - EyeDropper","date":"2024-03-12T01:04:35.000Z","url":"web-api-EyeDropper_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/84](https://github.com/taoliujun/blog/issues/84)\n\n<!--hexo\n\n---\nurl: web-api-EyeDropper_API\ntags:\n  - webapi\n  - EyeDropper\n---\n\n-->\n\n# EyeDropper\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API\n\n**EyeDropper**提供了颜色吸管工具。\n\n## 接口\n\n### EyeDropper\n\n颜色吸管接口，包含了`open`方法。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/EyeDropper_API/index.html\n\n\n\n\n","source":"_posts/web-api-EyeDropper_API.md","raw":"---\ntitle: \"Web API - EyeDropper\"\ndate: \"2024-03-12T09:04:35Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-EyeDropper_API\ntags:\n  - webapi\n  - EyeDropper\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/84](https://github.com/taoliujun/blog/issues/84)\n\n<!--hexo\n\n---\nurl: web-api-EyeDropper_API\ntags:\n  - webapi\n  - EyeDropper\n---\n\n-->\n\n# EyeDropper\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API\n\n**EyeDropper**提供了颜色吸管工具。\n\n## 接口\n\n### EyeDropper\n\n颜色吸管接口，包含了`open`方法。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/EyeDropper_API/index.html\n\n\n\n\n","slug":"web-api-EyeDropper_API","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcotb003ehdomfaifa9wy","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/84\">https://github.com/taoliujun/blog/issues/84</a></p>\n<!--hexo\n\n---\nurl: web-api-EyeDropper_API\ntags:\n  - webapi\n  - EyeDropper\n---\n\n-->\n\n<h1 id=\"EyeDropper\"><a href=\"#EyeDropper\" class=\"headerlink\" title=\"EyeDropper\"></a>EyeDropper</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API\">https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API</a></p>\n</blockquote>\n<p><strong>EyeDropper</strong>提供了颜色吸管工具。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"EyeDropper-1\"><a href=\"#EyeDropper-1\" class=\"headerlink\" title=\"EyeDropper\"></a>EyeDropper</h3><p>颜色吸管接口，包含了<code>open</code>方法。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/EyeDropper_API/index.html\">https://taoliujun.github.io/example/web-api/EyeDropper_API/index.html</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/84\">https://github.com/taoliujun/blog/issues/84</a></p>\n<!--hexo\n\n---\nurl: web-api-EyeDropper_API\ntags:\n  - webapi\n  - EyeDropper\n---\n\n-->\n\n<h1 id=\"EyeDropper\"><a href=\"#EyeDropper\" class=\"headerlink\" title=\"EyeDropper\"></a>EyeDropper</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API\">https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API</a></p>\n</blockquote>\n<p><strong>EyeDropper</strong>提供了颜色吸管工具。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"EyeDropper-1\"><a href=\"#EyeDropper-1\" class=\"headerlink\" title=\"EyeDropper\"></a>EyeDropper</h3><p>颜色吸管接口，包含了<code>open</code>方法。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/EyeDropper_API/index.html\">https://taoliujun.github.io/example/web-api/EyeDropper_API/index.html</a></p>\n"},{"title":"Web API - Document Picture-in-Picture","date":"2024-03-11T23:10:35.000Z","url":"web-api-Document_Picture-in-Picture_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/82](https://github.com/taoliujun/blog/issues/82)\n\n<!--hexo\n\n---\nurl: web-api-Document_Picture-in-Picture_API\ntags:\n  - webapi\n  - Document Picture-in-Picture\n---\n\n-->\n\n# Document Picture-in-Picture\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API\n\n**Document Picture-in-Picture**画中画用于在窗口中再开一个悬浮的窗口，视频悬浮在右下角就是典型的画中画，它有几点特性：\n\n-   不同于frame，它始终悬浮在最上层。\n-   随着主窗口关闭而自动销毁。\n-   没有导航特性。\n-   和主窗口没有任何干扰。\n\n## 接口\n\n### DocumentPictureInPicture\n\n它包含了`window`属性，和`requestWindow()`方法。\n\n### DocumentPictureInPictureEvent\n\n相关事件。\n\n## 方法和属性\n\n### Window.documentPictureInPicture\n\n返回`DocumentPictureInPicture`接口实例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Document_Picture-in-Picture_API/index.html\n\n\n\n\n","source":"_posts/web-api-Document_Picture-in-Picture_API.md","raw":"---\ntitle: \"Web API - Document Picture-in-Picture\"\ndate: \"2024-03-12T07:10:35Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-Document_Picture-in-Picture_API\ntags:\n  - webapi\n  - Document Picture-in-Picture\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/82](https://github.com/taoliujun/blog/issues/82)\n\n<!--hexo\n\n---\nurl: web-api-Document_Picture-in-Picture_API\ntags:\n  - webapi\n  - Document Picture-in-Picture\n---\n\n-->\n\n# Document Picture-in-Picture\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API\n\n**Document Picture-in-Picture**画中画用于在窗口中再开一个悬浮的窗口，视频悬浮在右下角就是典型的画中画，它有几点特性：\n\n-   不同于frame，它始终悬浮在最上层。\n-   随着主窗口关闭而自动销毁。\n-   没有导航特性。\n-   和主窗口没有任何干扰。\n\n## 接口\n\n### DocumentPictureInPicture\n\n它包含了`window`属性，和`requestWindow()`方法。\n\n### DocumentPictureInPictureEvent\n\n相关事件。\n\n## 方法和属性\n\n### Window.documentPictureInPicture\n\n返回`DocumentPictureInPicture`接口实例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Document_Picture-in-Picture_API/index.html\n\n\n\n\n","slug":"web-api-Document_Picture-in-Picture_API","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcotc003hhdom667a3fi6","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/82\">https://github.com/taoliujun/blog/issues/82</a></p>\n<!--hexo\n\n---\nurl: web-api-Document_Picture-in-Picture_API\ntags:\n  - webapi\n  - Document Picture-in-Picture\n---\n\n-->\n\n<h1 id=\"Document-Picture-in-Picture\"><a href=\"#Document-Picture-in-Picture\" class=\"headerlink\" title=\"Document Picture-in-Picture\"></a>Document Picture-in-Picture</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API\">https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API</a></p>\n</blockquote>\n<p><strong>Document Picture-in-Picture</strong>画中画用于在窗口中再开一个悬浮的窗口，视频悬浮在右下角就是典型的画中画，它有几点特性：</p>\n<ul>\n<li>不同于frame，它始终悬浮在最上层。</li>\n<li>随着主窗口关闭而自动销毁。</li>\n<li>没有导航特性。</li>\n<li>和主窗口没有任何干扰。</li>\n</ul>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"DocumentPictureInPicture\"><a href=\"#DocumentPictureInPicture\" class=\"headerlink\" title=\"DocumentPictureInPicture\"></a>DocumentPictureInPicture</h3><p>它包含了<code>window</code>属性，和<code>requestWindow()</code>方法。</p>\n<h3 id=\"DocumentPictureInPictureEvent\"><a href=\"#DocumentPictureInPictureEvent\" class=\"headerlink\" title=\"DocumentPictureInPictureEvent\"></a>DocumentPictureInPictureEvent</h3><p>相关事件。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"Window-documentPictureInPicture\"><a href=\"#Window-documentPictureInPicture\" class=\"headerlink\" title=\"Window.documentPictureInPicture\"></a>Window.documentPictureInPicture</h3><p>返回<code>DocumentPictureInPicture</code>接口实例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Document_Picture-in-Picture_API/index.html\">https://taoliujun.github.io/example/web-api/Document_Picture-in-Picture_API/index.html</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/82\">https://github.com/taoliujun/blog/issues/82</a></p>\n<!--hexo\n\n---\nurl: web-api-Document_Picture-in-Picture_API\ntags:\n  - webapi\n  - Document Picture-in-Picture\n---\n\n-->\n\n<h1 id=\"Document-Picture-in-Picture\"><a href=\"#Document-Picture-in-Picture\" class=\"headerlink\" title=\"Document Picture-in-Picture\"></a>Document Picture-in-Picture</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API\">https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API</a></p>\n</blockquote>\n<p><strong>Document Picture-in-Picture</strong>画中画用于在窗口中再开一个悬浮的窗口，视频悬浮在右下角就是典型的画中画，它有几点特性：</p>\n<ul>\n<li>不同于frame，它始终悬浮在最上层。</li>\n<li>随着主窗口关闭而自动销毁。</li>\n<li>没有导航特性。</li>\n<li>和主窗口没有任何干扰。</li>\n</ul>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"DocumentPictureInPicture\"><a href=\"#DocumentPictureInPicture\" class=\"headerlink\" title=\"DocumentPictureInPicture\"></a>DocumentPictureInPicture</h3><p>它包含了<code>window</code>属性，和<code>requestWindow()</code>方法。</p>\n<h3 id=\"DocumentPictureInPictureEvent\"><a href=\"#DocumentPictureInPictureEvent\" class=\"headerlink\" title=\"DocumentPictureInPictureEvent\"></a>DocumentPictureInPictureEvent</h3><p>相关事件。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"Window-documentPictureInPicture\"><a href=\"#Window-documentPictureInPicture\" class=\"headerlink\" title=\"Window.documentPictureInPicture\"></a>Window.documentPictureInPicture</h3><p>返回<code>DocumentPictureInPicture</code>接口实例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Document_Picture-in-Picture_API/index.html\">https://taoliujun.github.io/example/web-api/Document_Picture-in-Picture_API/index.html</a></p>\n"},{"title":"Web API - File","date":"2024-03-12T18:32:04.000Z","url":"web-api-File_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/85](https://github.com/taoliujun/blog/issues/85)\n\n<!--hexo\n\n---\nurl: web-api-File_API\ntags:\n  - webapi\n  - File\n---\n\n-->\n\n# File\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/File_API\n\n**File**用于读取用户通过`<input type=\"file\"/>`选择、或`DataTransfer`拖拽的文件。\n\n## 接口\n\n### Blob\n\n文件的原始数据接口，可以用`text`、`stream`方法处理成文本或二进制流。\n\n### File\n\n文件接口。包含文件信息`size`、`type`等，还包含了`Blob`原始数据。\n\n### FileList\n\nFile list。\n\n### FileReader\n\n读取文件的接口，包含`readAsDataURL`、`readAsText`等方法来读取文件，通过`errer`、`load`、`progress`等事件监听读取结果，结果中包含了`result`、`reayState`等信息。\n\n### FileReaderSync\n\nFileReader的同步版本。\n\n## 属性和方法\n\n### URL.createObjectURL\n\n将`File`或`Blob`转成url字符串。\n\n### URL.revokeObjectURL\n\n将url字符串转成`Blob`对象。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/File_API/index.html\n\n1. 读取文件，并渲染到图片元素中。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/0f794817-4be3-4500-b9dd-b626043bc180)\n\n\n\n\n","source":"_posts/web-api-File_API.md","raw":"---\ntitle: \"Web API - File\"\ndate: \"2024-03-13T02:32:04Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-File_API\ntags:\n  - webapi\n  - File\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/85](https://github.com/taoliujun/blog/issues/85)\n\n<!--hexo\n\n---\nurl: web-api-File_API\ntags:\n  - webapi\n  - File\n---\n\n-->\n\n# File\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/File_API\n\n**File**用于读取用户通过`<input type=\"file\"/>`选择、或`DataTransfer`拖拽的文件。\n\n## 接口\n\n### Blob\n\n文件的原始数据接口，可以用`text`、`stream`方法处理成文本或二进制流。\n\n### File\n\n文件接口。包含文件信息`size`、`type`等，还包含了`Blob`原始数据。\n\n### FileList\n\nFile list。\n\n### FileReader\n\n读取文件的接口，包含`readAsDataURL`、`readAsText`等方法来读取文件，通过`errer`、`load`、`progress`等事件监听读取结果，结果中包含了`result`、`reayState`等信息。\n\n### FileReaderSync\n\nFileReader的同步版本。\n\n## 属性和方法\n\n### URL.createObjectURL\n\n将`File`或`Blob`转成url字符串。\n\n### URL.revokeObjectURL\n\n将url字符串转成`Blob`对象。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/File_API/index.html\n\n1. 读取文件，并渲染到图片元素中。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/0f794817-4be3-4500-b9dd-b626043bc180)\n\n\n\n\n","slug":"web-api-File_API","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcotd003lhdomb8d2e0aq","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/85\">https://github.com/taoliujun/blog/issues/85</a></p>\n<!--hexo\n\n---\nurl: web-api-File_API\ntags:\n  - webapi\n  - File\n---\n\n-->\n\n<h1 id=\"File\"><a href=\"#File\" class=\"headerlink\" title=\"File\"></a>File</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_API\">https://developer.mozilla.org/en-US/docs/Web/API/File_API</a></p>\n</blockquote>\n<p><strong>File</strong>用于读取用户通过<code>&lt;input type=&quot;file&quot;/&gt;</code>选择、或<code>DataTransfer</code>拖拽的文件。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Blob\"><a href=\"#Blob\" class=\"headerlink\" title=\"Blob\"></a>Blob</h3><p>文件的原始数据接口，可以用<code>text</code>、<code>stream</code>方法处理成文本或二进制流。</p>\n<h3 id=\"File-1\"><a href=\"#File-1\" class=\"headerlink\" title=\"File\"></a>File</h3><p>文件接口。包含文件信息<code>size</code>、<code>type</code>等，还包含了<code>Blob</code>原始数据。</p>\n<h3 id=\"FileList\"><a href=\"#FileList\" class=\"headerlink\" title=\"FileList\"></a>FileList</h3><p>File list。</p>\n<h3 id=\"FileReader\"><a href=\"#FileReader\" class=\"headerlink\" title=\"FileReader\"></a>FileReader</h3><p>读取文件的接口，包含<code>readAsDataURL</code>、<code>readAsText</code>等方法来读取文件，通过<code>errer</code>、<code>load</code>、<code>progress</code>等事件监听读取结果，结果中包含了<code>result</code>、<code>reayState</code>等信息。</p>\n<h3 id=\"FileReaderSync\"><a href=\"#FileReaderSync\" class=\"headerlink\" title=\"FileReaderSync\"></a>FileReaderSync</h3><p>FileReader的同步版本。</p>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"URL-createObjectURL\"><a href=\"#URL-createObjectURL\" class=\"headerlink\" title=\"URL.createObjectURL\"></a>URL.createObjectURL</h3><p>将<code>File</code>或<code>Blob</code>转成url字符串。</p>\n<h3 id=\"URL-revokeObjectURL\"><a href=\"#URL-revokeObjectURL\" class=\"headerlink\" title=\"URL.revokeObjectURL\"></a>URL.revokeObjectURL</h3><p>将url字符串转成<code>Blob</code>对象。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/File_API/index.html\">https://taoliujun.github.io/example/web-api/File_API/index.html</a></p>\n<ol>\n<li>读取文件，并渲染到图片元素中。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/0f794817-4be3-4500-b9dd-b626043bc180\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/85\">https://github.com/taoliujun/blog/issues/85</a></p>\n<!--hexo\n\n---\nurl: web-api-File_API\ntags:\n  - webapi\n  - File\n---\n\n-->\n\n<h1 id=\"File\"><a href=\"#File\" class=\"headerlink\" title=\"File\"></a>File</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_API\">https://developer.mozilla.org/en-US/docs/Web/API/File_API</a></p>\n</blockquote>\n<p><strong>File</strong>用于读取用户通过<code>&lt;input type=&quot;file&quot;/&gt;</code>选择、或<code>DataTransfer</code>拖拽的文件。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Blob\"><a href=\"#Blob\" class=\"headerlink\" title=\"Blob\"></a>Blob</h3><p>文件的原始数据接口，可以用<code>text</code>、<code>stream</code>方法处理成文本或二进制流。</p>\n<h3 id=\"File-1\"><a href=\"#File-1\" class=\"headerlink\" title=\"File\"></a>File</h3><p>文件接口。包含文件信息<code>size</code>、<code>type</code>等，还包含了<code>Blob</code>原始数据。</p>\n<h3 id=\"FileList\"><a href=\"#FileList\" class=\"headerlink\" title=\"FileList\"></a>FileList</h3><p>File list。</p>\n<h3 id=\"FileReader\"><a href=\"#FileReader\" class=\"headerlink\" title=\"FileReader\"></a>FileReader</h3><p>读取文件的接口，包含<code>readAsDataURL</code>、<code>readAsText</code>等方法来读取文件，通过<code>errer</code>、<code>load</code>、<code>progress</code>等事件监听读取结果，结果中包含了<code>result</code>、<code>reayState</code>等信息。</p>\n<h3 id=\"FileReaderSync\"><a href=\"#FileReaderSync\" class=\"headerlink\" title=\"FileReaderSync\"></a>FileReaderSync</h3><p>FileReader的同步版本。</p>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"URL-createObjectURL\"><a href=\"#URL-createObjectURL\" class=\"headerlink\" title=\"URL.createObjectURL\"></a>URL.createObjectURL</h3><p>将<code>File</code>或<code>Blob</code>转成url字符串。</p>\n<h3 id=\"URL-revokeObjectURL\"><a href=\"#URL-revokeObjectURL\" class=\"headerlink\" title=\"URL.revokeObjectURL\"></a>URL.revokeObjectURL</h3><p>将url字符串转成<code>Blob</code>对象。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/File_API/index.html\">https://taoliujun.github.io/example/web-api/File_API/index.html</a></p>\n<ol>\n<li>读取文件，并渲染到图片元素中。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/0f794817-4be3-4500-b9dd-b626043bc180\" alt=\"image\"></p>\n"},{"title":"Web API - Fullscreen","date":"2024-03-14T19:03:59.000Z","url":"web-api-Fullscreen_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/87](https://github.com/taoliujun/blog/issues/87)\n\n<!--hexo\n\n---\nurl: web-api-Fullscreen_API\ntags:\n  - webapi\n  - Fullscreen\n---\n\n-->\n\n# Fullscreen\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API\n\n**Fullscreen**可设置元素全屏，或退出全屏。\n\n> 全屏元素只能有一个。\n\n## 接口\n\n无。\n\n## 属性和方法\n\n### Document.fullscreenElement\n\n返回当前进入全屏的元素节点。\n\n### Element.requestFullscreen()\n\n将节点进入全屏。\n\n### Document.exitFullscreen()\n\n退出全屏。\n\n## 事件\n\n### fullscreenchange\n\n全屏状态变化的事件，在事件回调中，访问`Document.fullscreenElement`可判断是否处于全屏状态。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Fullscreen_API/index.html\n\n\n\n\n","source":"_posts/web-api-Fullscreen_API.md","raw":"---\ntitle: \"Web API - Fullscreen\"\ndate: \"2024-03-15T03:03:59Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-Fullscreen_API\ntags:\n  - webapi\n  - Fullscreen\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/87](https://github.com/taoliujun/blog/issues/87)\n\n<!--hexo\n\n---\nurl: web-api-Fullscreen_API\ntags:\n  - webapi\n  - Fullscreen\n---\n\n-->\n\n# Fullscreen\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API\n\n**Fullscreen**可设置元素全屏，或退出全屏。\n\n> 全屏元素只能有一个。\n\n## 接口\n\n无。\n\n## 属性和方法\n\n### Document.fullscreenElement\n\n返回当前进入全屏的元素节点。\n\n### Element.requestFullscreen()\n\n将节点进入全屏。\n\n### Document.exitFullscreen()\n\n退出全屏。\n\n## 事件\n\n### fullscreenchange\n\n全屏状态变化的事件，在事件回调中，访问`Document.fullscreenElement`可判断是否处于全屏状态。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Fullscreen_API/index.html\n\n\n\n\n","slug":"web-api-Fullscreen_API","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcotd003ohdom3zwt5zr6","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/87\">https://github.com/taoliujun/blog/issues/87</a></p>\n<!--hexo\n\n---\nurl: web-api-Fullscreen_API\ntags:\n  - webapi\n  - Fullscreen\n---\n\n-->\n\n<h1 id=\"Fullscreen\"><a href=\"#Fullscreen\" class=\"headerlink\" title=\"Fullscreen\"></a>Fullscreen</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API\">https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API</a></p>\n</blockquote>\n<p><strong>Fullscreen</strong>可设置元素全屏，或退出全屏。</p>\n<blockquote>\n<p>全屏元素只能有一个。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><p>无。</p>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"Document-fullscreenElement\"><a href=\"#Document-fullscreenElement\" class=\"headerlink\" title=\"Document.fullscreenElement\"></a>Document.fullscreenElement</h3><p>返回当前进入全屏的元素节点。</p>\n<h3 id=\"Element-requestFullscreen\"><a href=\"#Element-requestFullscreen\" class=\"headerlink\" title=\"Element.requestFullscreen()\"></a>Element.requestFullscreen()</h3><p>将节点进入全屏。</p>\n<h3 id=\"Document-exitFullscreen\"><a href=\"#Document-exitFullscreen\" class=\"headerlink\" title=\"Document.exitFullscreen()\"></a>Document.exitFullscreen()</h3><p>退出全屏。</p>\n<h2 id=\"事件\"><a href=\"#事件\" class=\"headerlink\" title=\"事件\"></a>事件</h2><h3 id=\"fullscreenchange\"><a href=\"#fullscreenchange\" class=\"headerlink\" title=\"fullscreenchange\"></a>fullscreenchange</h3><p>全屏状态变化的事件，在事件回调中，访问<code>Document.fullscreenElement</code>可判断是否处于全屏状态。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Fullscreen_API/index.html\">https://taoliujun.github.io/example/web-api/Fullscreen_API/index.html</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/87\">https://github.com/taoliujun/blog/issues/87</a></p>\n<!--hexo\n\n---\nurl: web-api-Fullscreen_API\ntags:\n  - webapi\n  - Fullscreen\n---\n\n-->\n\n<h1 id=\"Fullscreen\"><a href=\"#Fullscreen\" class=\"headerlink\" title=\"Fullscreen\"></a>Fullscreen</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API\">https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API</a></p>\n</blockquote>\n<p><strong>Fullscreen</strong>可设置元素全屏，或退出全屏。</p>\n<blockquote>\n<p>全屏元素只能有一个。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><p>无。</p>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"Document-fullscreenElement\"><a href=\"#Document-fullscreenElement\" class=\"headerlink\" title=\"Document.fullscreenElement\"></a>Document.fullscreenElement</h3><p>返回当前进入全屏的元素节点。</p>\n<h3 id=\"Element-requestFullscreen\"><a href=\"#Element-requestFullscreen\" class=\"headerlink\" title=\"Element.requestFullscreen()\"></a>Element.requestFullscreen()</h3><p>将节点进入全屏。</p>\n<h3 id=\"Document-exitFullscreen\"><a href=\"#Document-exitFullscreen\" class=\"headerlink\" title=\"Document.exitFullscreen()\"></a>Document.exitFullscreen()</h3><p>退出全屏。</p>\n<h2 id=\"事件\"><a href=\"#事件\" class=\"headerlink\" title=\"事件\"></a>事件</h2><h3 id=\"fullscreenchange\"><a href=\"#fullscreenchange\" class=\"headerlink\" title=\"fullscreenchange\"></a>fullscreenchange</h3><p>全屏状态变化的事件，在事件回调中，访问<code>Document.fullscreenElement</code>可判断是否处于全屏状态。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Fullscreen_API/index.html\">https://taoliujun.github.io/example/web-api/Fullscreen_API/index.html</a></p>\n"},{"title":"Web API - File System","date":"2024-03-12T23:07:49.000Z","url":"web-api-File_System_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/86](https://github.com/taoliujun/blog/issues/86)\n\n<!--hexo\n\n---\nurl: web-api-File_System_API\ntags:\n  - webapi\n  - File System\n---\n\n-->\n\n# File System\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/File_System_API\n\n**File System**可读取、写入用户选择的文件、目录。\n\n> 和`File`的交互有所不同，本API不依赖`<input type=\"file\" />`元素。\n\n## OPFS(origin private file system) Concept\n\n以往，只能读取、写入用户手动选择的文件或目录，这是安全性上必须考虑的。但如果要批量写入很多文件，这些交互操作会频繁且耗时。OPFS提供了新的可能性，允许在私有域文件系统中直接操作文件，这个文件系统和用户的文件系统是隔离的，用户看不到它，它也不能访问用户的文件系统。\n\n对于用户选择的文件，也可以通过`createSyncAccessHandle()`授权为`OPFS`。\n\n-   OPFS在Web Worker中运行。\n-   OPFS就像是`Storage`、`IndexedDB`。\n-   清空浏览器的Storage，也会清除掉OPFS。\n\n## 接口\n\n### FileSystemHandle\n\n文件系统的基本接口，开发者不直接使用它。文件和目录的访问接口均继承于此。其中一部分属性、方法：\n\n-   `kind`，文件类型是file或directory。\n-   `name`，文件名。\n-   `queryPermission()`，查询操作的授权。\n-   `requestPermission()`，请求操作的授权。\n\n### FileSystemFileHandle\n\n访问文件的接口。除继承`FileSystemHandle`的属性方法，还有：\n\n-   `getFile()`，获取到文件对象。\n-   `createWritable()`，请求写入权限，返回`FileSystemWritableFileStream`。\n-   `createSyncAccessHandle()`，返回当前文件句柄的OPFS。\n\n### FileSystemDirectoryHandle\n\n访问目录的接口。除继承`FileSystemHandle`的属性方法，还有：\n\n-   `getDirectoryHandle()`，获取到指定名称的子目录对象。\n-   `getFileHandle()`，获取指定名称的文件对象。\n-   `removeEntry()`，移除指定名称的子目录或文件。\n-   迭代器`entries`、`keys`、`values`用于遍历目录内的条目。\n\n### FileSystemSyncAccessHandle\n\n访问OPFS的接口。部分属性方法有：\n\n-   `close`，释放句柄，禁止继续操作。\n-   `flush`，将写入的数据，保存到磁盘里。\n-   `write`，写入数据。\n-   `read`，读取数据。\n\n### FileSystemWritableFileStream\n\n写入文件的接口。部分属性方法有：\n\n-   `write`，写入数据。\n-   `close`，关闭且保存到磁盘。\n\n## 属性和方法\n\n### window.showOpenFilePicker(options)\n\n选择可读取文件的对话框，返回`FileSystemFileHandle`。\n\n入参支持多选文件、目录入口、目录定位、类型筛选等。\n\n### window.showSaveFilePicker()\n\n选择可写入文件的对话框，返回`FileSystemFileHandle`。该接口实例已经拥有了写入权限。\n\n### window.showDirectoryPicker()\n\n选择可读取目录的对话框，返回`FileSystemDirectoryHandle`。\n\n### DataTransferItem.getAsFileSystemHandle()\n\n拖拽文件或目录，返回`FileSystemFileHandle`或`FileSystemDirectoryHandle`。\n\n### StorageManager.getDirectory()\n\n通过`navigator.storage.getDirectory()`返回`OPFS`。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/File_System_API/index.html\n\n\n\n\n","source":"_posts/web-api-File_System_API.md","raw":"---\ntitle: \"Web API - File System\"\ndate: \"2024-03-13T07:07:49Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-File_System_API\ntags:\n  - webapi\n  - File System\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/86](https://github.com/taoliujun/blog/issues/86)\n\n<!--hexo\n\n---\nurl: web-api-File_System_API\ntags:\n  - webapi\n  - File System\n---\n\n-->\n\n# File System\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/File_System_API\n\n**File System**可读取、写入用户选择的文件、目录。\n\n> 和`File`的交互有所不同，本API不依赖`<input type=\"file\" />`元素。\n\n## OPFS(origin private file system) Concept\n\n以往，只能读取、写入用户手动选择的文件或目录，这是安全性上必须考虑的。但如果要批量写入很多文件，这些交互操作会频繁且耗时。OPFS提供了新的可能性，允许在私有域文件系统中直接操作文件，这个文件系统和用户的文件系统是隔离的，用户看不到它，它也不能访问用户的文件系统。\n\n对于用户选择的文件，也可以通过`createSyncAccessHandle()`授权为`OPFS`。\n\n-   OPFS在Web Worker中运行。\n-   OPFS就像是`Storage`、`IndexedDB`。\n-   清空浏览器的Storage，也会清除掉OPFS。\n\n## 接口\n\n### FileSystemHandle\n\n文件系统的基本接口，开发者不直接使用它。文件和目录的访问接口均继承于此。其中一部分属性、方法：\n\n-   `kind`，文件类型是file或directory。\n-   `name`，文件名。\n-   `queryPermission()`，查询操作的授权。\n-   `requestPermission()`，请求操作的授权。\n\n### FileSystemFileHandle\n\n访问文件的接口。除继承`FileSystemHandle`的属性方法，还有：\n\n-   `getFile()`，获取到文件对象。\n-   `createWritable()`，请求写入权限，返回`FileSystemWritableFileStream`。\n-   `createSyncAccessHandle()`，返回当前文件句柄的OPFS。\n\n### FileSystemDirectoryHandle\n\n访问目录的接口。除继承`FileSystemHandle`的属性方法，还有：\n\n-   `getDirectoryHandle()`，获取到指定名称的子目录对象。\n-   `getFileHandle()`，获取指定名称的文件对象。\n-   `removeEntry()`，移除指定名称的子目录或文件。\n-   迭代器`entries`、`keys`、`values`用于遍历目录内的条目。\n\n### FileSystemSyncAccessHandle\n\n访问OPFS的接口。部分属性方法有：\n\n-   `close`，释放句柄，禁止继续操作。\n-   `flush`，将写入的数据，保存到磁盘里。\n-   `write`，写入数据。\n-   `read`，读取数据。\n\n### FileSystemWritableFileStream\n\n写入文件的接口。部分属性方法有：\n\n-   `write`，写入数据。\n-   `close`，关闭且保存到磁盘。\n\n## 属性和方法\n\n### window.showOpenFilePicker(options)\n\n选择可读取文件的对话框，返回`FileSystemFileHandle`。\n\n入参支持多选文件、目录入口、目录定位、类型筛选等。\n\n### window.showSaveFilePicker()\n\n选择可写入文件的对话框，返回`FileSystemFileHandle`。该接口实例已经拥有了写入权限。\n\n### window.showDirectoryPicker()\n\n选择可读取目录的对话框，返回`FileSystemDirectoryHandle`。\n\n### DataTransferItem.getAsFileSystemHandle()\n\n拖拽文件或目录，返回`FileSystemFileHandle`或`FileSystemDirectoryHandle`。\n\n### StorageManager.getDirectory()\n\n通过`navigator.storage.getDirectory()`返回`OPFS`。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/File_System_API/index.html\n\n\n\n\n","slug":"web-api-File_System_API","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcote003shdome8sb3ufc","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/86\">https://github.com/taoliujun/blog/issues/86</a></p>\n<!--hexo\n\n---\nurl: web-api-File_System_API\ntags:\n  - webapi\n  - File System\n---\n\n-->\n\n<h1 id=\"File-System\"><a href=\"#File-System\" class=\"headerlink\" title=\"File System\"></a>File System</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_System_API\">https://developer.mozilla.org/en-US/docs/Web/API/File_System_API</a></p>\n</blockquote>\n<p><strong>File System</strong>可读取、写入用户选择的文件、目录。</p>\n<blockquote>\n<p>和<code>File</code>的交互有所不同，本API不依赖<code>&lt;input type=&quot;file&quot; /&gt;</code>元素。</p>\n</blockquote>\n<h2 id=\"OPFS-origin-private-file-system-Concept\"><a href=\"#OPFS-origin-private-file-system-Concept\" class=\"headerlink\" title=\"OPFS(origin private file system) Concept\"></a>OPFS(origin private file system) Concept</h2><p>以往，只能读取、写入用户手动选择的文件或目录，这是安全性上必须考虑的。但如果要批量写入很多文件，这些交互操作会频繁且耗时。OPFS提供了新的可能性，允许在私有域文件系统中直接操作文件，这个文件系统和用户的文件系统是隔离的，用户看不到它，它也不能访问用户的文件系统。</p>\n<p>对于用户选择的文件，也可以通过<code>createSyncAccessHandle()</code>授权为<code>OPFS</code>。</p>\n<ul>\n<li>OPFS在Web Worker中运行。</li>\n<li>OPFS就像是<code>Storage</code>、<code>IndexedDB</code>。</li>\n<li>清空浏览器的Storage，也会清除掉OPFS。</li>\n</ul>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"FileSystemHandle\"><a href=\"#FileSystemHandle\" class=\"headerlink\" title=\"FileSystemHandle\"></a>FileSystemHandle</h3><p>文件系统的基本接口，开发者不直接使用它。文件和目录的访问接口均继承于此。其中一部分属性、方法：</p>\n<ul>\n<li><code>kind</code>，文件类型是file或directory。</li>\n<li><code>name</code>，文件名。</li>\n<li><code>queryPermission()</code>，查询操作的授权。</li>\n<li><code>requestPermission()</code>，请求操作的授权。</li>\n</ul>\n<h3 id=\"FileSystemFileHandle\"><a href=\"#FileSystemFileHandle\" class=\"headerlink\" title=\"FileSystemFileHandle\"></a>FileSystemFileHandle</h3><p>访问文件的接口。除继承<code>FileSystemHandle</code>的属性方法，还有：</p>\n<ul>\n<li><code>getFile()</code>，获取到文件对象。</li>\n<li><code>createWritable()</code>，请求写入权限，返回<code>FileSystemWritableFileStream</code>。</li>\n<li><code>createSyncAccessHandle()</code>，返回当前文件句柄的OPFS。</li>\n</ul>\n<h3 id=\"FileSystemDirectoryHandle\"><a href=\"#FileSystemDirectoryHandle\" class=\"headerlink\" title=\"FileSystemDirectoryHandle\"></a>FileSystemDirectoryHandle</h3><p>访问目录的接口。除继承<code>FileSystemHandle</code>的属性方法，还有：</p>\n<ul>\n<li><code>getDirectoryHandle()</code>，获取到指定名称的子目录对象。</li>\n<li><code>getFileHandle()</code>，获取指定名称的文件对象。</li>\n<li><code>removeEntry()</code>，移除指定名称的子目录或文件。</li>\n<li>迭代器<code>entries</code>、<code>keys</code>、<code>values</code>用于遍历目录内的条目。</li>\n</ul>\n<h3 id=\"FileSystemSyncAccessHandle\"><a href=\"#FileSystemSyncAccessHandle\" class=\"headerlink\" title=\"FileSystemSyncAccessHandle\"></a>FileSystemSyncAccessHandle</h3><p>访问OPFS的接口。部分属性方法有：</p>\n<ul>\n<li><code>close</code>，释放句柄，禁止继续操作。</li>\n<li><code>flush</code>，将写入的数据，保存到磁盘里。</li>\n<li><code>write</code>，写入数据。</li>\n<li><code>read</code>，读取数据。</li>\n</ul>\n<h3 id=\"FileSystemWritableFileStream\"><a href=\"#FileSystemWritableFileStream\" class=\"headerlink\" title=\"FileSystemWritableFileStream\"></a>FileSystemWritableFileStream</h3><p>写入文件的接口。部分属性方法有：</p>\n<ul>\n<li><code>write</code>，写入数据。</li>\n<li><code>close</code>，关闭且保存到磁盘。</li>\n</ul>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"window-showOpenFilePicker-options\"><a href=\"#window-showOpenFilePicker-options\" class=\"headerlink\" title=\"window.showOpenFilePicker(options)\"></a>window.showOpenFilePicker(options)</h3><p>选择可读取文件的对话框，返回<code>FileSystemFileHandle</code>。</p>\n<p>入参支持多选文件、目录入口、目录定位、类型筛选等。</p>\n<h3 id=\"window-showSaveFilePicker\"><a href=\"#window-showSaveFilePicker\" class=\"headerlink\" title=\"window.showSaveFilePicker()\"></a>window.showSaveFilePicker()</h3><p>选择可写入文件的对话框，返回<code>FileSystemFileHandle</code>。该接口实例已经拥有了写入权限。</p>\n<h3 id=\"window-showDirectoryPicker\"><a href=\"#window-showDirectoryPicker\" class=\"headerlink\" title=\"window.showDirectoryPicker()\"></a>window.showDirectoryPicker()</h3><p>选择可读取目录的对话框，返回<code>FileSystemDirectoryHandle</code>。</p>\n<h3 id=\"DataTransferItem-getAsFileSystemHandle\"><a href=\"#DataTransferItem-getAsFileSystemHandle\" class=\"headerlink\" title=\"DataTransferItem.getAsFileSystemHandle()\"></a>DataTransferItem.getAsFileSystemHandle()</h3><p>拖拽文件或目录，返回<code>FileSystemFileHandle</code>或<code>FileSystemDirectoryHandle</code>。</p>\n<h3 id=\"StorageManager-getDirectory\"><a href=\"#StorageManager-getDirectory\" class=\"headerlink\" title=\"StorageManager.getDirectory()\"></a>StorageManager.getDirectory()</h3><p>通过<code>navigator.storage.getDirectory()</code>返回<code>OPFS</code>。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/File_System_API/index.html\">https://taoliujun.github.io/example/web-api/File_System_API/index.html</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/86\">https://github.com/taoliujun/blog/issues/86</a></p>\n<!--hexo\n\n---\nurl: web-api-File_System_API\ntags:\n  - webapi\n  - File System\n---\n\n-->\n\n<h1 id=\"File-System\"><a href=\"#File-System\" class=\"headerlink\" title=\"File System\"></a>File System</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_System_API\">https://developer.mozilla.org/en-US/docs/Web/API/File_System_API</a></p>\n</blockquote>\n<p><strong>File System</strong>可读取、写入用户选择的文件、目录。</p>\n<blockquote>\n<p>和<code>File</code>的交互有所不同，本API不依赖<code>&lt;input type=&quot;file&quot; /&gt;</code>元素。</p>\n</blockquote>\n<h2 id=\"OPFS-origin-private-file-system-Concept\"><a href=\"#OPFS-origin-private-file-system-Concept\" class=\"headerlink\" title=\"OPFS(origin private file system) Concept\"></a>OPFS(origin private file system) Concept</h2><p>以往，只能读取、写入用户手动选择的文件或目录，这是安全性上必须考虑的。但如果要批量写入很多文件，这些交互操作会频繁且耗时。OPFS提供了新的可能性，允许在私有域文件系统中直接操作文件，这个文件系统和用户的文件系统是隔离的，用户看不到它，它也不能访问用户的文件系统。</p>\n<p>对于用户选择的文件，也可以通过<code>createSyncAccessHandle()</code>授权为<code>OPFS</code>。</p>\n<ul>\n<li>OPFS在Web Worker中运行。</li>\n<li>OPFS就像是<code>Storage</code>、<code>IndexedDB</code>。</li>\n<li>清空浏览器的Storage，也会清除掉OPFS。</li>\n</ul>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"FileSystemHandle\"><a href=\"#FileSystemHandle\" class=\"headerlink\" title=\"FileSystemHandle\"></a>FileSystemHandle</h3><p>文件系统的基本接口，开发者不直接使用它。文件和目录的访问接口均继承于此。其中一部分属性、方法：</p>\n<ul>\n<li><code>kind</code>，文件类型是file或directory。</li>\n<li><code>name</code>，文件名。</li>\n<li><code>queryPermission()</code>，查询操作的授权。</li>\n<li><code>requestPermission()</code>，请求操作的授权。</li>\n</ul>\n<h3 id=\"FileSystemFileHandle\"><a href=\"#FileSystemFileHandle\" class=\"headerlink\" title=\"FileSystemFileHandle\"></a>FileSystemFileHandle</h3><p>访问文件的接口。除继承<code>FileSystemHandle</code>的属性方法，还有：</p>\n<ul>\n<li><code>getFile()</code>，获取到文件对象。</li>\n<li><code>createWritable()</code>，请求写入权限，返回<code>FileSystemWritableFileStream</code>。</li>\n<li><code>createSyncAccessHandle()</code>，返回当前文件句柄的OPFS。</li>\n</ul>\n<h3 id=\"FileSystemDirectoryHandle\"><a href=\"#FileSystemDirectoryHandle\" class=\"headerlink\" title=\"FileSystemDirectoryHandle\"></a>FileSystemDirectoryHandle</h3><p>访问目录的接口。除继承<code>FileSystemHandle</code>的属性方法，还有：</p>\n<ul>\n<li><code>getDirectoryHandle()</code>，获取到指定名称的子目录对象。</li>\n<li><code>getFileHandle()</code>，获取指定名称的文件对象。</li>\n<li><code>removeEntry()</code>，移除指定名称的子目录或文件。</li>\n<li>迭代器<code>entries</code>、<code>keys</code>、<code>values</code>用于遍历目录内的条目。</li>\n</ul>\n<h3 id=\"FileSystemSyncAccessHandle\"><a href=\"#FileSystemSyncAccessHandle\" class=\"headerlink\" title=\"FileSystemSyncAccessHandle\"></a>FileSystemSyncAccessHandle</h3><p>访问OPFS的接口。部分属性方法有：</p>\n<ul>\n<li><code>close</code>，释放句柄，禁止继续操作。</li>\n<li><code>flush</code>，将写入的数据，保存到磁盘里。</li>\n<li><code>write</code>，写入数据。</li>\n<li><code>read</code>，读取数据。</li>\n</ul>\n<h3 id=\"FileSystemWritableFileStream\"><a href=\"#FileSystemWritableFileStream\" class=\"headerlink\" title=\"FileSystemWritableFileStream\"></a>FileSystemWritableFileStream</h3><p>写入文件的接口。部分属性方法有：</p>\n<ul>\n<li><code>write</code>，写入数据。</li>\n<li><code>close</code>，关闭且保存到磁盘。</li>\n</ul>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"window-showOpenFilePicker-options\"><a href=\"#window-showOpenFilePicker-options\" class=\"headerlink\" title=\"window.showOpenFilePicker(options)\"></a>window.showOpenFilePicker(options)</h3><p>选择可读取文件的对话框，返回<code>FileSystemFileHandle</code>。</p>\n<p>入参支持多选文件、目录入口、目录定位、类型筛选等。</p>\n<h3 id=\"window-showSaveFilePicker\"><a href=\"#window-showSaveFilePicker\" class=\"headerlink\" title=\"window.showSaveFilePicker()\"></a>window.showSaveFilePicker()</h3><p>选择可写入文件的对话框，返回<code>FileSystemFileHandle</code>。该接口实例已经拥有了写入权限。</p>\n<h3 id=\"window-showDirectoryPicker\"><a href=\"#window-showDirectoryPicker\" class=\"headerlink\" title=\"window.showDirectoryPicker()\"></a>window.showDirectoryPicker()</h3><p>选择可读取目录的对话框，返回<code>FileSystemDirectoryHandle</code>。</p>\n<h3 id=\"DataTransferItem-getAsFileSystemHandle\"><a href=\"#DataTransferItem-getAsFileSystemHandle\" class=\"headerlink\" title=\"DataTransferItem.getAsFileSystemHandle()\"></a>DataTransferItem.getAsFileSystemHandle()</h3><p>拖拽文件或目录，返回<code>FileSystemFileHandle</code>或<code>FileSystemDirectoryHandle</code>。</p>\n<h3 id=\"StorageManager-getDirectory\"><a href=\"#StorageManager-getDirectory\" class=\"headerlink\" title=\"StorageManager.getDirectory()\"></a>StorageManager.getDirectory()</h3><p>通过<code>navigator.storage.getDirectory()</code>返回<code>OPFS</code>。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/File_System_API/index.html\">https://taoliujun.github.io/example/web-api/File_System_API/index.html</a></p>\n"},{"title":"Web API - Geolocation","date":"2024-03-14T21:48:21.000Z","url":"web-api-Geolocation_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/88](https://github.com/taoliujun/blog/issues/88)\n\n<!--hexo\n\n---\nurl: web-api-Geolocation_API\ntags:\n  - webapi\n  - Geolocation\n---\n\n-->\n\n# Geolocation\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API\n\n**Geolocation**获取设备的地理位置信息，包括了纬度、经度、海拔、经纬度的精度范围（米）、海拔的精度范围（米），以及设备的面朝方位度数和速度。\n\n## 接口\n\n### Geolocation\n\n地理定位接口，提供了几个方法：\n\n-   `getCurrentPosition` 获取地理定位信息，返回`GeolocationPosition`。\n-   `watchPosition` 监听地理定位信息，返回`GeolocationPosition`。\n-   `clearWatch` 停止监听。\n\n### GeolocationCoordinates\n\n定位信息，包含经纬度等。\n\n### GeolocationPosition\n\n定位信息，包含`timestamp`和`GeolocationCoordinates`。\n\n### GeolocationPositionError\n\n定位异常信息，如用户拒绝，定位超时。\n\n## 属性和方法\n\n### Navigator.geolocation\n\n返回`Geolocation`。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Geolocation_API/index.html\n\n1. 打印位置信息。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/0eee3be8-2880-406a-acc9-0b5c50512fc8)\n\n\n\n\n","source":"_posts/web-api-Geolocation_API.md","raw":"---\ntitle: \"Web API - Geolocation\"\ndate: \"2024-03-15T05:48:21Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-Geolocation_API\ntags:\n  - webapi\n  - Geolocation\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/88](https://github.com/taoliujun/blog/issues/88)\n\n<!--hexo\n\n---\nurl: web-api-Geolocation_API\ntags:\n  - webapi\n  - Geolocation\n---\n\n-->\n\n# Geolocation\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API\n\n**Geolocation**获取设备的地理位置信息，包括了纬度、经度、海拔、经纬度的精度范围（米）、海拔的精度范围（米），以及设备的面朝方位度数和速度。\n\n## 接口\n\n### Geolocation\n\n地理定位接口，提供了几个方法：\n\n-   `getCurrentPosition` 获取地理定位信息，返回`GeolocationPosition`。\n-   `watchPosition` 监听地理定位信息，返回`GeolocationPosition`。\n-   `clearWatch` 停止监听。\n\n### GeolocationCoordinates\n\n定位信息，包含经纬度等。\n\n### GeolocationPosition\n\n定位信息，包含`timestamp`和`GeolocationCoordinates`。\n\n### GeolocationPositionError\n\n定位异常信息，如用户拒绝，定位超时。\n\n## 属性和方法\n\n### Navigator.geolocation\n\n返回`Geolocation`。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Geolocation_API/index.html\n\n1. 打印位置信息。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/0eee3be8-2880-406a-acc9-0b5c50512fc8)\n\n\n\n\n","slug":"web-api-Geolocation_API","published":1,"updated":"2024-03-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcotf003vhdom8v2hdcpc","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/88\">https://github.com/taoliujun/blog/issues/88</a></p>\n<!--hexo\n\n---\nurl: web-api-Geolocation_API\ntags:\n  - webapi\n  - Geolocation\n---\n\n-->\n\n<h1 id=\"Geolocation\"><a href=\"#Geolocation\" class=\"headerlink\" title=\"Geolocation\"></a>Geolocation</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API\">https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API</a></p>\n</blockquote>\n<p><strong>Geolocation</strong>获取设备的地理位置信息，包括了纬度、经度、海拔、经纬度的精度范围（米）、海拔的精度范围（米），以及设备的面朝方位度数和速度。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Geolocation-1\"><a href=\"#Geolocation-1\" class=\"headerlink\" title=\"Geolocation\"></a>Geolocation</h3><p>地理定位接口，提供了几个方法：</p>\n<ul>\n<li><code>getCurrentPosition</code> 获取地理定位信息，返回<code>GeolocationPosition</code>。</li>\n<li><code>watchPosition</code> 监听地理定位信息，返回<code>GeolocationPosition</code>。</li>\n<li><code>clearWatch</code> 停止监听。</li>\n</ul>\n<h3 id=\"GeolocationCoordinates\"><a href=\"#GeolocationCoordinates\" class=\"headerlink\" title=\"GeolocationCoordinates\"></a>GeolocationCoordinates</h3><p>定位信息，包含经纬度等。</p>\n<h3 id=\"GeolocationPosition\"><a href=\"#GeolocationPosition\" class=\"headerlink\" title=\"GeolocationPosition\"></a>GeolocationPosition</h3><p>定位信息，包含<code>timestamp</code>和<code>GeolocationCoordinates</code>。</p>\n<h3 id=\"GeolocationPositionError\"><a href=\"#GeolocationPositionError\" class=\"headerlink\" title=\"GeolocationPositionError\"></a>GeolocationPositionError</h3><p>定位异常信息，如用户拒绝，定位超时。</p>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"Navigator-geolocation\"><a href=\"#Navigator-geolocation\" class=\"headerlink\" title=\"Navigator.geolocation\"></a>Navigator.geolocation</h3><p>返回<code>Geolocation</code>。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Geolocation_API/index.html\">https://taoliujun.github.io/example/web-api/Geolocation_API/index.html</a></p>\n<ol>\n<li>打印位置信息。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/0eee3be8-2880-406a-acc9-0b5c50512fc8\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/88\">https://github.com/taoliujun/blog/issues/88</a></p>\n<!--hexo\n\n---\nurl: web-api-Geolocation_API\ntags:\n  - webapi\n  - Geolocation\n---\n\n-->\n\n<h1 id=\"Geolocation\"><a href=\"#Geolocation\" class=\"headerlink\" title=\"Geolocation\"></a>Geolocation</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API\">https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API</a></p>\n</blockquote>\n<p><strong>Geolocation</strong>获取设备的地理位置信息，包括了纬度、经度、海拔、经纬度的精度范围（米）、海拔的精度范围（米），以及设备的面朝方位度数和速度。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Geolocation-1\"><a href=\"#Geolocation-1\" class=\"headerlink\" title=\"Geolocation\"></a>Geolocation</h3><p>地理定位接口，提供了几个方法：</p>\n<ul>\n<li><code>getCurrentPosition</code> 获取地理定位信息，返回<code>GeolocationPosition</code>。</li>\n<li><code>watchPosition</code> 监听地理定位信息，返回<code>GeolocationPosition</code>。</li>\n<li><code>clearWatch</code> 停止监听。</li>\n</ul>\n<h3 id=\"GeolocationCoordinates\"><a href=\"#GeolocationCoordinates\" class=\"headerlink\" title=\"GeolocationCoordinates\"></a>GeolocationCoordinates</h3><p>定位信息，包含经纬度等。</p>\n<h3 id=\"GeolocationPosition\"><a href=\"#GeolocationPosition\" class=\"headerlink\" title=\"GeolocationPosition\"></a>GeolocationPosition</h3><p>定位信息，包含<code>timestamp</code>和<code>GeolocationCoordinates</code>。</p>\n<h3 id=\"GeolocationPositionError\"><a href=\"#GeolocationPositionError\" class=\"headerlink\" title=\"GeolocationPositionError\"></a>GeolocationPositionError</h3><p>定位异常信息，如用户拒绝，定位超时。</p>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"Navigator-geolocation\"><a href=\"#Navigator-geolocation\" class=\"headerlink\" title=\"Navigator.geolocation\"></a>Navigator.geolocation</h3><p>返回<code>Geolocation</code>。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Geolocation_API/index.html\">https://taoliujun.github.io/example/web-api/Geolocation_API/index.html</a></p>\n<ol>\n<li>打印位置信息。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/0eee3be8-2880-406a-acc9-0b5c50512fc8\" 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\n<!--hexo-->\n### A\n\n- [ ] [Audio Output Devices API](https://developer.mozilla.org/en-US/docs/Web/API/Audio_Output_Devices_API) 选择音频播放设备。*Experimental*\n\n### B\n\n- [ ] [Background Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Background_Fetch_API) 在后台下载大文件。*Experimental*\n- [ ] [Background Sync](https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API) 延迟任务以便在网络稳定时运行。*Experimental*\n- [x] #55，[Background Tasks](https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API) 利用空闲时间跑阻塞的任务。\n- [x] #50，[Badging API](https://developer.mozilla.org/en-US/docs/Web/API/Badging_API) 在web App中设置图标徽章。\n- [ ] [Barcode Detection API](https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API)，读取图片流中的条码、二维码。*Experimental*\n- [x] #58，[Battery API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API) 获取设备电池状态。\n- [x] #53，[Beacon](https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API) 发送无需响应的请求，保证浏览器关闭之前发送完毕。\n- [ ] [Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API) 连接蓝牙。*Experimental*\n- [x] #59，[Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API) 跨标签、窗口通信。\n\n### C\n\n- [ ] [CSS Counter Styles](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Counter_Styles) 为CSS定义计数器。\n- [x] #63，[CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API) 设置元素的高亮区域。\n- [x] #65，[CSS Font Loading API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API) 字体加载管理。\n- [ ] [CSS Painting API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API) 为CSS的背景等属性提供自定义的图片绘制。*Experimental*\n- [x] #67，[CSS Properties and Values API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API) 为CSS扩展属性，类似`CSS variables`。\n- [x] #69，[CSS Typed Object Model API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API) 提供了一系列访问和操作CSS值的方法。\n- [x] #71，[CSSOM](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model) 管理CSS的方法合集，类似DOM。\n- [ ] [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) 画图。  \n- [ ] [Channel Messaging API](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API) 又一种跨窗口通信。\n- [x] #72，[Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) 访问、写入系统剪切板。\n- [ ] [Compression Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API) 使用`gzip`、`deflate`压缩数据流。 \n- [ ] [Console API](https://developer.mozilla.org/en-US/docs/Web/API/Console_API) 控制台日志输出。\n- [ ] [Contact Picker API](https://developer.mozilla.org/en-US/docs/Web/API/Contact_Picker_API) 选择设备上的联系人。*Experimental*\n- [ ] [Content Index API](https://developer.mozilla.org/en-US/docs/Web/API/Content_Index_API) 设置`service worker`的离线数据。*Experimental*\n- [x] #75，[Cookie Store API](https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API) 优雅的管理cookie。\n- [x] #77，[Credential Management API](https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API) 管理登录凭证。\n\n### D\n\n- [x] #80，[DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) 元素操作的方法合集。\n- [x] #79，[Device Memory API](https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API) 访问设备可用内存大小。\n- [x] #81，[Device Orientation Events](https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events) 访问设备的物理方向。\n- [x] #82，[Document Picture-in-Picture API](https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API) 画中画。*experimental*\n\n### E\n\n- [ ] [EditContext API](https://developer.mozilla.org/en-US/docs/Web/API/EditContext_API) 富文本交互 *Experimental*\n- [ ] [Encoding API](https://developer.mozilla.org/en-US/docs/Web/API/Encoding_API) 字符编码解码\n- [ ] [Encrypted Media Extensions](https://developer.mozilla.org/en-US/docs/Web/API/Encrypted_Media_Extensions_API) 支持数字版权内容\n- [x] #84，[EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) 颜色吸管 *Experimental*\n\n### F\n\n- [ ] [FedCM API](https://developer.mozilla.org/en-US/docs/Web/API/FedCM_API) *Experimental*\n- [ ] [Fenced Frame API](https://developer.mozilla.org/en-US/docs/Web/API/Fenced_frame_API) *Experimental*\n- [ ] [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 发起网络请求，代替XMLHttpRequest\n- [x] #85，[File API](https://developer.mozilla.org/en-US/docs/Web/API/File_API) 访问用户选择的文件\n- [x] #86，[File System API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) 访问、写入操作系统上的文件\n- [ ] [File and Directory Entries API](https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API) 虚拟文件系统\n- [ ] [Force Touch Events](https://developer.mozilla.org/en-US/docs/Web/API/Force_Touch_events) Non-standard\n- [x] #87，[Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) 元素全屏\n\n### G\n\n- [ ] [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API) 访问手柄设备\n- [x] #88，[Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)  访问地理位置\n- [ ] [Geometry Interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Geometry_interfaces) 几何形状\n<!--hexo-->\n\n### H\n- [ ] [HTML DOM](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) DOM操作，包括form data、canvas、video等\n- [ ] [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) 拖放\n- [ ] [HTML Sanitizer API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API) 安全的HTML字符串 *Experimental*\n- [ ] [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) 浏览器会话记录\n- [ ] [Houdini API](https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs) 扩展CSS的样式和布局\n\n### I\n- [ ] [Idle Detection API](https://developer.mozilla.org/en-US/docs/Web/API/Idle_Detection_API) *Experimental*\n- [ ] [Image Capture API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API) 拍照，调用设备捕获图像 *Experimental*\n- [ ] [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) 客户端数据库\n- [ ] [Ink API](https://developer.mozilla.org/en-US/docs/Web/API/Ink_API) 调用系统的笔触合成功能 *Experimental*\n- [ ] [Input Device Capabilities API](https://developer.mozilla.org/en-US/docs/Web/API/InputDeviceCapabilities_API) *Experimental*\n- [ ] [Insertable Streams for MediaStreamTrack API](https://developer.mozilla.org/en-US/docs/Web/API/Insertable_Streams_for_MediaStreamTrack_API) 操作媒体流，比如合成音频、往视频里加一个帽子\n- [ ] [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) 监听元素是否出现在视口\n\n### K\n- [ ] [Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API) 访问物理键盘的信息、如布局等 *Experimental*\n\n### L\n- [ ] [Launch Handler API](https://developer.mozilla.org/en-US/docs/Web/API/Launch_Handler_API) 获取PWA的启动方式 *Experimental*\n- [ ] [Local Font Access API](https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API) 访问用户本地安装的字体列表 *Experimental*\n\n### M\n- [ ] [Media Capabilities API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API) 获取设备的解码、编码能力，以及实时反馈\n- [ ] [Media Capture and Streams](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API) 媒体捕捉和媒体流\n- [ ] [Media Session API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API) 获取设备对媒体的控制\n- [ ] [Media Source Extensions](https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API) 创建媒体流 *Experimental*\n- [ ] [MediaStream Recording](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API) 录制媒体流\n\n### N\n- [ ] [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API) 对`History`和`Location`的扩展，可以拦截管理浏览器导航 *Experimental*\n- [ ] [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) 访问网络连接信息 *Experimental*\n<!--hexo-->\n\nO-T\n<!--hexo-->\n\nU-Z\n\n","source":"_posts/web-api-readme.md","raw":"---\ntitle: \"Web API 实践，最后更新2024/02月...\"\ndate: \"2024-02-28T08:10:53Z\"\ncategories:\n  - [Web API]\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\n<!--hexo-->\n### A\n\n- [ ] [Audio Output Devices API](https://developer.mozilla.org/en-US/docs/Web/API/Audio_Output_Devices_API) 选择音频播放设备。*Experimental*\n\n### B\n\n- [ ] [Background Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Background_Fetch_API) 在后台下载大文件。*Experimental*\n- [ ] [Background Sync](https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API) 延迟任务以便在网络稳定时运行。*Experimental*\n- [x] #55，[Background Tasks](https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API) 利用空闲时间跑阻塞的任务。\n- [x] #50，[Badging API](https://developer.mozilla.org/en-US/docs/Web/API/Badging_API) 在web App中设置图标徽章。\n- [ ] [Barcode Detection API](https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API)，读取图片流中的条码、二维码。*Experimental*\n- [x] #58，[Battery API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API) 获取设备电池状态。\n- [x] #53，[Beacon](https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API) 发送无需响应的请求，保证浏览器关闭之前发送完毕。\n- [ ] [Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API) 连接蓝牙。*Experimental*\n- [x] #59，[Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API) 跨标签、窗口通信。\n\n### C\n\n- [ ] [CSS Counter Styles](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Counter_Styles) 为CSS定义计数器。\n- [x] #63，[CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API) 设置元素的高亮区域。\n- [x] #65，[CSS Font Loading API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API) 字体加载管理。\n- [ ] [CSS Painting API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API) 为CSS的背景等属性提供自定义的图片绘制。*Experimental*\n- [x] #67，[CSS Properties and Values API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API) 为CSS扩展属性，类似`CSS variables`。\n- [x] #69，[CSS Typed Object Model API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API) 提供了一系列访问和操作CSS值的方法。\n- [x] #71，[CSSOM](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model) 管理CSS的方法合集，类似DOM。\n- [ ] [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) 画图。  \n- [ ] [Channel Messaging API](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API) 又一种跨窗口通信。\n- [x] #72，[Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) 访问、写入系统剪切板。\n- [ ] [Compression Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API) 使用`gzip`、`deflate`压缩数据流。 \n- [ ] [Console API](https://developer.mozilla.org/en-US/docs/Web/API/Console_API) 控制台日志输出。\n- [ ] [Contact Picker API](https://developer.mozilla.org/en-US/docs/Web/API/Contact_Picker_API) 选择设备上的联系人。*Experimental*\n- [ ] [Content Index API](https://developer.mozilla.org/en-US/docs/Web/API/Content_Index_API) 设置`service worker`的离线数据。*Experimental*\n- [x] #75，[Cookie Store API](https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API) 优雅的管理cookie。\n- [x] #77，[Credential Management API](https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API) 管理登录凭证。\n\n### D\n\n- [x] #80，[DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) 元素操作的方法合集。\n- [x] #79，[Device Memory API](https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API) 访问设备可用内存大小。\n- [x] #81，[Device Orientation Events](https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events) 访问设备的物理方向。\n- [x] #82，[Document Picture-in-Picture API](https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API) 画中画。*experimental*\n\n### E\n\n- [ ] [EditContext API](https://developer.mozilla.org/en-US/docs/Web/API/EditContext_API) 富文本交互 *Experimental*\n- [ ] [Encoding API](https://developer.mozilla.org/en-US/docs/Web/API/Encoding_API) 字符编码解码\n- [ ] [Encrypted Media Extensions](https://developer.mozilla.org/en-US/docs/Web/API/Encrypted_Media_Extensions_API) 支持数字版权内容\n- [x] #84，[EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) 颜色吸管 *Experimental*\n\n### F\n\n- [ ] [FedCM API](https://developer.mozilla.org/en-US/docs/Web/API/FedCM_API) *Experimental*\n- [ ] [Fenced Frame API](https://developer.mozilla.org/en-US/docs/Web/API/Fenced_frame_API) *Experimental*\n- [ ] [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 发起网络请求，代替XMLHttpRequest\n- [x] #85，[File API](https://developer.mozilla.org/en-US/docs/Web/API/File_API) 访问用户选择的文件\n- [x] #86，[File System API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) 访问、写入操作系统上的文件\n- [ ] [File and Directory Entries API](https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API) 虚拟文件系统\n- [ ] [Force Touch Events](https://developer.mozilla.org/en-US/docs/Web/API/Force_Touch_events) Non-standard\n- [x] #87，[Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) 元素全屏\n\n### G\n\n- [ ] [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API) 访问手柄设备\n- [x] #88，[Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)  访问地理位置\n- [ ] [Geometry Interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Geometry_interfaces) 几何形状\n<!--hexo-->\n\n### H\n- [ ] [HTML DOM](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) DOM操作，包括form data、canvas、video等\n- [ ] [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) 拖放\n- [ ] [HTML Sanitizer API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API) 安全的HTML字符串 *Experimental*\n- [ ] [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) 浏览器会话记录\n- [ ] [Houdini API](https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs) 扩展CSS的样式和布局\n\n### I\n- [ ] [Idle Detection API](https://developer.mozilla.org/en-US/docs/Web/API/Idle_Detection_API) *Experimental*\n- [ ] [Image Capture API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API) 拍照，调用设备捕获图像 *Experimental*\n- [ ] [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) 客户端数据库\n- [ ] [Ink API](https://developer.mozilla.org/en-US/docs/Web/API/Ink_API) 调用系统的笔触合成功能 *Experimental*\n- [ ] [Input Device Capabilities API](https://developer.mozilla.org/en-US/docs/Web/API/InputDeviceCapabilities_API) *Experimental*\n- [ ] [Insertable Streams for MediaStreamTrack API](https://developer.mozilla.org/en-US/docs/Web/API/Insertable_Streams_for_MediaStreamTrack_API) 操作媒体流，比如合成音频、往视频里加一个帽子\n- [ ] [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) 监听元素是否出现在视口\n\n### K\n- [ ] [Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API) 访问物理键盘的信息、如布局等 *Experimental*\n\n### L\n- [ ] [Launch Handler API](https://developer.mozilla.org/en-US/docs/Web/API/Launch_Handler_API) 获取PWA的启动方式 *Experimental*\n- [ ] [Local Font Access API](https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API) 访问用户本地安装的字体列表 *Experimental*\n\n### M\n- [ ] [Media Capabilities API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API) 获取设备的解码、编码能力，以及实时反馈\n- [ ] [Media Capture and Streams](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API) 媒体捕捉和媒体流\n- [ ] [Media Session API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API) 获取设备对媒体的控制\n- [ ] [Media Source Extensions](https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API) 创建媒体流 *Experimental*\n- [ ] [MediaStream Recording](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API) 录制媒体流\n\n### N\n- [ ] [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API) 对`History`和`Location`的扩展，可以拦截管理浏览器导航 *Experimental*\n- [ ] [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) 访问网络连接信息 *Experimental*\n<!--hexo-->\n\nO-T\n<!--hexo-->\n\nU-Z\n\n","slug":"web-api-readme","published":1,"updated":"2024-03-15T09:52:09.991Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcotf003yhdomddskf8yw","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><!--hexo-->\n<h3 id=\"A\"><a href=\"#A\" class=\"headerlink\" title=\"A\"></a>A</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Audio_Output_Devices_API\">Audio Output Devices API</a> 选择音频播放设备。<em>Experimental</em></li>\n</ul>\n<h3 id=\"B\"><a href=\"#B\" class=\"headerlink\" title=\"B\"></a>B</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Fetch_API\">Background Fetch API</a> 在后台下载大文件。<em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API\">Background Sync</a> 延迟任务以便在网络稳定时运行。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #55，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API\">Background Tasks</a> 利用空闲时间跑阻塞的任务。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #50，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Badging_API\">Badging API</a> 在web App中设置图标徽章。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API\">Barcode Detection API</a>，读取图片流中的条码、二维码。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #58，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API\">Battery API</a> 获取设备电池状态。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #53，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API\">Beacon</a> 发送无需响应的请求，保证浏览器关闭之前发送完毕。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API\">Bluetooth API</a> 连接蓝牙。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #59，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API\">Broadcast Channel API</a> 跨标签、窗口通信。</li>\n</ul>\n<h3 id=\"C\"><a href=\"#C\" class=\"headerlink\" title=\"C\"></a>C</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Counter_Styles\">CSS Counter Styles</a> 为CSS定义计数器。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #63，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API\">CSS Custom Highlight API</a> 设置元素的高亮区域。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #65，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API\">CSS Font Loading API</a> 字体加载管理。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API\">CSS Painting API</a> 为CSS的背景等属性提供自定义的图片绘制。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #67，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API\">CSS Properties and Values API</a> 为CSS扩展属性，类似<code>CSS variables</code>。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #69，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API\">CSS Typed Object Model API</a> 提供了一系列访问和操作CSS值的方法。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #71，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model\">CSSOM</a> 管理CSS的方法合集，类似DOM。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API\">Canvas API</a> 画图。  </li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API\">Channel Messaging API</a> 又一种跨窗口通信。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #72，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API\">Clipboard API</a> 访问、写入系统剪切板。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API\">Compression Streams API</a> 使用<code>gzip</code>、<code>deflate</code>压缩数据流。 </li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Console_API\">Console API</a> 控制台日志输出。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Contact_Picker_API\">Contact Picker API</a> 选择设备上的联系人。<em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Content_Index_API\">Content Index API</a> 设置<code>service worker</code>的离线数据。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #75，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\">Cookie Store API</a> 优雅的管理cookie。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #77，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API\">Credential Management API</a> 管理登录凭证。</li>\n</ul>\n<h3 id=\"D\"><a href=\"#D\" class=\"headerlink\" title=\"D\"></a>D</h3><ul>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #80，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\">DOM</a> 元素操作的方法合集。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #79，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API\">Device Memory API</a> 访问设备可用内存大小。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #81，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events\">Device Orientation Events</a> 访问设备的物理方向。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #82，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API\">Document Picture-in-Picture API</a> 画中画。<em>experimental</em></li>\n</ul>\n<h3 id=\"E\"><a href=\"#E\" class=\"headerlink\" title=\"E\"></a>E</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/EditContext_API\">EditContext API</a> 富文本交互 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Encoding_API\">Encoding API</a> 字符编码解码</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Encrypted_Media_Extensions_API\">Encrypted Media Extensions</a> 支持数字版权内容</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #84，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API\">EyeDropper API</a> 颜色吸管 <em>Experimental</em></li>\n</ul>\n<h3 id=\"F\"><a href=\"#F\" class=\"headerlink\" title=\"F\"></a>F</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/FedCM_API\">FedCM API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fenced_frame_API\">Fenced Frame API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\">Fetch API</a> 发起网络请求，代替XMLHttpRequest</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #85，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_API\">File API</a> 访问用户选择的文件</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #86，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_System_API\">File System API</a> 访问、写入操作系统上的文件</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API\">File and Directory Entries API</a> 虚拟文件系统</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Force_Touch_events\">Force Touch Events</a> Non-standard</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #87，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API\">Fullscreen API</a> 元素全屏</li>\n</ul>\n<h3 id=\"G\"><a href=\"#G\" class=\"headerlink\" title=\"G\"></a>G</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API\">Gamepad API</a> 访问手柄设备</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #88，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API\">Geolocation API</a>  访问地理位置</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Geometry_interfaces\">Geometry Interfaces</a> 几何形状<!--hexo--></li>\n</ul>\n<h3 id=\"H\"><a href=\"#H\" class=\"headerlink\" title=\"H\"></a>H</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API\">HTML DOM</a> DOM操作，包括form data、canvas、video等</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API\">HTML Drag and Drop API</a> 拖放</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API\">HTML Sanitizer API</a> 安全的HTML字符串 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/History_API\">History API</a> 浏览器会话记录</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs\">Houdini API</a> 扩展CSS的样式和布局</li>\n</ul>\n<h3 id=\"I\"><a href=\"#I\" class=\"headerlink\" title=\"I\"></a>I</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Idle_Detection_API\">Idle Detection API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API\">Image Capture API</a> 拍照，调用设备捕获图像 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API\">IndexedDB</a> 客户端数据库</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Ink_API\">Ink API</a> 调用系统的笔触合成功能 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/InputDeviceCapabilities_API\">Input Device Capabilities API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Insertable_Streams_for_MediaStreamTrack_API\">Insertable Streams for MediaStreamTrack API</a> 操作媒体流，比如合成音频、往视频里加一个帽子</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\">Intersection Observer API</a> 监听元素是否出现在视口</li>\n</ul>\n<h3 id=\"K\"><a href=\"#K\" class=\"headerlink\" title=\"K\"></a>K</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API\">Keyboard API</a> 访问物理键盘的信息、如布局等 <em>Experimental</em></li>\n</ul>\n<h3 id=\"L\"><a href=\"#L\" class=\"headerlink\" title=\"L\"></a>L</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Launch_Handler_API\">Launch Handler API</a> 获取PWA的启动方式 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API\">Local Font Access API</a> 访问用户本地安装的字体列表 <em>Experimental</em></li>\n</ul>\n<h3 id=\"M\"><a href=\"#M\" class=\"headerlink\" title=\"M\"></a>M</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API\">Media Capabilities API</a> 获取设备的解码、编码能力，以及实时反馈</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API\">Media Capture and Streams</a> 媒体捕捉和媒体流</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API\">Media Session API</a> 获取设备对媒体的控制</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API\">Media Source Extensions</a> 创建媒体流 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API\">MediaStream Recording</a> 录制媒体流</li>\n</ul>\n<h3 id=\"N\"><a href=\"#N\" class=\"headerlink\" title=\"N\"></a>N</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API\">Navigation API</a> 对<code>History</code>和<code>Location</code>的扩展，可以拦截管理浏览器导航 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API\">Network Information API</a> 访问网络连接信息 <em>Experimental</em><!--hexo--></li>\n</ul>\n<p>O-T</p>\n<!--hexo-->\n\n<p>U-Z</p>\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><!--hexo-->\n<h3 id=\"A\"><a href=\"#A\" class=\"headerlink\" title=\"A\"></a>A</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Audio_Output_Devices_API\">Audio Output Devices API</a> 选择音频播放设备。<em>Experimental</em></li>\n</ul>\n<h3 id=\"B\"><a href=\"#B\" class=\"headerlink\" title=\"B\"></a>B</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Fetch_API\">Background Fetch API</a> 在后台下载大文件。<em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API\">Background Sync</a> 延迟任务以便在网络稳定时运行。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #55，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API\">Background Tasks</a> 利用空闲时间跑阻塞的任务。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #50，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Badging_API\">Badging API</a> 在web App中设置图标徽章。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API\">Barcode Detection API</a>，读取图片流中的条码、二维码。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #58，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API\">Battery API</a> 获取设备电池状态。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #53，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API\">Beacon</a> 发送无需响应的请求，保证浏览器关闭之前发送完毕。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API\">Bluetooth API</a> 连接蓝牙。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #59，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API\">Broadcast Channel API</a> 跨标签、窗口通信。</li>\n</ul>\n<h3 id=\"C\"><a href=\"#C\" class=\"headerlink\" title=\"C\"></a>C</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Counter_Styles\">CSS Counter Styles</a> 为CSS定义计数器。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #63，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API\">CSS Custom Highlight API</a> 设置元素的高亮区域。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #65，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API\">CSS Font Loading API</a> 字体加载管理。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API\">CSS Painting API</a> 为CSS的背景等属性提供自定义的图片绘制。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #67，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API\">CSS Properties and Values API</a> 为CSS扩展属性，类似<code>CSS variables</code>。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #69，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API\">CSS Typed Object Model API</a> 提供了一系列访问和操作CSS值的方法。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #71，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model\">CSSOM</a> 管理CSS的方法合集，类似DOM。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API\">Canvas API</a> 画图。  </li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API\">Channel Messaging API</a> 又一种跨窗口通信。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #72，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API\">Clipboard API</a> 访问、写入系统剪切板。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API\">Compression Streams API</a> 使用<code>gzip</code>、<code>deflate</code>压缩数据流。 </li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Console_API\">Console API</a> 控制台日志输出。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Contact_Picker_API\">Contact Picker API</a> 选择设备上的联系人。<em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Content_Index_API\">Content Index API</a> 设置<code>service worker</code>的离线数据。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #75，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\">Cookie Store API</a> 优雅的管理cookie。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #77，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API\">Credential Management API</a> 管理登录凭证。</li>\n</ul>\n<h3 id=\"D\"><a href=\"#D\" class=\"headerlink\" title=\"D\"></a>D</h3><ul>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #80，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\">DOM</a> 元素操作的方法合集。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #79，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API\">Device Memory API</a> 访问设备可用内存大小。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #81，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events\">Device Orientation Events</a> 访问设备的物理方向。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #82，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API\">Document Picture-in-Picture API</a> 画中画。<em>experimental</em></li>\n</ul>\n<h3 id=\"E\"><a href=\"#E\" class=\"headerlink\" title=\"E\"></a>E</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/EditContext_API\">EditContext API</a> 富文本交互 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Encoding_API\">Encoding API</a> 字符编码解码</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Encrypted_Media_Extensions_API\">Encrypted Media Extensions</a> 支持数字版权内容</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #84，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API\">EyeDropper API</a> 颜色吸管 <em>Experimental</em></li>\n</ul>\n<h3 id=\"F\"><a href=\"#F\" class=\"headerlink\" title=\"F\"></a>F</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/FedCM_API\">FedCM API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fenced_frame_API\">Fenced Frame API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\">Fetch API</a> 发起网络请求，代替XMLHttpRequest</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #85，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_API\">File API</a> 访问用户选择的文件</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #86，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_System_API\">File System API</a> 访问、写入操作系统上的文件</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API\">File and Directory Entries API</a> 虚拟文件系统</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Force_Touch_events\">Force Touch Events</a> Non-standard</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #87，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API\">Fullscreen API</a> 元素全屏</li>\n</ul>\n<h3 id=\"G\"><a href=\"#G\" class=\"headerlink\" title=\"G\"></a>G</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API\">Gamepad API</a> 访问手柄设备</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #88，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API\">Geolocation API</a>  访问地理位置</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Geometry_interfaces\">Geometry Interfaces</a> 几何形状<!--hexo--></li>\n</ul>\n<h3 id=\"H\"><a href=\"#H\" class=\"headerlink\" title=\"H\"></a>H</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API\">HTML DOM</a> DOM操作，包括form data、canvas、video等</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API\">HTML Drag and Drop API</a> 拖放</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API\">HTML Sanitizer API</a> 安全的HTML字符串 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/History_API\">History API</a> 浏览器会话记录</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs\">Houdini API</a> 扩展CSS的样式和布局</li>\n</ul>\n<h3 id=\"I\"><a href=\"#I\" class=\"headerlink\" title=\"I\"></a>I</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Idle_Detection_API\">Idle Detection API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API\">Image Capture API</a> 拍照，调用设备捕获图像 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API\">IndexedDB</a> 客户端数据库</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Ink_API\">Ink API</a> 调用系统的笔触合成功能 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/InputDeviceCapabilities_API\">Input Device Capabilities API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Insertable_Streams_for_MediaStreamTrack_API\">Insertable Streams for MediaStreamTrack API</a> 操作媒体流，比如合成音频、往视频里加一个帽子</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\">Intersection Observer API</a> 监听元素是否出现在视口</li>\n</ul>\n<h3 id=\"K\"><a href=\"#K\" class=\"headerlink\" title=\"K\"></a>K</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API\">Keyboard API</a> 访问物理键盘的信息、如布局等 <em>Experimental</em></li>\n</ul>\n<h3 id=\"L\"><a href=\"#L\" class=\"headerlink\" title=\"L\"></a>L</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Launch_Handler_API\">Launch Handler API</a> 获取PWA的启动方式 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API\">Local Font Access API</a> 访问用户本地安装的字体列表 <em>Experimental</em></li>\n</ul>\n<h3 id=\"M\"><a href=\"#M\" class=\"headerlink\" title=\"M\"></a>M</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API\">Media Capabilities API</a> 获取设备的解码、编码能力，以及实时反馈</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API\">Media Capture and Streams</a> 媒体捕捉和媒体流</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API\">Media Session API</a> 获取设备对媒体的控制</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API\">Media Source Extensions</a> 创建媒体流 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API\">MediaStream Recording</a> 录制媒体流</li>\n</ul>\n<h3 id=\"N\"><a href=\"#N\" class=\"headerlink\" title=\"N\"></a>N</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API\">Navigation API</a> 对<code>History</code>和<code>Location</code>的扩展，可以拦截管理浏览器导航 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API\">Network Information API</a> 访问网络连接信息 <em>Experimental</em><!--hexo--></li>\n</ul>\n<p>O-T</p>\n<!--hexo-->\n\n<p>U-Z</p>\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-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcotg0041hdomazerg5en","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-15T09:52:04.135Z","comments":1,"layout":"post","photos":[],"link":"","_id":"cltshcotg0044hdom8axkhghh","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":"cltshcosc0005hdom97rp1lt1","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcosh000ehdom40t90prm"},{"post_id":"cltshcosd0006hdom3mk7hpto","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcosi000hhdom8vwzf9oh"},{"post_id":"cltshcos40000hdom1hgl40fa","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcosj000lhdom3ukad8jt"},{"post_id":"cltshcos40000hdom1hgl40fa","category_id":"cltshcosd0008hdom1jeq7rqq","_id":"cltshcosk000ohdomh1y1gr34"},{"post_id":"cltshcose0009hdom6koo0p1v","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcosl000rhdom9wtzdn08"},{"post_id":"cltshcos80001hdom7eb46n4d","category_id":"cltshcosd0008hdom1jeq7rqq","_id":"cltshcosl000thdom9n7je5rs"},{"post_id":"cltshcosf000ahdom7r1z75gj","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcosm000vhdom2sjm3iqd"},{"post_id":"cltshcosg000dhdom7csrhxai","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcosn000zhdom2jplft5y"},{"post_id":"cltshcosb0003hdom7vnu1ne8","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcoso0012hdomg590dvba"},{"post_id":"cltshcosh000ghdomg1xb7pex","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcosp0015hdom9j324k2q"},{"post_id":"cltshcosj000khdomcks6gtjd","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcosp0017hdom00oqau7m"},{"post_id":"cltshcosj000nhdom8r5098fi","category_id":"cltshcosd0008hdom1jeq7rqq","_id":"cltshcosq001bhdom2as85fbw"},{"post_id":"cltshcosk000qhdom8gvma8iw","category_id":"cltshcosd0008hdom1jeq7rqq","_id":"cltshcosr001ehdom62iggcrv"},{"post_id":"cltshcosl000shdom25pdd9sx","category_id":"cltshcosd0008hdom1jeq7rqq","_id":"cltshcoss001ihdom8q6ya6q3"},{"post_id":"cltshcosm000uhdomf8mwb3k3","category_id":"cltshcosd0008hdom1jeq7rqq","_id":"cltshcoss001khdomad27evgc"},{"post_id":"cltshcosn000yhdom3vhc694f","category_id":"cltshcosd0008hdom1jeq7rqq","_id":"cltshcost001ohdom5naogtbk"},{"post_id":"cltshcosn0011hdom6jwsgglv","category_id":"cltshcosd0008hdom1jeq7rqq","_id":"cltshcosu001shdom8x4q6fxk"},{"post_id":"cltshcoso0014hdomb59s20b0","category_id":"cltshcosd0008hdom1jeq7rqq","_id":"cltshcosv001vhdomch0ffjy5"},{"post_id":"cltshcosp0016hdomc4mg9w9e","category_id":"cltshcosd0008hdom1jeq7rqq","_id":"cltshcosw001yhdom5mpnebf1"},{"post_id":"cltshcoss001jhdombp980f0t","category_id":"cltshcosr001hhdom68hf3m88","_id":"cltshcosx0022hdom51xz8okm"},{"post_id":"cltshcosq001ahdom4zm02fvc","category_id":"cltshcosr001hhdom68hf3m88","_id":"cltshcosy0026hdomf4lv4e95"},{"post_id":"cltshcost001nhdomg49k27va","category_id":"cltshcosd0008hdom1jeq7rqq","_id":"cltshcosz0029hdombxyia6oi"},{"post_id":"cltshcosq001dhdom7298e1tu","category_id":"cltshcosr001hhdom68hf3m88","_id":"cltshcosz002chdomc8rdadca"},{"post_id":"cltshcosv001xhdom6hlu9yps","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcot0002ghdom2gap3g6z"},{"post_id":"cltshcosr001ghdom1idp1lfl","category_id":"cltshcosr001hhdom68hf3m88","_id":"cltshcot3002jhdomc6bz9434"},{"post_id":"cltshcosw0021hdom1zkv1uo5","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcot4002mhdomhpf5d4fe"},{"post_id":"cltshcosx0025hdom5hjj5mzn","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcot5002ohdom3e638ybl"},{"post_id":"cltshcosu001rhdomguweac1k","category_id":"cltshcosx0023hdomehcm5dbk","_id":"cltshcot6002shdomfiax1gys"},{"post_id":"cltshcosy0028hdomdxm8gksu","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcot7002vhdom2shm8ujf"},{"post_id":"cltshcosz002bhdomgwcx2qzq","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcot8002yhdom1pep4b59"},{"post_id":"cltshcosu001uhdome8xx54on","category_id":"cltshcosx0023hdomehcm5dbk","_id":"cltshcot80030hdomeaxu30wz"},{"post_id":"cltshcot0002fhdom5pcq17h7","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcot90034hdom5n3p0ylz"},{"post_id":"cltshcot1002ihdom290mcld7","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcota0037hdom3ulw9y9b"},{"post_id":"cltshcot4002lhdom2mg8ajc0","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcotb003chdomc6gyfhgz"},{"post_id":"cltshcot5002nhdom9iqg9cqv","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcotb003fhdomex7x6m54"},{"post_id":"cltshcot6002rhdom3el21w9c","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcotc003ihdom1ujcbpsz"},{"post_id":"cltshcot6002uhdomfxafcju9","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcotd003mhdom65474lmj"},{"post_id":"cltshcot7002xhdomcwtg6lf5","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcote003phdomg26x0duj"},{"post_id":"cltshcot8002zhdom9bd637km","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcote003thdom8ufw0vb2"},{"post_id":"cltshcotb003ehdomfaifa9wy","category_id":"cltshcotb003bhdomc7ry8b1a","_id":"cltshcotf003whdomgijn1pqe"},{"post_id":"cltshcot90033hdom01ll9tco","category_id":"cltshcotb003bhdomc7ry8b1a","_id":"cltshcotf003zhdomb6p01irc"},{"post_id":"cltshcotc003hhdom667a3fi6","category_id":"cltshcotb003bhdomc7ry8b1a","_id":"cltshcotg0042hdom6e0vh7yx"},{"post_id":"cltshcotd003lhdomb8d2e0aq","category_id":"cltshcotb003bhdomc7ry8b1a","_id":"cltshcoth0045hdome84y7qls"},{"post_id":"cltshcot90036hdom3nou55z0","category_id":"cltshcotb003bhdomc7ry8b1a","_id":"cltshcoth0048hdomfh7u64n9"},{"post_id":"cltshcotd003ohdom3zwt5zr6","category_id":"cltshcotb003bhdomc7ry8b1a","_id":"cltshcoth004ahdomao5r5qyi"},{"post_id":"cltshcote003shdome8sb3ufc","category_id":"cltshcotb003bhdomc7ry8b1a","_id":"cltshcoth004dhdom7e2cfki6"},{"post_id":"cltshcota003ahdom33vd2ptf","category_id":"cltshcotb003bhdomc7ry8b1a","_id":"cltshcoth004fhdom14wrdc7c"},{"post_id":"cltshcotf003vhdom8v2hdcpc","category_id":"cltshcotb003bhdomc7ry8b1a","_id":"cltshcoti004hhdomee55dem5"},{"post_id":"cltshcotf003yhdomddskf8yw","category_id":"cltshcotb003bhdomc7ry8b1a","_id":"cltshcoti004jhdom460ohboh"},{"post_id":"cltshcotg0041hdomazerg5en","category_id":"cltshcosb0004hdom7del6smu","_id":"cltshcoti004lhdomfu56bhnu"},{"post_id":"cltshcotg0044hdom8axkhghh","category_id":"cltshcosr001hhdom68hf3m88","_id":"cltshcoti004nhdomd7p78azb"}],"PostTag":[{"post_id":"cltshcos40000hdom1hgl40fa","tag_id":"cltshcos90002hdome2viaha0","_id":"cltshcosh000fhdom12kr5m6s"},{"post_id":"cltshcos40000hdom1hgl40fa","tag_id":"cltshcosd0007hdom4v5shdr2","_id":"cltshcosi000ihdom1hy764hu"},{"post_id":"cltshcos80001hdom7eb46n4d","tag_id":"cltshcosf000bhdomfvf0565f","_id":"cltshcosj000mhdomcvw0b387"},{"post_id":"cltshcosb0003hdom7vnu1ne8","tag_id":"cltshcosi000jhdom0bap2z6u","_id":"cltshcosn000xhdom0gelegmk"},{"post_id":"cltshcosb0003hdom7vnu1ne8","tag_id":"cltshcosk000phdom6114egj8","_id":"cltshcosn0010hdom6t48a8uy"},{"post_id":"cltshcosc0005hdom97rp1lt1","tag_id":"cltshcosi000jhdom0bap2z6u","_id":"cltshcosq0019hdomdolxdw6u"},{"post_id":"cltshcosc0005hdom97rp1lt1","tag_id":"cltshcosk000phdom6114egj8","_id":"cltshcosq001chdom7pjo7k2b"},{"post_id":"cltshcosd0006hdom3mk7hpto","tag_id":"cltshcosi000jhdom0bap2z6u","_id":"cltshcost001mhdomf5j2eo9x"},{"post_id":"cltshcosd0006hdom3mk7hpto","tag_id":"cltshcosk000phdom6114egj8","_id":"cltshcost001qhdomav7383gq"},{"post_id":"cltshcose0009hdom6koo0p1v","tag_id":"cltshcosi000jhdom0bap2z6u","_id":"cltshcosw0020hdomc5xc6u4q"},{"post_id":"cltshcose0009hdom6koo0p1v","tag_id":"cltshcosk000phdom6114egj8","_id":"cltshcosx0024hdombf2y5dbg"},{"post_id":"cltshcosf000ahdom7r1z75gj","tag_id":"cltshcosi000jhdom0bap2z6u","_id":"cltshcot0002ehdom7j498b46"},{"post_id":"cltshcosf000ahdom7r1z75gj","tag_id":"cltshcosk000phdom6114egj8","_id":"cltshcot1002hhdom2czr846c"},{"post_id":"cltshcosg000dhdom7csrhxai","tag_id":"cltshcosi000jhdom0bap2z6u","_id":"cltshcot6002qhdom7figcwb9"},{"post_id":"cltshcosg000dhdom7csrhxai","tag_id":"cltshcosk000phdom6114egj8","_id":"cltshcot6002thdom7tg8aj63"},{"post_id":"cltshcosh000ghdomg1xb7pex","tag_id":"cltshcosi000jhdom0bap2z6u","_id":"cltshcot80032hdom4pdu6953"},{"post_id":"cltshcosh000ghdomg1xb7pex","tag_id":"cltshcosk000phdom6114egj8","_id":"cltshcot90035hdomb7pz32od"},{"post_id":"cltshcosj000khdomcks6gtjd","tag_id":"cltshcosi000jhdom0bap2z6u","_id":"cltshcota0039hdom9qh87emm"},{"post_id":"cltshcosj000khdomcks6gtjd","tag_id":"cltshcosk000phdom6114egj8","_id":"cltshcotb003dhdom02o42hpn"},{"post_id":"cltshcosj000nhdom8r5098fi","tag_id":"cltshcota0038hdomew39bzti","_id":"cltshcotc003jhdom3qaq9f6q"},{"post_id":"cltshcosk000qhdom8gvma8iw","tag_id":"cltshcota0038hdomew39bzti","_id":"cltshcote003qhdom9cce42x5"},{"post_id":"cltshcosl000shdom25pdd9sx","tag_id":"cltshcota0038hdomew39bzti","_id":"cltshcotf003xhdom6xfl53y6"},{"post_id":"cltshcosm000uhdomf8mwb3k3","tag_id":"cltshcota0038hdomew39bzti","_id":"cltshcotg0043hdomanhg8u7r"},{"post_id":"cltshcotg0041hdomazerg5en","tag_id":"cltshcosi000jhdom0bap2z6u","_id":"cltshcoth0047hdom7je7ccpt"},{"post_id":"cltshcotg0041hdomazerg5en","tag_id":"cltshcosk000phdom6114egj8","_id":"cltshcoth0049hdomcayo2uup"},{"post_id":"cltshcosn000yhdom3vhc694f","tag_id":"cltshcota0038hdomew39bzti","_id":"cltshcoth004chdom0kyo8yso"},{"post_id":"cltshcosn0011hdom6jwsgglv","tag_id":"cltshcota0038hdomew39bzti","_id":"cltshcoth004ehdombf9aa4gg"},{"post_id":"cltshcoso0014hdomb59s20b0","tag_id":"cltshcota0038hdomew39bzti","_id":"cltshcoti004ihdombc45d9vw"},{"post_id":"cltshcosp0016hdomc4mg9w9e","tag_id":"cltshcota0038hdomew39bzti","_id":"cltshcoti004mhdomcmlpc88m"},{"post_id":"cltshcosq001ahdom4zm02fvc","tag_id":"cltshcoti004khdom2jdi2ued","_id":"cltshcoti004phdom75hr0dhy"},{"post_id":"cltshcosq001dhdom7298e1tu","tag_id":"cltshcoti004khdom2jdi2ued","_id":"cltshcoti004rhdom7rt52u5h"},{"post_id":"cltshcosr001ghdom1idp1lfl","tag_id":"cltshcoti004qhdomfh1hb079","_id":"cltshcotj004uhdomdf18cs5c"},{"post_id":"cltshcosr001ghdom1idp1lfl","tag_id":"cltshcotj004shdom64r949l4","_id":"cltshcotj004vhdom1ze053wg"},{"post_id":"cltshcoss001jhdombp980f0t","tag_id":"cltshcoti004khdom2jdi2ued","_id":"cltshcotj004xhdom8jgq7tbm"},{"post_id":"cltshcost001nhdomg49k27va","tag_id":"cltshcotj004whdom7mhh36pw","_id":"cltshcotj004zhdomaalyc14e"},{"post_id":"cltshcosu001rhdomguweac1k","tag_id":"cltshcotj004yhdom5ck4hetm","_id":"cltshcotk0051hdoma9cs093p"},{"post_id":"cltshcosu001uhdome8xx54on","tag_id":"cltshcotj004yhdom5ck4hetm","_id":"cltshcotk0053hdom0rlqfgdy"},{"post_id":"cltshcosv001xhdom6hlu9yps","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotk0056hdom3yse35km"},{"post_id":"cltshcosv001xhdom6hlu9yps","tag_id":"cltshcotk0054hdoma7j08scl","_id":"cltshcotk0057hdom7kx4fjd7"},{"post_id":"cltshcosw0021hdom1zkv1uo5","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotl005ahdom1q908enh"},{"post_id":"cltshcosw0021hdom1zkv1uo5","tag_id":"cltshcotk0058hdom68431d3j","_id":"cltshcotl005bhdom73mzg1tu"},{"post_id":"cltshcosx0025hdom5hjj5mzn","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotl005ehdom2qhc0udv"},{"post_id":"cltshcosx0025hdom5hjj5mzn","tag_id":"cltshcotl005chdom98rhckxn","_id":"cltshcotl005fhdomd1328dyj"},{"post_id":"cltshcosy0028hdomdxm8gksu","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotm005ihdom88kg49vm"},{"post_id":"cltshcosy0028hdomdxm8gksu","tag_id":"cltshcotl005ghdom6m6idg8m","_id":"cltshcotm005jhdom9jjt9hnl"},{"post_id":"cltshcosz002bhdomgwcx2qzq","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotm005mhdom900g9xhv"},{"post_id":"cltshcosz002bhdomgwcx2qzq","tag_id":"cltshcotm005khdom5e69hlft","_id":"cltshcotm005nhdomcpn771pg"},{"post_id":"cltshcot0002fhdom5pcq17h7","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotm005qhdomda76gr90"},{"post_id":"cltshcot0002fhdom5pcq17h7","tag_id":"cltshcotm005ohdom3sot2qne","_id":"cltshcotn005rhdomcdevaoge"},{"post_id":"cltshcot1002ihdom290mcld7","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotn005uhdom9wgkek20"},{"post_id":"cltshcot1002ihdom290mcld7","tag_id":"cltshcotn005shdomd7q5b76l","_id":"cltshcotn005vhdomfhddhian"},{"post_id":"cltshcot4002lhdom2mg8ajc0","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotn005yhdomenco2oep"},{"post_id":"cltshcot4002lhdom2mg8ajc0","tag_id":"cltshcotn005whdom454q4xno","_id":"cltshcotn005zhdom17xk8qhj"},{"post_id":"cltshcot5002nhdom9iqg9cqv","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcoto0062hdom46vk376n"},{"post_id":"cltshcot5002nhdom9iqg9cqv","tag_id":"cltshcotn0060hdom9gw2bt12","_id":"cltshcoto0063hdom27nza4v7"},{"post_id":"cltshcot6002rhdom3el21w9c","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotp0066hdoma4vg0uhu"},{"post_id":"cltshcot6002rhdom3el21w9c","tag_id":"cltshcoto0064hdom7ax5448r","_id":"cltshcotp0067hdom50867end"},{"post_id":"cltshcot6002uhdomfxafcju9","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotp006ahdomdb0bgbds"},{"post_id":"cltshcot6002uhdomfxafcju9","tag_id":"cltshcotp0068hdomd2gh3sf5","_id":"cltshcotp006bhdom5vd72264"},{"post_id":"cltshcot7002xhdomcwtg6lf5","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotq006ehdom4tuqfwtf"},{"post_id":"cltshcot7002xhdomcwtg6lf5","tag_id":"cltshcotp006chdomhoap9u4k","_id":"cltshcotq006fhdom01c3f24j"},{"post_id":"cltshcot8002zhdom9bd637km","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotr006ihdom4bnv3in7"},{"post_id":"cltshcot8002zhdom9bd637km","tag_id":"cltshcotq006ghdombnk52iqr","_id":"cltshcotr006jhdombdqr09jt"},{"post_id":"cltshcot90033hdom01ll9tco","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotr006mhdom477vaw9d"},{"post_id":"cltshcot90033hdom01ll9tco","tag_id":"cltshcotr006khdom2k9icuzs","_id":"cltshcotr006nhdom0a019ygu"},{"post_id":"cltshcot90036hdom3nou55z0","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcots006qhdom9q34fsjz"},{"post_id":"cltshcot90036hdom3nou55z0","tag_id":"cltshcotr006ohdomh8bg2901","_id":"cltshcots006rhdom2gax5l5b"},{"post_id":"cltshcota003ahdom33vd2ptf","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcots006uhdom3lpt1ab8"},{"post_id":"cltshcota003ahdom33vd2ptf","tag_id":"cltshcots006shdom0a25088y","_id":"cltshcott006vhdomdtnrgjas"},{"post_id":"cltshcotb003ehdomfaifa9wy","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcott006yhdom3i6ieaul"},{"post_id":"cltshcotb003ehdomfaifa9wy","tag_id":"cltshcott006whdom5a7q2qnv","_id":"cltshcott006zhdom4dtx41ge"},{"post_id":"cltshcotc003hhdom667a3fi6","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotu0072hdom1jz5gy9a"},{"post_id":"cltshcotc003hhdom667a3fi6","tag_id":"cltshcott0070hdom33vb4o6b","_id":"cltshcotu0073hdom6fw5eo91"},{"post_id":"cltshcotd003lhdomb8d2e0aq","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotu0076hdomajdzgxt1"},{"post_id":"cltshcotd003lhdomb8d2e0aq","tag_id":"cltshcotu0074hdom3gsy7u4z","_id":"cltshcotu0077hdom9go87tmb"},{"post_id":"cltshcotd003ohdom3zwt5zr6","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotv007ahdomc6mx5v1v"},{"post_id":"cltshcotd003ohdom3zwt5zr6","tag_id":"cltshcotu0078hdomdkfk7fl8","_id":"cltshcotv007bhdom4byu5o4m"},{"post_id":"cltshcote003shdome8sb3ufc","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotw007ehdomfi414dqn"},{"post_id":"cltshcote003shdome8sb3ufc","tag_id":"cltshcotv007chdom6103dw7u","_id":"cltshcotw007fhdomgzgm9ng5"},{"post_id":"cltshcotf003vhdom8v2hdcpc","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotw007ihdomeze884ix"},{"post_id":"cltshcotf003vhdom8v2hdcpc","tag_id":"cltshcotw007ghdomc7s1hutb","_id":"cltshcotw007jhdom0kacder6"},{"post_id":"cltshcotf003yhdomddskf8yw","tag_id":"cltshcotk0052hdom6ptmb1z0","_id":"cltshcotx007lhdom3e5v3w73"},{"post_id":"cltshcotg0044hdom8axkhghh","tag_id":"cltshcotw007khdom4zi1d295","_id":"cltshcotx007mhdombnh91dyr"}],"Tag":[{"name":"ast","_id":"cltshcos90002hdome2viaha0"},{"name":"css module","_id":"cltshcosd0007hdom4v5shdr2"},{"name":"changesets","_id":"cltshcosf000bhdomfvf0565f"},{"name":"es6","_id":"cltshcosi000jhdom0bap2z6u"},{"name":"javascript","_id":"cltshcosk000phdom6114egj8"},{"name":"github actions","_id":"cltshcota0038hdomew39bzti"},{"name":"react","_id":"cltshcoti004khdom2jdi2ued"},{"name":"zustand","_id":"cltshcoti004qhdomfh1hb079"},{"name":"react store","_id":"cltshcotj004shdom64r949l4"},{"name":"jest","_id":"cltshcotj004whdom7mhh36pw"},{"name":"typescript","_id":"cltshcotj004yhdom5ck4hetm"},{"name":"webapi","_id":"cltshcotk0052hdom6ptmb1z0"},{"name":"Background Tasks","_id":"cltshcotk0054hdoma7j08scl"},{"name":"Badging","_id":"cltshcotk0058hdom68431d3j"},{"name":"Battery Status","_id":"cltshcotl005chdom98rhckxn"},{"name":"Beacon","_id":"cltshcotl005ghdom6m6idg8m"},{"name":"Broadcast Channel","_id":"cltshcotm005khdom5e69hlft"},{"name":"CSS Custom Highlight","_id":"cltshcotm005ohdom3sot2qne"},{"name":"CSS Font Loading","_id":"cltshcotn005shdomd7q5b76l"},{"name":"CSSOM","_id":"cltshcotn005whdom454q4xno"},{"name":"CSS Properties and Values","_id":"cltshcotn0060hdom9gw2bt12"},{"name":"CSS Typed OM","_id":"cltshcoto0064hdom7ax5448r"},{"name":"Clipboard","_id":"cltshcotp0068hdomd2gh3sf5"},{"name":"CookieStore","_id":"cltshcotp006chdomhoap9u4k"},{"name":"Credential Management","_id":"cltshcotq006ghdombnk52iqr"},{"name":"Device Memory","_id":"cltshcotr006khdom2k9icuzs"},{"name":"Device Orientation","_id":"cltshcotr006ohdomh8bg2901"},{"name":"DOM","_id":"cltshcots006shdom0a25088y"},{"name":"EyeDropper","_id":"cltshcott006whdom5a7q2qnv"},{"name":"Document Picture-in-Picture","_id":"cltshcott0070hdom33vb4o6b"},{"name":"File","_id":"cltshcotu0074hdom3gsy7u4z"},{"name":"Fullscreen","_id":"cltshcotu0078hdomdkfk7fl8"},{"name":"File System","_id":"cltshcotv007chdom6103dw7u"},{"name":"Geolocation","_id":"cltshcotw007ghdomc7s1hutb"},{"name":"radix","_id":"cltshcotw007khdom4zi1d295"}]}}
\ No newline at end of file
+{"meta":{"version":1,"warehouse":"4.0.2"},"models":{"Asset":[{"_id":"themes/bmw/source/css/base.css","path":"css/base.css","modified":1,"renderable":1},{"_id":"themes/bmw/source/css/base.css.map","path":"css/base.css.map","modified":1,"renderable":1},{"_id":"themes/bmw/source/css/github-markdown.css","path":"css/github-markdown.css","modified":1,"renderable":1},{"_id":"themes/bmw/source/css/highlight.css","path":"css/highlight.css","modified":1,"renderable":1},{"_id":"themes/bmw/source/css/prism.css","path":"css/prism.css","modified":1,"renderable":1},{"_id":"themes/bmw/source/icon/demo_fontclass.html","path":"icon/demo_fontclass.html","modified":1,"renderable":1},{"_id":"themes/bmw/source/icon/iconfont.css","path":"icon/iconfont.css","modified":1,"renderable":1},{"_id":"themes/bmw/source/icon/iconfont.eot","path":"icon/iconfont.eot","modified":1,"renderable":1},{"_id":"themes/bmw/source/icon/iconfont.js","path":"icon/iconfont.js","modified":1,"renderable":1},{"_id":"themes/bmw/source/icon/iconfont.svg","path":"icon/iconfont.svg","modified":1,"renderable":1},{"_id":"themes/bmw/source/icon/iconfont.ttf","path":"icon/iconfont.ttf","modified":1,"renderable":1},{"_id":"themes/bmw/source/icon/iconfont.woff","path":"icon/iconfont.woff","modified":1,"renderable":1},{"_id":"themes/bmw/source/images/alipay.png","path":"images/alipay.png","modified":1,"renderable":1},{"_id":"themes/bmw/source/images/favicon.ico","path":"images/favicon.ico","modified":1,"renderable":1},{"_id":"themes/bmw/source/images/touch-icon.png","path":"images/touch-icon.png","modified":1,"renderable":1},{"_id":"themes/bmw/source/images/wechat.png","path":"images/wechat.png","modified":1,"renderable":1},{"_id":"themes/bmw/source/js/util.js","path":"js/util.js","modified":1,"renderable":1},{"_id":"themes/bmw/source/js/valine.min.js","path":"js/valine.min.js","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/animation.scss","path":"scss/animation.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/article.scss","path":"scss/article.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/base.scss","path":"scss/base.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/mathjax.scss","path":"scss/mathjax.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/vcomments.scss","path":"scss/vcomments.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/stylus/highlight.styl","path":"stylus/highlight.styl","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/layout/about.scss","path":"scss/layout/about.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/layout/category.scss","path":"scss/layout/category.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/layout/friend.scss","path":"scss/layout/friend.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/layout/home.scss","path":"scss/layout/home.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/layout/index.scss","path":"scss/layout/index.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/layout/post.scss","path":"scss/layout/post.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/layout/tag.scss","path":"scss/layout/tag.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/partial/footer.scss","path":"scss/partial/footer.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/partial/navigation.scss","path":"scss/partial/navigation.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/partial/reward.scss","path":"scss/partial/reward.scss","modified":1,"renderable":1},{"_id":"themes/bmw/source/scss/partial/timeline.scss","path":"scss/partial/timeline.scss","modified":1,"renderable":1}],"Cache":[{"_id":"source/_posts/ast-in-css-module-auto-match.md","hash":"57243d11328b5b236e753cf43e3aeaf92581d5c8","modified":1711007860908},{"_id":"source/_posts/changesets-in-monorepo.md","hash":"028e5a939286e4d64d530cfce91dfd8ce48ff8bc","modified":1711007860908},{"_id":"source/_posts/es6-destructuring.md","hash":"14256da572743cb2ec5dfa96e7bfbe36f0d1662c","modified":1711007860908},{"_id":"source/_posts/es6-map.md","hash":"1c004ce951d740f148ac18fc64df7261bdac2c94","modified":1711007860908},{"_id":"source/_posts/es6-operator.md","hash":"3ea73f56b24d7c69d59810aa2d1abc9d850a79f4","modified":1711007860908},{"_id":"source/_posts/es6-promise.md","hash":"65ecdccb17128c0680d96667944dc9c89a386ac5","modified":1711007860908},{"_id":"source/_posts/es6-proxy.md","hash":"b90e92ade7360df923dc577c4a82a8a7b1cd1e55","modified":1711007860908},{"_id":"source/_posts/es6-reflect.md","hash":"2106ce9eeba6a2fde6b0a1b745ec45aa18dfcc3c","modified":1711007860908},{"_id":"source/_posts/es6-set.md","hash":"90c7946c5ff3c077400cc0b41c39e12577f4839a","modified":1711007860912},{"_id":"source/_posts/es6-symbol.md","hash":"de300a1125fb2b54db5c5ed2159603ef76af7584","modified":1711007860912},{"_id":"source/_posts/github-actions-examples.md","hash":"447bddffb8264f48acf58ad353b7fc217564f892","modified":1711007860912},{"_id":"source/_posts/github-actions-jobs.md","hash":"e9a026ecf09a82d48e770e2f92f095e3a27cbde8","modified":1711007860912},{"_id":"source/_posts/github-actions-intro.md","hash":"a83c76905a6e0914c86b1a926a8796ed856a0d5e","modified":1711007860912},{"_id":"source/_posts/github-actions-learn.md","hash":"0c0b4c67d64f84b9824a2ddef979dcd76fb438e5","modified":1711007860912},{"_id":"source/_posts/github-actions-quickstart.md","hash":"74ba308dae7aed5228948aa59b7cc2b5b200b2fa","modified":1711007860912},{"_id":"source/_posts/github-actions-runs.md","hash":"8c85a6c4f08c951e1418e4dc0098a720d8b93e34","modified":1711007860912},{"_id":"source/_posts/github-actions-sample-eslint-in-pull-request.md","hash":"90053841520f1e0bc092fbf24ac1f975ab2e8070","modified":1711007860912},{"_id":"source/_posts/github-actions-workflows.md","hash":"c741cbe78aaacf2cd443d5de96826ca6c850fea0","modified":1711007860912},{"_id":"source/_posts/react-performance optimization.md","hash":"4c5ab18461891d2786c41e8993815e6135dfb1a4","modified":1711007860912},{"_id":"source/_posts/react-usedeferredvalue.md","hash":"f33a9314f722fe6eca1fcbf090ae11385dfe0771","modified":1711007860912},{"_id":"source/_posts/react-usetransition.md","hash":"6c1e1d0c887c1d92d76590a8059e369ba96b9409","modified":1711007860912},{"_id":"source/_posts/react-zustand.md","hash":"346576eb884e3157eb3e630225a314d9f0cd36fe","modified":1711007860912},{"_id":"source/_posts/snapshot-impact-on-coverage.md","hash":"58a3c96463a7f8f98f131e868f53f4d313d3af30","modified":1711007860912},{"_id":"source/_posts/tsconfig-json.md","hash":"7b1afc50798072eb2c6872bf14a39e362b5a9384","modified":1711007860912},{"_id":"source/_posts/typescript-means.md","hash":"bc4c5fbcdf3d022678d478ee7393daeb696ee0b8","modified":1711007860912},{"_id":"source/_posts/web-api-Background_Tasks_API.md","hash":"3aa6f43ef44402abea7e62e2690b1f283f147a73","modified":1711007860912},{"_id":"source/_posts/web-api-Badging_API.md","hash":"82453a1f547bc895f3c224194f480de5b282210a","modified":1711007860912},{"_id":"source/_posts/web-api-Battery_Status_API.md","hash":"870f88fd4d7d58628b6207a57e160bd019d5f2e9","modified":1711007860912},{"_id":"source/_posts/web-api-Beacon_API.md","hash":"2e8762cb50b47ef63be48e3a0a55560d5c802a3d","modified":1711007860912},{"_id":"source/_posts/web-api-Broadcast_Channel_API.md","hash":"0504a4ad4c7d65cacdd7bba153a9f0f33372357a","modified":1711007860912},{"_id":"source/_posts/web-api-CSS_Font_Loading_API.md","hash":"a70aa5a15f216647b4db137c0f3f6809a2b0268d","modified":1711007860912},{"_id":"source/_posts/web-api-CSS_Custom_Highlight_API.md","hash":"eb8f5f57d11f685cadd845208be6167cb55afa9e","modified":1711007860912},{"_id":"source/_posts/web-api-CSS_Object_Model.md","hash":"5bd07b29ecc410a52d10bb8fb771d8607eeae983","modified":1711007860912},{"_id":"source/_posts/web-api-CSS_Properties_and_Values_API.md","hash":"548f7fa1b5b44745694bd5663ef2a53c3f82d362","modified":1711007860912},{"_id":"source/_posts/web-api-Clipboard_API.md","hash":"5211c807ad9021a26b45de79600238348547e72f","modified":1711007860912},{"_id":"source/_posts/web-api-CSS_Typed_OM_API.md","hash":"c0bb28f4aa8df9dffd22ccc00784b84b1b280d0b","modified":1711007860912},{"_id":"source/_posts/web-api-Cookie_Store_API.md","hash":"ec18e367bb4dc7e3a005f5d65a8f88b6912808b9","modified":1711007860912},{"_id":"source/_posts/web-api-Credential_Management_API.md","hash":"585073152933102838012cfe9f532b072a7df482","modified":1711007860912},{"_id":"source/_posts/web-api-Device_Memory_API.md","hash":"ae2fe144ab1b6a488e9b6738bf1c3772a0232915","modified":1711007860912},{"_id":"source/_posts/web-api-Device_orientation_events.md","hash":"bce158fca1c53b592292b1295b595bb0d2ab985d","modified":1711007860912},{"_id":"source/_posts/web-api-Document_Object_Model.md","hash":"6b6aa4db376bb9becc8a13c2158b74d0e853ac6e","modified":1711007860912},{"_id":"source/_posts/web-api-Document_Picture-in-Picture_API.md","hash":"5bd3185ecff8f32b01455b330625cc43e1633455","modified":1711007860912},{"_id":"source/_posts/web-api-File_API.md","hash":"2a43351ad88a54f6add337fbd54de8f6d1e14391","modified":1711007860912},{"_id":"source/_posts/web-api-EyeDropper_API.md","hash":"d08dc9dd59ac682f13f05f0ea23b0a8d05d6e426","modified":1711007860912},{"_id":"source/_posts/web-api-File_System_API.md","hash":"657e9ddcda140c1123a84ad8795d5fc04b892ca9","modified":1711007860912},{"_id":"source/_posts/web-api-Fullscreen_API.md","hash":"bbba6bce4df29d4abb71da4b60bf70b74f0bdcba","modified":1711007860912},{"_id":"source/_posts/web-api-HTML_Drag_and_Drop_API.md","hash":"a8d1e041b846faaf43e903aec3814d49a32f4349","modified":1711007866936},{"_id":"source/_posts/web-api-Geolocation_API.md","hash":"b8c0fb2c8fe84ea2c73918b540fa0c9c6f639254","modified":1711007860912},{"_id":"source/_posts/web-api-Intersection_Observer_API.md","hash":"be90540b6179daa82a75ffd223ba91c3fb5a18e8","modified":1711007866940},{"_id":"source/_posts/web-api-readme.md","hash":"47a9c9ab7cd14b9c7a9e58d1bb5dd4c8429e5fca","modified":1711007866944},{"_id":"source/_posts/what-is-es6.md","hash":"fd3d6c8c60ca914b00153cba27a84b3ad395a0b3","modified":1711007860912},{"_id":"source/_posts/write-components-elegantly-using-radix.md","hash":"a50deb6fbb3d782319c9c426dd24547d95d9298e","modified":1711007860912},{"_id":"themes/bmw/source/scss/animation.scss","hash":"da39a3ee5e6b4b0d3255bfef95601890afd80709","modified":1711007860916},{"_id":"themes/bmw/LICENSE","hash":"ecd7addf36fdeb14bcef981bfbe7aa121810ac30","modified":1711007860912},{"_id":"themes/bmw/README.md","hash":"c6143c44538c9d6d293af94095dc4b6364a21c3f","modified":1711007860912},{"_id":"themes/bmw/_config.yml","hash":"4a0d6139b20102637dc687496c23364eb775437d","modified":1711007860912},{"_id":"themes/bmw/docs/中文文档.md","hash":"198b7eb8150772d4752baec770f3aea67687ac1e","modified":1711007860912},{"_id":"themes/bmw/layout/archive.ejs","hash":"c770c490af2ac726a905fca7ba8a7ffcf49468e7","modified":1711007860912},{"_id":"themes/bmw/layout/category.ejs","hash":"c770c490af2ac726a905fca7ba8a7ffcf49468e7","modified":1711007860912},{"_id":"themes/bmw/layout/index.ejs","hash":"fea34b0179ec6b7cf91273ba61f853a544d60284","modified":1711007860912},{"_id":"themes/bmw/layout/layout.ejs","hash":"d54e37533cabb21d3ad98f2f44a53030550fb8ec","modified":1711007860912},{"_id":"themes/bmw/layout/post.ejs","hash":"fb5ba7d8910aaf4f6ae811d1cada93aa03a2dc56","modified":1711007860912},{"_id":"themes/bmw/layout/tag.ejs","hash":"c770c490af2ac726a905fca7ba8a7ffcf49468e7","modified":1711007860912},{"_id":"themes/bmw/layout/_partial/comment.ejs","hash":"9d82642448abbd30dc00ae906821968a27f92148","modified":1711007860912},{"_id":"themes/bmw/layout/_partial/fancybox.ejs","hash":"be6f655a475098bf3fa1da218c352b8c07e5df90","modified":1711007860912},{"_id":"themes/bmw/layout/_partial/footer.ejs","hash":"d9e8980f8f1b95a54156a2a29f1d50ea0286e5d5","modified":1711007860912},{"_id":"themes/bmw/layout/_partial/header.ejs","hash":"511350a1c2f77821a9b7a231c7340ac9fb4ce21f","modified":1711007860912},{"_id":"themes/bmw/layout/_partial/mathjax.ejs","hash":"1c71755c63ae74fafb633bfe383ad0a584843259","modified":1711007860912},{"_id":"themes/bmw/layout/_partial/player.ejs","hash":"55f4e5edd194ad7f793d91325e69c0bf2c0ba0a9","modified":1711007860912},{"_id":"themes/bmw/layout/_partial/navigation.ejs","hash":"021c84bfeb638c71bbd39868601d3c9f39658209","modified":1711007860912},{"_id":"themes/bmw/layout/_partial/reward.ejs","hash":"9189965b71044de79e633d365be07ccd796b520b","modified":1711007860912},{"_id":"themes/bmw/layout/_partial/social.ejs","hash":"c37342ff555f67b199e265b5678517d1bfbe7d80","modified":1711007860912},{"_id":"themes/bmw/layout/_partial/timer.ejs","hash":"bfca7a62af6aa01f2dd3ad660392d68a2c68e62c","modified":1711007860912},{"_id":"themes/bmw/layout/component/back-to-up.ejs","hash":"dbe8fc9f58da9d7b6622bb0c652d41c1c8acfb1f","modified":1711007860912},{"_id":"themes/bmw/layout/component/passage-viewer.ejs","hash":"907d2ef218a9a9935c06e0434e89275f9548de17","modified":1711007860912},{"_id":"themes/bmw/layout/component/timeline.ejs","hash":"a5e3ea8779f22250edbcf06e6d4873ba056ee8a3","modified":1711007860912},{"_id":"themes/bmw/source/css/base.css.map","hash":"96f74f144960dc1af4f7eda0edb955fde4a78ed5","modified":1711007860912},{"_id":"themes/bmw/source/css/base.css","hash":"dc44d009646091562cda4fc5b6cb6912779be6a7","modified":1711007860912},{"_id":"themes/bmw/source/css/github-markdown.css","hash":"0410ba978d226febee6d3236e8c5147689771299","modified":1711007860912},{"_id":"themes/bmw/source/css/highlight.css","hash":"ce8f7a91da7e2980e3778cef0bcff2a5e4b66b75","modified":1711007860912},{"_id":"themes/bmw/source/css/prism.css","hash":"a3acad3ed1d1d0a4f265d772f6cb190107d72e55","modified":1711007860912},{"_id":"themes/bmw/source/icon/demo_fontclass.html","hash":"52e0e3bb43e5fab3245cd6dbee11a2bf6fe8a46e","modified":1711007860912},{"_id":"themes/bmw/source/icon/iconfont.css","hash":"7c38a344145825ed80bc1e4da757a4733fb50652","modified":1711007860912},{"_id":"themes/bmw/source/icon/iconfont.eot","hash":"adc3cc9072b4d2f3939fb2f177ddcf7bd4ab009a","modified":1711007860912},{"_id":"themes/bmw/source/icon/iconfont.svg","hash":"f169491400b047eae7108fcd600b2dae5e457ad3","modified":1711007860912},{"_id":"themes/bmw/source/icon/iconfont.js","hash":"c5e9d861865c112c1b9971e0409503ed95c815c0","modified":1711007860912},{"_id":"themes/bmw/source/icon/iconfont.ttf","hash":"0a3b2a7882c61d6b4c85fe4e72f9f26948c6758d","modified":1711007860912},{"_id":"themes/bmw/source/icon/iconfont.woff","hash":"6dd1f927e13de5db063a4898e563a70a14e13b80","modified":1711007860912},{"_id":"themes/bmw/source/images/favicon.ico","hash":"cc7c201861748e92f4809507096df74a40ef496a","modified":1711007860916},{"_id":"themes/bmw/source/images/alipay.png","hash":"d58434f2543e983ecb2e2240d92bdc825e40fa60","modified":1711007860912},{"_id":"themes/bmw/source/images/touch-icon.png","hash":"df5a490c2e8d549ca767505fbe46eed3cbe3df43","modified":1711007860916},{"_id":"themes/bmw/source/images/wechat.png","hash":"4742a2f020b5be1d9b12681faaeace8a7c91c570","modified":1711007860916},{"_id":"themes/bmw/source/js/util.js","hash":"e934cc45e3f7e5f5be3618ba9e9a1f4637482a7b","modified":1711007860916},{"_id":"themes/bmw/source/scss/article.scss","hash":"ed53f9ee14f84c651fd6b3deb864d4362508e64a","modified":1711007860916},{"_id":"themes/bmw/source/scss/base.scss","hash":"dc8ece1d059dc3669690bfd9feda866bd590e71c","modified":1711007860916},{"_id":"themes/bmw/source/scss/mathjax.scss","hash":"1c505af96fa77d65ad5d13081c71a612e2f9587f","modified":1711007860916},{"_id":"themes/bmw/source/scss/vcomments.scss","hash":"6f0d9b22aa0988831c1700b8c5ef55bc655f4b50","modified":1711007860916},{"_id":"themes/bmw/source/stylus/highlight.styl","hash":"8061950ee824c1b91bee01bd3373d858dc9296a9","modified":1711007860916},{"_id":"themes/bmw/source/scss/layout/about.scss","hash":"b5530f7eba54053a504014e3d13d6c4fddfca65e","modified":1711007860916},{"_id":"themes/bmw/source/scss/layout/category.scss","hash":"71e35eee5232fb33b5ea40d64d2f1073db798838","modified":1711007860916},{"_id":"themes/bmw/source/scss/layout/friend.scss","hash":"d722788163872ac59bd138c5bd5ffe0ac5b75459","modified":1711007860916},{"_id":"themes/bmw/source/scss/layout/home.scss","hash":"0b3905cf565219cf970c512351c1b918ab802a02","modified":1711007860916},{"_id":"themes/bmw/source/scss/layout/index.scss","hash":"21f96d488fe8b64ff2ab016fab9e8a1c02a87d30","modified":1711007860916},{"_id":"themes/bmw/source/scss/layout/post.scss","hash":"1ed149bf23774237c90f68610336a43c190d98e2","modified":1711007860916},{"_id":"themes/bmw/source/scss/layout/tag.scss","hash":"46611ae788ed3cc5185f909864da26f012c1c978","modified":1711007860916},{"_id":"themes/bmw/source/scss/partial/footer.scss","hash":"38b7bf06a2918c3b8fff8103de202860e312ca4d","modified":1711007860916},{"_id":"themes/bmw/source/scss/partial/navigation.scss","hash":"29dafd5e8a8cfa45f7069ef40f5ef3e499b60124","modified":1711007860916},{"_id":"themes/bmw/source/scss/partial/reward.scss","hash":"32e04d72f58098affa010e59f8f1f63da06374e2","modified":1711007860916},{"_id":"themes/bmw/source/scss/partial/timeline.scss","hash":"066c1e7a8e3a956d5885c104b8236c9803123b72","modified":1711007860916},{"_id":"themes/bmw/source/js/valine.min.js","hash":"ede5d4e0bc808cc8d9852b176237dc9b951a7045","modified":1711007860916},{"_id":"public/sitemap.xml","hash":"a32807835a11b7ae5b002214e12b0cf2acbcb77d","modified":1711007868907},{"_id":"public/web-api-Intersection_Observer_API/index.html","hash":"6149c71cca85a90e620f51e025fd52daae966a35","modified":1711007868907},{"_id":"public/web-api-HTML_Drag_and_Drop_API/index.html","hash":"7ac2644ea503cd2650a6856d63d9c50a1e579ada","modified":1711007868907},{"_id":"public/web-api-Geolocation_API/index.html","hash":"341f27d753876bf871bbbad87f950297cf1ae851","modified":1711007868907},{"_id":"public/web-api-Fullscreen_API/index.html","hash":"4036233e53e3b475a3ff993a3eaa2d284ba0dde1","modified":1711007868907},{"_id":"public/web-api-File_System_API/index.html","hash":"4ada8e3935e62d09c40fbd6af15dbe58f8bdcf33","modified":1711007868907},{"_id":"public/web-api-File_API/index.html","hash":"54d6cf1019a2ba81b5a682448f0e4466077546b1","modified":1711007868907},{"_id":"public/web-api-EyeDropper_API/index.html","hash":"a8faaea754be648723652953e061f48ba3ae06fe","modified":1711007868907},{"_id":"public/web-api-Document_Picture-in-Picture_API/index.html","hash":"c2c942df52f65945a54dbbfd7cb7742851a27aa9","modified":1711007868907},{"_id":"public/web-api-Device_orientation_events/index.html","hash":"4fa6b1c85a7b6625bd50f2f7448e943b6d281ed9","modified":1711007868907},{"_id":"public/web-api-Document_Object_Model/index.html","hash":"3c16307ae0b3017ee9f313e9b71765170dccb719","modified":1711007868907},{"_id":"public/web-api-Device_Memory_API/index.html","hash":"80a7526e6935117387a67328c5ee4aa5d7839f6d","modified":1711007868907},{"_id":"public/web-api-Credential_Management_API/index.html","hash":"327d8e98cc14b7ffa17ca09a7ac42b8ac765ca39","modified":1711007868907},{"_id":"public/web-api-Cookie_Store_API/index.html","hash":"8b806e6734c03a6d204d673b12d628d35c9917f7","modified":1711007868907},{"_id":"public/web-api-Clipboard_API/index.html","hash":"5598dca405cafaf876ca28b9a145813eff0fe4cf","modified":1711007868907},{"_id":"public/web-api-CSS_Object_Model/index.html","hash":"2ed9852fdb3885add1eb5d5713585b38871ea11c","modified":1711007868907},{"_id":"public/web-api-CSS_Typed_OM_API/index.html","hash":"b3db97df636aa999411a4f3603b355b322c7aa63","modified":1711007868907},{"_id":"public/web-api-CSS_Properties_and_Values_API/index.html","hash":"ad41b3c44ffd4fd3cc58cb5bdca1279483c35635","modified":1711007868907},{"_id":"public/web-api-CSS_Font_Loading_API/index.html","hash":"305dadd531108da4a978de1dbcc0baf1a338c4d2","modified":1711007868907},{"_id":"public/web-api-CSS_Custom_Highlight_API/index.html","hash":"e191747355f6058ddbcd1c2e6e611381e46be36d","modified":1711007868907},{"_id":"public/web-api-Broadcast_Channel_API/index.html","hash":"234ff87d79bfc678e79ea8c105fbd80f9eb56c96","modified":1711007868907},{"_id":"public/web-api-Battery_Status_API/index.html","hash":"f2a7950f25a145888252a2ec8e105e264e9bca3f","modified":1711007868907},{"_id":"public/web-api-Background_Tasks_API/index.html","hash":"25e9e0335fbd5b4a7b92fc8a357cc0fa726d03d9","modified":1711007868907},{"_id":"public/web-api-Beacon_API/index.html","hash":"785f3a5a6ae2e4ebdfff8370cdf916480a7cf5fd","modified":1711007868907},{"_id":"public/web-api-Badging_API/index.html","hash":"c5320a14f29c29dde0142c6272bbfca6989e90f8","modified":1711007868907},{"_id":"public/web-api-readme/index.html","hash":"8fc6468cd7a9fe8077d187ff008c71f5e2a02816","modified":1711007868907},{"_id":"public/snapshot-impact-on-coverage/index.html","hash":"8b3b718ca7751d02e12004d19955fc0332879623","modified":1711007868907},{"_id":"public/github-actions-sample-eslint-in-pull-request/index.html","hash":"6786e65db48b46dd33c16595dfa8bd34f0dc04ce","modified":1711007868907},{"_id":"public/react-zustand/index.html","hash":"883b442bca31c2b65c056603acc0def1f64b04bd","modified":1711007868907},{"_id":"public/changesets-in-monorepo/index.html","hash":"67893ff325c340bda2fe8902fc705018def5495c","modified":1711007868907},{"_id":"public/tsconfig-json/index.html","hash":"b0732728c68bc0241689daf62abaf622979e8769","modified":1711007868907},{"_id":"public/typescript-means/index.html","hash":"916f6879c303e628c59bc45ade6247b6e542fda4","modified":1711007868907},{"_id":"public/ast-in-css-module-auto-match/index.html","hash":"bfcfd9fb24a63145f957e7d01a6dc04b315f620d","modified":1711007868907},{"_id":"public/react-usedeferredvalue/index.html","hash":"4e0b01f17f9341c0ba1edfc606b784dd9937c703","modified":1711007868907},{"_id":"public/react-usetransition/index.html","hash":"62a14d078edf44421a620c232dbee4543458aab2","modified":1711007868907},{"_id":"public/react-performance optimization/index.html","hash":"ffe7025983d89b966b17cf1304883b2495b18f26","modified":1711007868907},{"_id":"public/es6-destructuring/index.html","hash":"824b7937ca87887421b100221883d44c2c2fd410","modified":1711007868907},{"_id":"public/es6-operator/index.html","hash":"524720478e7c4812493a4748a5f9293dc6c08ffc","modified":1711007868907},{"_id":"public/es6-symbol/index.html","hash":"2836e5c9a870482371ac07860f094ce5461e7379","modified":1711007868907},{"_id":"public/es6-set/index.html","hash":"d6d2445419101628611e6a011e4a481928b617e0","modified":1711007868907},{"_id":"public/es6-map/index.html","hash":"2f23f11412be13dffeb2942464d548e70758a7b2","modified":1711007868907},{"_id":"public/es6-proxy/index.html","hash":"83cfe34e5b5fa6f24824e40f6bd1affc3de5c969","modified":1711007868907},{"_id":"public/es6-reflect/index.html","hash":"81fab0cfdff88507fe0f1774f04fce5861dba97c","modified":1711007868907},{"_id":"public/github-actions-runs/index.html","hash":"dd230fb1c430ec3f209b4cb35fe52f12153c49ca","modified":1711007868907},{"_id":"public/github-actions-jobs/index.html","hash":"775d64cdf6060ccb75d969abade5ec4b204291cf","modified":1711007868907},{"_id":"public/github-actions-workflows/index.html","hash":"46e33c582ed0364c578bf182ebc0c40488a2c726","modified":1711007868907},{"_id":"public/github-actions-examples/index.html","hash":"39634bf779bcceec7c5acacef8786987f8df2132","modified":1711007868907},{"_id":"public/github-actions-learn/index.html","hash":"959040ee41169098728bc2c24c740c7688225759","modified":1711007868907},{"_id":"public/github-actions-quickstart/index.html","hash":"3f13a993321f4a3a1ef7fd1083990f878ef0dc2d","modified":1711007868907},{"_id":"public/github-actions-intro/index.html","hash":"8f87b2487595db1583b4d14834b6b1b6e06a5272","modified":1711007868907},{"_id":"public/write-components-elegantly-using-radix/index.html","hash":"782e787f778989e8c7db5ba01793eca546b926b0","modified":1711007868907},{"_id":"public/es6-promise/index.html","hash":"714618d136ebe12b869e1ab6001474eb2eeaf031","modified":1711007868907},{"_id":"public/what-is-es6/index.html","hash":"30af791fcb5019019245667d6963aaca32206a09","modified":1711007868907},{"_id":"public/archives/index.html","hash":"ce79f277ec780b1452691cc7d76a42571687b6a9","modified":1711007868907},{"_id":"public/archives/page/2/index.html","hash":"25ba4ab170899393c8b320a8f31aa33a47e06ffc","modified":1711007868907},{"_id":"public/archives/page/3/index.html","hash":"64b636ac291daaf63d7349cb4409d2752b5a11ba","modified":1711007868907},{"_id":"public/archives/page/4/index.html","hash":"746de03fb1ec6cbabe715a45fc1c5e125ddbef4e","modified":1711007868907},{"_id":"public/archives/page/5/index.html","hash":"ff8f0326cc7dc627743d3b8420164e727eeb554b","modified":1711007868907},{"_id":"public/archives/page/6/index.html","hash":"1df6a8808082cf631fda6a9c8528ef901fe1be39","modified":1711007868907},{"_id":"public/archives/2023/index.html","hash":"7a19cc736c1811541260be93fdd443e78f7247f6","modified":1711007868907},{"_id":"public/archives/2023/page/2/index.html","hash":"3280bb99e56a1a681b6ba8f34451a83457aba51c","modified":1711007868907},{"_id":"public/archives/2023/page/3/index.html","hash":"2001bd93b25e7bebef1a4c8c6ec09f2a468672b4","modified":1711007868907},{"_id":"public/archives/2023/07/index.html","hash":"9494b8fd085fa553126e52e813b031b681a487c0","modified":1711007868907},{"_id":"public/archives/2023/07/page/2/index.html","hash":"481eb1ddbe96dcb74a51b4eb662dde907fde47ea","modified":1711007868907},{"_id":"public/archives/2023/07/page/3/index.html","hash":"e386dda5d9a815499c260f2898e6fc2436095486","modified":1711007868907},{"_id":"public/archives/2023/08/index.html","hash":"7a81fda16f4297bc5c058dc58f467019948cd1bb","modified":1711007868907},{"_id":"public/archives/2023/09/index.html","hash":"967167523f22a30918f63ba35c89fc6f12c3df1b","modified":1711007868907},{"_id":"public/archives/2023/12/index.html","hash":"0efeaf417291a0adf154bba67e6cd43a63cee22b","modified":1711007868907},{"_id":"public/archives/2024/index.html","hash":"7470f376b0862edc8f0cccfae12310955162936c","modified":1711007868907},{"_id":"public/archives/2024/page/2/index.html","hash":"6b14c50423434924ed928e0fb676e507bca6099d","modified":1711007868907},{"_id":"public/archives/2024/page/3/index.html","hash":"3cf46b672b33d93d3ce3e0075fa631bd4e141ad3","modified":1711007868907},{"_id":"public/archives/2024/01/index.html","hash":"c9b18e160a31bc46f2f0eec720aacdbfa8b1a373","modified":1711007868907},{"_id":"public/archives/2024/02/index.html","hash":"828c002ac2adfc72ac48706f6eaee5d393dbf2aa","modified":1711007868907},{"_id":"public/archives/2024/03/index.html","hash":"b1655edbdb3b5d1a040704fae17df2194bd3eabd","modified":1711007868907},{"_id":"public/archives/2024/03/page/2/index.html","hash":"968e97ae71fb2a0ed74aa37a688d2397f153f883","modified":1711007868907},{"_id":"public/archives/2024/03/page/3/index.html","hash":"9e9e753a4ad59eafd589a6c7aec8af48abd98910","modified":1711007868907},{"_id":"public/categories/JavaScript/index.html","hash":"88aaa0d44421ff7cd06762a0ddd1867f8523db71","modified":1711007868907},{"_id":"public/categories/JavaScript/page/2/index.html","hash":"2a5d7743b2dc116e9e00c2e9888258f44d984f53","modified":1711007868907},{"_id":"public/categories/JavaScript/page/3/index.html","hash":"44d85e19e335fb69f17a983d63418461cc6123c1","modified":1711007868907},{"_id":"public/categories/工程化/index.html","hash":"f79a45a12a61522958b894f1a806d03d92f02327","modified":1711007868907},{"_id":"public/categories/工程化/page/2/index.html","hash":"8529b691041d0ec7976bd8f54e2a7063eaf3a701","modified":1711007868907},{"_id":"public/categories/React/index.html","hash":"bee1300213b423c763f587aa18e443051ee72dd2","modified":1711007868907},{"_id":"public/categories/TypeScript/index.html","hash":"04c8c07f87aa770fe7c2a54f57b218bec735baf2","modified":1711007868907},{"_id":"public/categories/Web-API/index.html","hash":"0ff7206e06e2ee62452863b4f3b15109f9c8e173","modified":1711007868907},{"_id":"public/categories/Web-API/page/2/index.html","hash":"d3fbc2746fd58cf8d08a77dfdfba148cd9dca8fe","modified":1711007868907},{"_id":"public/index.html","hash":"10d6ceb7e688a2578a56e3c3ec2d88a2346d00d0","modified":1711007868907},{"_id":"public/page/2/index.html","hash":"4135055ea0b24dbfa52a3cfb877725e1a695e67c","modified":1711007868907},{"_id":"public/page/3/index.html","hash":"a6cbb1ce110252d170cdf3437fb7b57c27d41a11","modified":1711007868907},{"_id":"public/page/4/index.html","hash":"c34ad022cf7845b16b80d874b9e7ccf2452d7e0c","modified":1711007868907},{"_id":"public/page/5/index.html","hash":"4b703459bba082e65452f3b7f050c99e65215ee9","modified":1711007868907},{"_id":"public/page/6/index.html","hash":"f48415e59bf3932809623133aa6faad9c0d6cece","modified":1711007868907},{"_id":"public/tags/ast/index.html","hash":"f877fbfc68535dd9ecc32eb00ce92030b0b41927","modified":1711007868907},{"_id":"public/tags/css-module/index.html","hash":"655fb4edfb699f61400683069a8fbbfd1281841c","modified":1711007868907},{"_id":"public/tags/changesets/index.html","hash":"7128db32fc09dd4c4448f06cb9a1e9b5620808eb","modified":1711007868907},{"_id":"public/tags/es6/index.html","hash":"993eac64fb2d9f476c5506e4e9656eaa893cfe82","modified":1711007868907},{"_id":"public/tags/javascript/index.html","hash":"85eae5dfd0459adca55e324a81d3398e8a49c66d","modified":1711007868907},{"_id":"public/tags/github-actions/index.html","hash":"790c60051871a4d3106e534a8218f96982ca87c3","modified":1711007868907},{"_id":"public/tags/react/index.html","hash":"454b4b6086db82f5199ec89bf804c8561aa8f5dc","modified":1711007868907},{"_id":"public/tags/zustand/index.html","hash":"f754f2d6a1fe11cf8f49cbbd0de9db8cf1d6245b","modified":1711007868907},{"_id":"public/tags/react-store/index.html","hash":"51b2d01c005c9960c1c678d901d9594141843186","modified":1711007868907},{"_id":"public/tags/jest/index.html","hash":"4a10633b5efd3553dd5e898dc1794b77e88c33e1","modified":1711007868907},{"_id":"public/tags/typescript/index.html","hash":"6bdbaf3e31eb40b5b119db59f7555435df359d08","modified":1711007868907},{"_id":"public/tags/webapi/index.html","hash":"0c95184d3270687aa46612090991d725f7ed2f3f","modified":1711007868907},{"_id":"public/tags/webapi/page/2/index.html","hash":"91e7b4449930fec2f346e6f9b4cb74714c64ed11","modified":1711007868907},{"_id":"public/tags/webapi/page/3/index.html","hash":"024442d702d4d1de5cf319502284f9c57d544c11","modified":1711007868907},{"_id":"public/tags/Background-Tasks/index.html","hash":"ff225c860e3d522b13dd4ec274d4e15dae448b70","modified":1711007868907},{"_id":"public/tags/Badging/index.html","hash":"fe5b600d91f1dc9b393c1e337264fad0f41b6acc","modified":1711007868907},{"_id":"public/tags/Battery-Status/index.html","hash":"d9460ae5a9d771e7ce795f561fedfe34a70c8ffe","modified":1711007868907},{"_id":"public/tags/Beacon/index.html","hash":"61a9c8785cb53057a5666048dd491cea8dbfae3c","modified":1711007868907},{"_id":"public/tags/Broadcast-Channel/index.html","hash":"041325362eaf16dc3e7816761b1b96b18ad073e7","modified":1711007868907},{"_id":"public/tags/CSS-Font-Loading/index.html","hash":"36a474c9779da2b21555a34e96a20d82dc4dfe27","modified":1711007868907},{"_id":"public/tags/CSS-Custom-Highlight/index.html","hash":"86548c16a5d29a015ba229eddaf855f9206c79a5","modified":1711007868907},{"_id":"public/tags/CSSOM/index.html","hash":"c22b3060977eba45a51ae7bcdcb16cc0a7d066be","modified":1711007868907},{"_id":"public/tags/CSS-Properties-and-Values/index.html","hash":"830216d994c58aa14839e8ee7bd6b215931402d1","modified":1711007868907},{"_id":"public/tags/Clipboard/index.html","hash":"c94c615b3402291fb6c108a84fe930953e9015f7","modified":1711007868907},{"_id":"public/tags/CSS-Typed-OM/index.html","hash":"a9a8b2dd4c9bb327e6402dfaf91a2a465a2c199d","modified":1711007868907},{"_id":"public/tags/CookieStore/index.html","hash":"b3ad027a76e396feddef7b614f25a027ea3a8d4e","modified":1711007868907},{"_id":"public/tags/Credential-Management/index.html","hash":"166c55809ce55db272fc5cf548241a6945326b06","modified":1711007868907},{"_id":"public/tags/Device-Memory/index.html","hash":"33fd1224a1c1fc07745813fe11a05c4a4edcb54a","modified":1711007868907},{"_id":"public/tags/DOM/index.html","hash":"195a6f9160cc838df1932813077359f5e0c74ee6","modified":1711007868907},{"_id":"public/tags/Device-Orientation/index.html","hash":"58aae53bbfc4adbbf5a3f0e1048e0e789697ecb7","modified":1711007868907},{"_id":"public/tags/Document-Picture-in-Picture/index.html","hash":"4b2bb8eebc9c76bdc9de0cc52159e7b307f01bda","modified":1711007868907},{"_id":"public/tags/File/index.html","hash":"9413979bb641da6d346ba10b440596ca5a17b443","modified":1711007868907},{"_id":"public/tags/EyeDropper/index.html","hash":"577dfcc1e412d3cb9939487b6d131ec0a612c3c0","modified":1711007868907},{"_id":"public/tags/File-System/index.html","hash":"421c2733c9a2036492736c5bf3f010f411d0aa91","modified":1711007868907},{"_id":"public/tags/Fullscreen/index.html","hash":"050bc3be7b0b267498037dcedf52ee1ba7fb0498","modified":1711007868907},{"_id":"public/tags/Drag-Drop/index.html","hash":"f505542ddd77c8afb6a4c312add1c9656d919b6a","modified":1711007868907},{"_id":"public/tags/Geolocation/index.html","hash":"47e36634d365aa1f726220b586e6b666014daac9","modified":1711007868907},{"_id":"public/tags/Intersection-Observer/index.html","hash":"6521389466acedc072a92492b0441eec244d9e64","modified":1711007868907},{"_id":"public/tags/radix/index.html","hash":"771c4fcbd7951099245bef4e99216ff9d904ea14","modified":1711007868907},{"_id":"public/scss/animation.scss","hash":"da39a3ee5e6b4b0d3255bfef95601890afd80709","modified":1711007868907},{"_id":"public/css/base.css.map","hash":"96f74f144960dc1af4f7eda0edb955fde4a78ed5","modified":1711007868907},{"_id":"public/icon/iconfont.eot","hash":"adc3cc9072b4d2f3939fb2f177ddcf7bd4ab009a","modified":1711007868907},{"_id":"public/icon/iconfont.svg","hash":"f169491400b047eae7108fcd600b2dae5e457ad3","modified":1711007868907},{"_id":"public/icon/iconfont.ttf","hash":"0a3b2a7882c61d6b4c85fe4e72f9f26948c6758d","modified":1711007868907},{"_id":"public/icon/iconfont.woff","hash":"6dd1f927e13de5db063a4898e563a70a14e13b80","modified":1711007868907},{"_id":"public/images/alipay.png","hash":"d58434f2543e983ecb2e2240d92bdc825e40fa60","modified":1711007868907},{"_id":"public/images/favicon.ico","hash":"cc7c201861748e92f4809507096df74a40ef496a","modified":1711007868907},{"_id":"public/images/touch-icon.png","hash":"df5a490c2e8d549ca767505fbe46eed3cbe3df43","modified":1711007868907},{"_id":"public/images/wechat.png","hash":"4742a2f020b5be1d9b12681faaeace8a7c91c570","modified":1711007868907},{"_id":"public/scss/article.scss","hash":"ed53f9ee14f84c651fd6b3deb864d4362508e64a","modified":1711007868907},{"_id":"public/scss/base.scss","hash":"dc8ece1d059dc3669690bfd9feda866bd590e71c","modified":1711007868907},{"_id":"public/scss/mathjax.scss","hash":"1c505af96fa77d65ad5d13081c71a612e2f9587f","modified":1711007868907},{"_id":"public/scss/vcomments.scss","hash":"6f0d9b22aa0988831c1700b8c5ef55bc655f4b50","modified":1711007868907},{"_id":"public/scss/layout/about.scss","hash":"b5530f7eba54053a504014e3d13d6c4fddfca65e","modified":1711007868907},{"_id":"public/scss/layout/category.scss","hash":"71e35eee5232fb33b5ea40d64d2f1073db798838","modified":1711007868907},{"_id":"public/scss/layout/friend.scss","hash":"d722788163872ac59bd138c5bd5ffe0ac5b75459","modified":1711007868907},{"_id":"public/scss/layout/home.scss","hash":"0b3905cf565219cf970c512351c1b918ab802a02","modified":1711007868907},{"_id":"public/scss/layout/index.scss","hash":"21f96d488fe8b64ff2ab016fab9e8a1c02a87d30","modified":1711007868907},{"_id":"public/scss/layout/post.scss","hash":"1ed149bf23774237c90f68610336a43c190d98e2","modified":1711007868907},{"_id":"public/scss/layout/tag.scss","hash":"46611ae788ed3cc5185f909864da26f012c1c978","modified":1711007868907},{"_id":"public/scss/partial/footer.scss","hash":"38b7bf06a2918c3b8fff8103de202860e312ca4d","modified":1711007868907},{"_id":"public/scss/partial/navigation.scss","hash":"29dafd5e8a8cfa45f7069ef40f5ef3e499b60124","modified":1711007868907},{"_id":"public/scss/partial/reward.scss","hash":"32e04d72f58098affa010e59f8f1f63da06374e2","modified":1711007868907},{"_id":"public/scss/partial/timeline.scss","hash":"066c1e7a8e3a956d5885c104b8236c9803123b72","modified":1711007868907},{"_id":"public/css/github-markdown.css","hash":"0410ba978d226febee6d3236e8c5147689771299","modified":1711007868907},{"_id":"public/css/highlight.css","hash":"ce8f7a91da7e2980e3778cef0bcff2a5e4b66b75","modified":1711007868907},{"_id":"public/css/base.css","hash":"dc44d009646091562cda4fc5b6cb6912779be6a7","modified":1711007868907},{"_id":"public/css/prism.css","hash":"a3acad3ed1d1d0a4f265d772f6cb190107d72e55","modified":1711007868907},{"_id":"public/icon/demo_fontclass.html","hash":"52e0e3bb43e5fab3245cd6dbee11a2bf6fe8a46e","modified":1711007868907},{"_id":"public/icon/iconfont.css","hash":"7c38a344145825ed80bc1e4da757a4733fb50652","modified":1711007868907},{"_id":"public/icon/iconfont.js","hash":"c5e9d861865c112c1b9971e0409503ed95c815c0","modified":1711007868907},{"_id":"public/js/util.js","hash":"e934cc45e3f7e5f5be3618ba9e9a1f4637482a7b","modified":1711007868907},{"_id":"public/js/valine.min.js","hash":"ede5d4e0bc808cc8d9852b176237dc9b951a7045","modified":1711007868907},{"_id":"public/stylus/highlight.css","hash":"2f39e0fcb3bf8124045ef6fa5f7aec2575a968fc","modified":1711007868907}],"Category":[{"name":"JavaScript","_id":"clu0xwp840004hbp00n411ca0"},{"name":"工程化","_id":"clu0xwp870008hbp03h4efjo9"},{"name":"React","_id":"clu0xwp8n001hhbp0ajtc0mco"},{"name":"TypeScript","_id":"clu0xwp8t0023hbp0av7yc0g9"},{"name":"Web API","_id":"clu0xwp96003bhbp0ftma8opt"}],"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-21T07:57:40.908Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp7x0000hbp02z6q2wyu","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-21T07:57:40.908Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp810001hbp03lau8pzf","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-21T07:57:40.908Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp840003hbp02wrm7u8x","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-21T07:57:40.908Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp850005hbp0cdbu2tbf","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-21T07:57:40.908Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp860006hbp00ltyg8xq","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-21T07:57:40.908Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp870009hbp0bj9mhog6","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-21T07:57:40.908Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp88000ahbp0cmcdb3mc","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-21T07:57:40.908Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8a000dhbp0ascm0046","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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8b000ghbp0hq5696cx","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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8c000khbp0hrxba4aq","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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8e000nhbp04tpee4kb","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":"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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8f000qhbp09usecwpi","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":"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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8g000shbp0als5b3t7","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":"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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8h000uhbp0er9wbl4m","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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8i000yhbp06q87ht8i","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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8j0011hbp0e1laa2sj","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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8k0014hbp06gsr9332","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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8k0016hbp00y2v0ksh","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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8l001ahbp0dkm982o1","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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8m001dhbp09hq2gncb","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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8m001ghbp0g1er7r9h","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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8n001jhbp0d3xceq20","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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8o001nhbp0h6980jgb","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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8p001rhbp0hvpp3be4","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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8q001uhbp08h06bbmh","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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8s001xhbp0c2oo3o4e","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 - 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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8t0021hbp06gq7h96w","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 - 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-api/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-api/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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8u0025hbp098bh3eqw","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-api/Battery_Status_API/index.html\">https://taoliujun.github.io/example/web-api/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-api/Battery_Status_API/index.html\">https://taoliujun.github.io/example/web-api/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 - 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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8u0028hbp04ma81752","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-api/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-api/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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8v002bhbp00ass5g9r","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-api/Broadcast_Channel_API/index.html\">https://taoliujun.github.io/example/web-api/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-api/Broadcast_Channel_API/index.html\">https://taoliujun.github.io/example/web-api/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 - CSS Font Loading","date":"2024-03-04T20:06:50.000Z","url":"web-api-CSS_Font_Loading_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/65](https://github.com/taoliujun/blog/issues/65)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Font_Loading_API\ntags:\n  - webapi\n  - CSS Font Loading\n---\n\n-->\n\n# CSS Font Loading\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API\n\n**CSS Font Loading**和css的`@font-face`所作功能一致，在javascript中加载字体可以更精确控制其加载状态，并用在canvas等场景中。\n\n## 接口\n\n### FontFace\n\n创建字体对象。\n\n```javascript\nconst font1 = new FontFace(\n    'f1',\n    `url(https://fonts.gstatic.com/s/kodemono/v1/A2BYn5pb0QgtVEPFnlYOnYLweZGZuA.woff2) format('woff2')`,\n    {\n      weight: '800'\n    }\n);\nfont1.load();\ndocument.fonts.add(font1);\n```\n\n> 第三个参数描述符和css `@font-face`的属性`font-style`等是一样的作用，用于精确匹配字体源的。\n\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Font_Loading_API/index.html\n\n1. 加载字体，在dom中自动生效，以及在canvas中作图。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/dee25ceb-9ddb-4cf8-9f7f-93382d3211b2)\n\n\n\n\n","source":"_posts/web-api-CSS_Font_Loading_API.md","raw":"---\ntitle: \"Web API - CSS Font Loading\"\ndate: \"2024-03-05T04:06:50Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-CSS_Font_Loading_API\ntags:\n  - webapi\n  - CSS Font Loading\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/65](https://github.com/taoliujun/blog/issues/65)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Font_Loading_API\ntags:\n  - webapi\n  - CSS Font Loading\n---\n\n-->\n\n# CSS Font Loading\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API\n\n**CSS Font Loading**和css的`@font-face`所作功能一致，在javascript中加载字体可以更精确控制其加载状态，并用在canvas等场景中。\n\n## 接口\n\n### FontFace\n\n创建字体对象。\n\n```javascript\nconst font1 = new FontFace(\n    'f1',\n    `url(https://fonts.gstatic.com/s/kodemono/v1/A2BYn5pb0QgtVEPFnlYOnYLweZGZuA.woff2) format('woff2')`,\n    {\n      weight: '800'\n    }\n);\nfont1.load();\ndocument.fonts.add(font1);\n```\n\n> 第三个参数描述符和css `@font-face`的属性`font-style`等是一样的作用，用于精确匹配字体源的。\n\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Font_Loading_API/index.html\n\n1. 加载字体，在dom中自动生效，以及在canvas中作图。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/dee25ceb-9ddb-4cf8-9f7f-93382d3211b2)\n\n\n\n\n","slug":"web-api-CSS_Font_Loading_API","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8y002fhbp0er3h94xj","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/65\">https://github.com/taoliujun/blog/issues/65</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Font_Loading_API\ntags:\n  - webapi\n  - CSS Font Loading\n---\n\n-->\n\n<h1 id=\"CSS-Font-Loading\"><a href=\"#CSS-Font-Loading\" class=\"headerlink\" title=\"CSS Font Loading\"></a>CSS Font Loading</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API</a></p>\n</blockquote>\n<p><strong>CSS Font Loading</strong>和css的<code>@font-face</code>所作功能一致，在javascript中加载字体可以更精确控制其加载状态，并用在canvas等场景中。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"FontFace\"><a href=\"#FontFace\" class=\"headerlink\" title=\"FontFace\"></a>FontFace</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><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> font1 = <span class=\"keyword\">new</span> <span class=\"title class_\">FontFace</span>(</span><br><span class=\"line\">    <span class=\"string\">&#x27;f1&#x27;</span>,</span><br><span class=\"line\">    <span class=\"string\">`url(https://fonts.gstatic.com/s/kodemono/v1/A2BYn5pb0QgtVEPFnlYOnYLweZGZuA.woff2) format(&#x27;woff2&#x27;)`</span>,</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">weight</span>: <span class=\"string\">&#x27;800&#x27;</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">);</span><br><span class=\"line\">font1.<span class=\"title function_\">load</span>();</span><br><span class=\"line\"><span class=\"variable language_\">document</span>.<span class=\"property\">fonts</span>.<span class=\"title function_\">add</span>(font1);</span><br></pre></td></tr></table></figure>\n\n<blockquote>\n<p>第三个参数描述符和css <code>@font-face</code>的属性<code>font-style</code>等是一样的作用，用于精确匹配字体源的。</p>\n</blockquote>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/CSS_Font_Loading_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Font_Loading_API/index.html</a></p>\n<ol>\n<li>加载字体，在dom中自动生效，以及在canvas中作图。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/dee25ceb-9ddb-4cf8-9f7f-93382d3211b2\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/65\">https://github.com/taoliujun/blog/issues/65</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Font_Loading_API\ntags:\n  - webapi\n  - CSS Font Loading\n---\n\n-->\n\n<h1 id=\"CSS-Font-Loading\"><a href=\"#CSS-Font-Loading\" class=\"headerlink\" title=\"CSS Font Loading\"></a>CSS Font Loading</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API</a></p>\n</blockquote>\n<p><strong>CSS Font Loading</strong>和css的<code>@font-face</code>所作功能一致，在javascript中加载字体可以更精确控制其加载状态，并用在canvas等场景中。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"FontFace\"><a href=\"#FontFace\" class=\"headerlink\" title=\"FontFace\"></a>FontFace</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><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> font1 = <span class=\"keyword\">new</span> <span class=\"title class_\">FontFace</span>(</span><br><span class=\"line\">    <span class=\"string\">&#x27;f1&#x27;</span>,</span><br><span class=\"line\">    <span class=\"string\">`url(https://fonts.gstatic.com/s/kodemono/v1/A2BYn5pb0QgtVEPFnlYOnYLweZGZuA.woff2) format(&#x27;woff2&#x27;)`</span>,</span><br><span class=\"line\">    &#123;</span><br><span class=\"line\">      <span class=\"attr\">weight</span>: <span class=\"string\">&#x27;800&#x27;</span></span><br><span class=\"line\">    &#125;</span><br><span class=\"line\">);</span><br><span class=\"line\">font1.<span class=\"title function_\">load</span>();</span><br><span class=\"line\"><span class=\"variable language_\">document</span>.<span class=\"property\">fonts</span>.<span class=\"title function_\">add</span>(font1);</span><br></pre></td></tr></table></figure>\n\n<blockquote>\n<p>第三个参数描述符和css <code>@font-face</code>的属性<code>font-style</code>等是一样的作用，用于精确匹配字体源的。</p>\n</blockquote>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/CSS_Font_Loading_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Font_Loading_API/index.html</a></p>\n<ol>\n<li>加载字体，在dom中自动生效，以及在canvas中作图。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/dee25ceb-9ddb-4cf8-9f7f-93382d3211b2\" alt=\"image\"></p>\n"},{"title":"Web API - CSS Custom Highlight","date":"2024-03-04T18:55:53.000Z","url":"web-api-CSS_Custom_Highlight_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/63](https://github.com/taoliujun/blog/issues/63)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Custom_Highlight_API\ntags:\n  - webapi\n  - CSS Custom Highlight\n---\n\n-->\n\n# CSS Custom Highlight\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API\n\n**CSS Custom Highlight**为页面上的[Range](https://developer.mozilla.org/en-US/docs/Web/API/Range)对象，创建高亮标识，并结合css伪元素`::highlight`自定义显示。\n\n使用场景有*搜索词高亮*、*多人协作时的文本多色高亮*等。\n\n## 接口\n\n### Highlight\n\n创建高亮对象，并包含若干`Range`对象。例如：\n\n```javascript\nconst user1Highlight = new Highlight(range1, range2);\n```\n\n### HighlightRegistry\n\n为高亮对象注册css标识，即可在css中访问。例如：\n\n```javascript\n// javascript\nCSS.highlights.set('user-1-highlight', user1Highlight);\n```\n\n```css\n// css\n::highlight(user-1-highlight) {\n    background-color: yellow;\n    color: black;\n}\n```\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Custom_Highlight_API/index.html\n\n1. 为`Range`区域设置了特殊的样式。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/3362d87f-c006-42b3-8d71-0949e65b7080)\n\n\n\n\n","source":"_posts/web-api-CSS_Custom_Highlight_API.md","raw":"---\ntitle: \"Web API - CSS Custom Highlight\"\ndate: \"2024-03-05T02:55:53Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-CSS_Custom_Highlight_API\ntags:\n  - webapi\n  - CSS Custom Highlight\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/63](https://github.com/taoliujun/blog/issues/63)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Custom_Highlight_API\ntags:\n  - webapi\n  - CSS Custom Highlight\n---\n\n-->\n\n# CSS Custom Highlight\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API\n\n**CSS Custom Highlight**为页面上的[Range](https://developer.mozilla.org/en-US/docs/Web/API/Range)对象，创建高亮标识，并结合css伪元素`::highlight`自定义显示。\n\n使用场景有*搜索词高亮*、*多人协作时的文本多色高亮*等。\n\n## 接口\n\n### Highlight\n\n创建高亮对象，并包含若干`Range`对象。例如：\n\n```javascript\nconst user1Highlight = new Highlight(range1, range2);\n```\n\n### HighlightRegistry\n\n为高亮对象注册css标识，即可在css中访问。例如：\n\n```javascript\n// javascript\nCSS.highlights.set('user-1-highlight', user1Highlight);\n```\n\n```css\n// css\n::highlight(user-1-highlight) {\n    background-color: yellow;\n    color: black;\n}\n```\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Custom_Highlight_API/index.html\n\n1. 为`Range`区域设置了特殊的样式。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/3362d87f-c006-42b3-8d71-0949e65b7080)\n\n\n\n\n","slug":"web-api-CSS_Custom_Highlight_API","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp8z002ihbp04dsqepp4","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/63\">https://github.com/taoliujun/blog/issues/63</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Custom_Highlight_API\ntags:\n  - webapi\n  - CSS Custom Highlight\n---\n\n-->\n\n<h1 id=\"CSS-Custom-Highlight\"><a href=\"#CSS-Custom-Highlight\" class=\"headerlink\" title=\"CSS Custom Highlight\"></a>CSS Custom Highlight</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API</a></p>\n</blockquote>\n<p><strong>CSS Custom Highlight</strong>为页面上的<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Range\">Range</a>对象，创建高亮标识，并结合css伪元素<code>::highlight</code>自定义显示。</p>\n<p>使用场景有<em>搜索词高亮</em>、<em>多人协作时的文本多色高亮</em>等。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Highlight\"><a href=\"#Highlight\" class=\"headerlink\" title=\"Highlight\"></a>Highlight</h3><p>创建高亮对象，并包含若干<code>Range</code>对象。例如：</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\"><span class=\"keyword\">const</span> user1Highlight = <span class=\"keyword\">new</span> <span class=\"title class_\">Highlight</span>(range1, range2);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"HighlightRegistry\"><a href=\"#HighlightRegistry\" class=\"headerlink\" title=\"HighlightRegistry\"></a>HighlightRegistry</h3><p>为高亮对象注册css标识，即可在css中访问。例如：</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=\"comment\">// javascript</span></span><br><span class=\"line\"><span class=\"variable constant_\">CSS</span>.<span class=\"property\">highlights</span>.<span class=\"title function_\">set</span>(<span class=\"string\">&#x27;user-1-highlight&#x27;</span>, user1Highlight);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">// css</span><br><span class=\"line\">::<span class=\"built_in\">highlight</span>(user-<span class=\"number\">1</span>-highlight) &#123;</span><br><span class=\"line\">    <span class=\"attribute\">background-color</span>: yellow;</span><br><span class=\"line\">    <span class=\"attribute\">color</span>: black;</span><br><span class=\"line\">&#125;</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/CSS_Custom_Highlight_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Custom_Highlight_API/index.html</a></p>\n<ol>\n<li>为<code>Range</code>区域设置了特殊的样式。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/3362d87f-c006-42b3-8d71-0949e65b7080\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/63\">https://github.com/taoliujun/blog/issues/63</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Custom_Highlight_API\ntags:\n  - webapi\n  - CSS Custom Highlight\n---\n\n-->\n\n<h1 id=\"CSS-Custom-Highlight\"><a href=\"#CSS-Custom-Highlight\" class=\"headerlink\" title=\"CSS Custom Highlight\"></a>CSS Custom Highlight</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API</a></p>\n</blockquote>\n<p><strong>CSS Custom Highlight</strong>为页面上的<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Range\">Range</a>对象，创建高亮标识，并结合css伪元素<code>::highlight</code>自定义显示。</p>\n<p>使用场景有<em>搜索词高亮</em>、<em>多人协作时的文本多色高亮</em>等。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Highlight\"><a href=\"#Highlight\" class=\"headerlink\" title=\"Highlight\"></a>Highlight</h3><p>创建高亮对象，并包含若干<code>Range</code>对象。例如：</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\"><span class=\"keyword\">const</span> user1Highlight = <span class=\"keyword\">new</span> <span class=\"title class_\">Highlight</span>(range1, range2);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"HighlightRegistry\"><a href=\"#HighlightRegistry\" class=\"headerlink\" title=\"HighlightRegistry\"></a>HighlightRegistry</h3><p>为高亮对象注册css标识，即可在css中访问。例如：</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=\"comment\">// javascript</span></span><br><span class=\"line\"><span class=\"variable constant_\">CSS</span>.<span class=\"property\">highlights</span>.<span class=\"title function_\">set</span>(<span class=\"string\">&#x27;user-1-highlight&#x27;</span>, user1Highlight);</span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">// css</span><br><span class=\"line\">::<span class=\"built_in\">highlight</span>(user-<span class=\"number\">1</span>-highlight) &#123;</span><br><span class=\"line\">    <span class=\"attribute\">background-color</span>: yellow;</span><br><span class=\"line\">    <span class=\"attribute\">color</span>: black;</span><br><span class=\"line\">&#125;</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/CSS_Custom_Highlight_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Custom_Highlight_API/index.html</a></p>\n<ol>\n<li>为<code>Range</code>区域设置了特殊的样式。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/3362d87f-c006-42b3-8d71-0949e65b7080\" alt=\"image\"></p>\n"},{"title":"Web API - CSSOM (CSS_Object_Model)","date":"2024-03-06T23:45:28.000Z","url":"web-api-CSS_Object_Model","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/71](https://github.com/taoliujun/blog/issues/71)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Object_Model\ntags:\n  - webapi\n  - CSSOM\n---\n\n-->\n\n# CSSOM\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model\n\n**CSSOM**全称`CSS Object Model`，它是CSS相关管理接口、事件的合集，例如：\n\n-   CSS单条规则的接口`CSSRule`。\n-   提供高亮方法`registerProperty`的`CSS`接口。\n-   `window.screen`返回的`Screen`接口。\n-   `addEventListener(\"animationend\")`事件处理。\n\n> 类似DOM，也是一系列接口的合集。\n\n这里不一一说明，需要实践具体接口。\n\n\n\n\n","source":"_posts/web-api-CSS_Object_Model.md","raw":"---\ntitle: \"Web API - CSSOM (CSS_Object_Model)\"\ndate: \"2024-03-07T07:45:28Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-CSS_Object_Model\ntags:\n  - webapi\n  - CSSOM\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/71](https://github.com/taoliujun/blog/issues/71)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Object_Model\ntags:\n  - webapi\n  - CSSOM\n---\n\n-->\n\n# CSSOM\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model\n\n**CSSOM**全称`CSS Object Model`，它是CSS相关管理接口、事件的合集，例如：\n\n-   CSS单条规则的接口`CSSRule`。\n-   提供高亮方法`registerProperty`的`CSS`接口。\n-   `window.screen`返回的`Screen`接口。\n-   `addEventListener(\"animationend\")`事件处理。\n\n> 类似DOM，也是一系列接口的合集。\n\n这里不一一说明，需要实践具体接口。\n\n\n\n\n","slug":"web-api-CSS_Object_Model","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp90002lhbp03nsz0wme","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/71\">https://github.com/taoliujun/blog/issues/71</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Object_Model\ntags:\n  - webapi\n  - CSSOM\n---\n\n-->\n\n<h1 id=\"CSSOM\"><a href=\"#CSSOM\" class=\"headerlink\" title=\"CSSOM\"></a>CSSOM</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model</a></p>\n</blockquote>\n<p><strong>CSSOM</strong>全称<code>CSS Object Model</code>，它是CSS相关管理接口、事件的合集，例如：</p>\n<ul>\n<li>CSS单条规则的接口<code>CSSRule</code>。</li>\n<li>提供高亮方法<code>registerProperty</code>的<code>CSS</code>接口。</li>\n<li><code>window.screen</code>返回的<code>Screen</code>接口。</li>\n<li><code>addEventListener(&quot;animationend&quot;)</code>事件处理。</li>\n</ul>\n<blockquote>\n<p>类似DOM，也是一系列接口的合集。</p>\n</blockquote>\n<p>这里不一一说明，需要实践具体接口。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/71\">https://github.com/taoliujun/blog/issues/71</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Object_Model\ntags:\n  - webapi\n  - CSSOM\n---\n\n-->\n\n<h1 id=\"CSSOM\"><a href=\"#CSSOM\" class=\"headerlink\" title=\"CSSOM\"></a>CSSOM</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model</a></p>\n</blockquote>\n<p><strong>CSSOM</strong>全称<code>CSS Object Model</code>，它是CSS相关管理接口、事件的合集，例如：</p>\n<ul>\n<li>CSS单条规则的接口<code>CSSRule</code>。</li>\n<li>提供高亮方法<code>registerProperty</code>的<code>CSS</code>接口。</li>\n<li><code>window.screen</code>返回的<code>Screen</code>接口。</li>\n<li><code>addEventListener(&quot;animationend&quot;)</code>事件处理。</li>\n</ul>\n<blockquote>\n<p>类似DOM，也是一系列接口的合集。</p>\n</blockquote>\n<p>这里不一一说明，需要实践具体接口。</p>\n"},{"title":"Web API - CSS Properties and Values","date":"2024-03-05T02:04:49.000Z","url":"web-api-CSS_Properties_and_Values_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/67](https://github.com/taoliujun/blog/issues/67)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Properties_and_Values_API\ntags:\n  - webapi\n  - CSS Properties and Values\n---\n\n-->\n\n# CSS Properties and Values\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API\n\n**CSS Properties and Values**用于为CSS扩展属性，\n\n> 和`CSS variables`有类似点，但后者只是一个变量，没有CSS属性之特性：比如继承特性。\n\n## 接口\n\n### CSSPropertyRule\n\n属性和值的定义描述。\n\n> syntax选项标识了值的预期语法，如`<color>`。\n\n## 方法\n\n### registerProperty\n\n创建自定义css属性。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Properties_and_Values_API/index.html\n\n1. 两个Div使用了一样的样式，但`registerProperty`注册了**非继承**的属性，所以`.parent1 .item1`并未继承`.parent1`中设置的属性值，而使用了默认值。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9caf3326-17d2-4390-8484-5ec5e2ea835e)\n\n\n\n\n","source":"_posts/web-api-CSS_Properties_and_Values_API.md","raw":"---\ntitle: \"Web API - CSS Properties and Values\"\ndate: \"2024-03-05T10:04:49Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-CSS_Properties_and_Values_API\ntags:\n  - webapi\n  - CSS Properties and Values\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/67](https://github.com/taoliujun/blog/issues/67)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Properties_and_Values_API\ntags:\n  - webapi\n  - CSS Properties and Values\n---\n\n-->\n\n# CSS Properties and Values\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API\n\n**CSS Properties and Values**用于为CSS扩展属性，\n\n> 和`CSS variables`有类似点，但后者只是一个变量，没有CSS属性之特性：比如继承特性。\n\n## 接口\n\n### CSSPropertyRule\n\n属性和值的定义描述。\n\n> syntax选项标识了值的预期语法，如`<color>`。\n\n## 方法\n\n### registerProperty\n\n创建自定义css属性。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Properties_and_Values_API/index.html\n\n1. 两个Div使用了一样的样式，但`registerProperty`注册了**非继承**的属性，所以`.parent1 .item1`并未继承`.parent1`中设置的属性值，而使用了默认值。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9caf3326-17d2-4390-8484-5ec5e2ea835e)\n\n\n\n\n","slug":"web-api-CSS_Properties_and_Values_API","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp91002nhbp0g0evfovn","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/67\">https://github.com/taoliujun/blog/issues/67</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Properties_and_Values_API\ntags:\n  - webapi\n  - CSS Properties and Values\n---\n\n-->\n\n<h1 id=\"CSS-Properties-and-Values\"><a href=\"#CSS-Properties-and-Values\" class=\"headerlink\" title=\"CSS Properties and Values\"></a>CSS Properties and Values</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API</a></p>\n</blockquote>\n<p><strong>CSS Properties and Values</strong>用于为CSS扩展属性，</p>\n<blockquote>\n<p>和<code>CSS variables</code>有类似点，但后者只是一个变量，没有CSS属性之特性：比如继承特性。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"CSSPropertyRule\"><a href=\"#CSSPropertyRule\" class=\"headerlink\" title=\"CSSPropertyRule\"></a>CSSPropertyRule</h3><p>属性和值的定义描述。</p>\n<blockquote>\n<p>syntax选项标识了值的预期语法，如<code>&lt;color&gt;</code>。</p>\n</blockquote>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"registerProperty\"><a href=\"#registerProperty\" class=\"headerlink\" title=\"registerProperty\"></a>registerProperty</h3><p>创建自定义css属性。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/CSS_Properties_and_Values_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Properties_and_Values_API/index.html</a></p>\n<ol>\n<li>两个Div使用了一样的样式，但<code>registerProperty</code>注册了<strong>非继承</strong>的属性，所以<code>.parent1 .item1</code>并未继承<code>.parent1</code>中设置的属性值，而使用了默认值。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9caf3326-17d2-4390-8484-5ec5e2ea835e\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/67\">https://github.com/taoliujun/blog/issues/67</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Properties_and_Values_API\ntags:\n  - webapi\n  - CSS Properties and Values\n---\n\n-->\n\n<h1 id=\"CSS-Properties-and-Values\"><a href=\"#CSS-Properties-and-Values\" class=\"headerlink\" title=\"CSS Properties and Values\"></a>CSS Properties and Values</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API</a></p>\n</blockquote>\n<p><strong>CSS Properties and Values</strong>用于为CSS扩展属性，</p>\n<blockquote>\n<p>和<code>CSS variables</code>有类似点，但后者只是一个变量，没有CSS属性之特性：比如继承特性。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"CSSPropertyRule\"><a href=\"#CSSPropertyRule\" class=\"headerlink\" title=\"CSSPropertyRule\"></a>CSSPropertyRule</h3><p>属性和值的定义描述。</p>\n<blockquote>\n<p>syntax选项标识了值的预期语法，如<code>&lt;color&gt;</code>。</p>\n</blockquote>\n<h2 id=\"方法\"><a href=\"#方法\" class=\"headerlink\" title=\"方法\"></a>方法</h2><h3 id=\"registerProperty\"><a href=\"#registerProperty\" class=\"headerlink\" title=\"registerProperty\"></a>registerProperty</h3><p>创建自定义css属性。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/CSS_Properties_and_Values_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Properties_and_Values_API/index.html</a></p>\n<ol>\n<li>两个Div使用了一样的样式，但<code>registerProperty</code>注册了<strong>非继承</strong>的属性，所以<code>.parent1 .item1</code>并未继承<code>.parent1</code>中设置的属性值，而使用了默认值。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9caf3326-17d2-4390-8484-5ec5e2ea835e\" alt=\"image\"></p>\n"},{"title":"Web API - Clipboard","date":"2024-03-07T17:51:33.000Z","url":"web-api-Clipboard_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/72](https://github.com/taoliujun/blog/issues/72)\n\n<!--hexo\n\n---\nurl: web-api-Clipboard_API\ntags:\n  - webapi\n  - Clipboard\n---\n\n-->\n\n# Clipboard\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API\n\n**Clipboard**提供了对系统剪切板的读取、写入方法。\n\n> 不要再使用`document.execCommand()`了。\n\n## 接口\n\n### Clipboard\n\n使用`Navigator.cliboard`可得到`Clipboard`接口实例，提供了`read`和`write`方法。另外，`readText`和`writeText`方法是一对读取写入文本信息的快捷方法。\n\n### ClipboardItem\n\n剪切板数据对象，包含了数据类型`type`（如`image/png`）和数据流`blob`。\n\n## 方法和属性\n\n略，见示例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Clipboard_API/index.html\n\n1. 复制输入框的文本到系统剪切板中、或从系统剪切板中读取：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/007c9e39-b66b-4910-ad55-e4391c4088bd)\n\n2. 复制canvas的图像数据到剪切板、或从剪切板中读取：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/852608b5-dc86-4c24-9748-55004fee34ce)\n\n\n\n\n","source":"_posts/web-api-Clipboard_API.md","raw":"---\ntitle: \"Web API - Clipboard\"\ndate: \"2024-03-08T01:51:33Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-Clipboard_API\ntags:\n  - webapi\n  - Clipboard\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/72](https://github.com/taoliujun/blog/issues/72)\n\n<!--hexo\n\n---\nurl: web-api-Clipboard_API\ntags:\n  - webapi\n  - Clipboard\n---\n\n-->\n\n# Clipboard\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API\n\n**Clipboard**提供了对系统剪切板的读取、写入方法。\n\n> 不要再使用`document.execCommand()`了。\n\n## 接口\n\n### Clipboard\n\n使用`Navigator.cliboard`可得到`Clipboard`接口实例，提供了`read`和`write`方法。另外，`readText`和`writeText`方法是一对读取写入文本信息的快捷方法。\n\n### ClipboardItem\n\n剪切板数据对象，包含了数据类型`type`（如`image/png`）和数据流`blob`。\n\n## 方法和属性\n\n略，见示例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Clipboard_API/index.html\n\n1. 复制输入框的文本到系统剪切板中、或从系统剪切板中读取：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/007c9e39-b66b-4910-ad55-e4391c4088bd)\n\n2. 复制canvas的图像数据到剪切板、或从剪切板中读取：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/852608b5-dc86-4c24-9748-55004fee34ce)\n\n\n\n\n","slug":"web-api-Clipboard_API","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp92002rhbp0245ig2me","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/72\">https://github.com/taoliujun/blog/issues/72</a></p>\n<!--hexo\n\n---\nurl: web-api-Clipboard_API\ntags:\n  - webapi\n  - Clipboard\n---\n\n-->\n\n<h1 id=\"Clipboard\"><a href=\"#Clipboard\" class=\"headerlink\" title=\"Clipboard\"></a>Clipboard</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API\">https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API</a></p>\n</blockquote>\n<p><strong>Clipboard</strong>提供了对系统剪切板的读取、写入方法。</p>\n<blockquote>\n<p>不要再使用<code>document.execCommand()</code>了。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Clipboard-1\"><a href=\"#Clipboard-1\" class=\"headerlink\" title=\"Clipboard\"></a>Clipboard</h3><p>使用<code>Navigator.cliboard</code>可得到<code>Clipboard</code>接口实例，提供了<code>read</code>和<code>write</code>方法。另外，<code>readText</code>和<code>writeText</code>方法是一对读取写入文本信息的快捷方法。</p>\n<h3 id=\"ClipboardItem\"><a href=\"#ClipboardItem\" class=\"headerlink\" title=\"ClipboardItem\"></a>ClipboardItem</h3><p>剪切板数据对象，包含了数据类型<code>type</code>（如<code>image/png</code>）和数据流<code>blob</code>。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><p>略，见示例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Clipboard_API/index.html\">https://taoliujun.github.io/example/web-api/Clipboard_API/index.html</a></p>\n<ol>\n<li>复制输入框的文本到系统剪切板中、或从系统剪切板中读取：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/007c9e39-b66b-4910-ad55-e4391c4088bd\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>复制canvas的图像数据到剪切板、或从剪切板中读取：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/852608b5-dc86-4c24-9748-55004fee34ce\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/72\">https://github.com/taoliujun/blog/issues/72</a></p>\n<!--hexo\n\n---\nurl: web-api-Clipboard_API\ntags:\n  - webapi\n  - Clipboard\n---\n\n-->\n\n<h1 id=\"Clipboard\"><a href=\"#Clipboard\" class=\"headerlink\" title=\"Clipboard\"></a>Clipboard</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API\">https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API</a></p>\n</blockquote>\n<p><strong>Clipboard</strong>提供了对系统剪切板的读取、写入方法。</p>\n<blockquote>\n<p>不要再使用<code>document.execCommand()</code>了。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Clipboard-1\"><a href=\"#Clipboard-1\" class=\"headerlink\" title=\"Clipboard\"></a>Clipboard</h3><p>使用<code>Navigator.cliboard</code>可得到<code>Clipboard</code>接口实例，提供了<code>read</code>和<code>write</code>方法。另外，<code>readText</code>和<code>writeText</code>方法是一对读取写入文本信息的快捷方法。</p>\n<h3 id=\"ClipboardItem\"><a href=\"#ClipboardItem\" class=\"headerlink\" title=\"ClipboardItem\"></a>ClipboardItem</h3><p>剪切板数据对象，包含了数据类型<code>type</code>（如<code>image/png</code>）和数据流<code>blob</code>。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><p>略，见示例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Clipboard_API/index.html\">https://taoliujun.github.io/example/web-api/Clipboard_API/index.html</a></p>\n<ol>\n<li>复制输入框的文本到系统剪切板中、或从系统剪切板中读取：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/007c9e39-b66b-4910-ad55-e4391c4088bd\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>复制canvas的图像数据到剪切板、或从剪切板中读取：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/852608b5-dc86-4c24-9748-55004fee34ce\" alt=\"image\"></p>\n"},{"title":"Web API - CSS Typed Object Model","date":"2024-03-06T00:54:11.000Z","url":"web-api-CSS_Typed_OM_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/69](https://github.com/taoliujun/blog/issues/69)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Typed_OM_API\ntags:\n  - webapi\n  - CSS Typed OM\n---\n\n-->\n\n# CSS Typed OM\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API\n\n**CSS Typed OM**全称`CSS Typed Object Model`，提供了一系列访问和操作CSS值的方法。\n\n在以往，使用`HTMLElement.style`管理元素的样式，它只是一个`string`类型，管理很笨拙，可读性也差。而本API将CSS值解析为可读性很高的对象，据此可以科学的管理它。\n\n> 和`HTMLElement.style`相比，本API更有可读性，性能更高。\n\n## 接口\n\n有公用类型`CSSStyleValue`和若干特殊类型如`CSSImageValue`、`CSSKeywordValue`等组成。\n\n### CSSStyleValue\n\n它是所有CSS值类型的公用类型，提供了`parse`方法将一个字符串解析成样式对象，例：\n\n```javascript\n// 返回 CSSStyleValue 类型\nCSSStyleValue.parse('color', '#f00');\n// 返回 CSSTransformValue 类型\nCSSStyleValue.parse('transform', 'translate(30px, 20px) rotate(45deg)');\n```\n\n### CSSKeywordValue\n\nCSS保留关键字类型如`initial`，例：\n\n```javascript\n// 返回 CSSKeywordValue {value: 'normal'} 类型，因为normal是保留关键字。\n$0.computedStyleMap().get('font-style');\n```\n\n### 其他类型见MDN\n\n### StylePropertyMapReadOnly\n\n提供`get`、`getAll`等方法读取样式。\n\n### StylePropertyMap\n\n继承于`StylePropertyMapReadOnly`，提供`append`、`set`等方法操作样式，如：\n\n```javascript\n// 将元素的文本颜色设置为红色\n$0.attributeStyleMap.set('color', 'red');\n```\n\n## 方法和属性\n\n### computedStyleMap\n\n`HTMLelement.computedStyleMap()`返回`StylePropertyMapReadOnly`类型。\n\n### attributeStyleMap\n\n`HTMLElement.attributeStyleMap`返回`StylePropertyMap`类型。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Typed_OM_API/index.html\n\n1. 在例子中，打印出元素所有的样式，或打印出指定的样式：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/50ce9bcd-62e4-42de-9368-81c6017b6476)\n\n2. 改变元素的颜色样式：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/7893da8e-63f7-4810-8a93-9ad5cc36cb22)\n\n\n\n\n","source":"_posts/web-api-CSS_Typed_OM_API.md","raw":"---\ntitle: \"Web API - CSS Typed Object Model\"\ndate: \"2024-03-06T08:54:11Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-CSS_Typed_OM_API\ntags:\n  - webapi\n  - CSS Typed OM\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/69](https://github.com/taoliujun/blog/issues/69)\n\n<!--hexo\n\n---\nurl: web-api-CSS_Typed_OM_API\ntags:\n  - webapi\n  - CSS Typed OM\n---\n\n-->\n\n# CSS Typed OM\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API\n\n**CSS Typed OM**全称`CSS Typed Object Model`，提供了一系列访问和操作CSS值的方法。\n\n在以往，使用`HTMLElement.style`管理元素的样式，它只是一个`string`类型，管理很笨拙，可读性也差。而本API将CSS值解析为可读性很高的对象，据此可以科学的管理它。\n\n> 和`HTMLElement.style`相比，本API更有可读性，性能更高。\n\n## 接口\n\n有公用类型`CSSStyleValue`和若干特殊类型如`CSSImageValue`、`CSSKeywordValue`等组成。\n\n### CSSStyleValue\n\n它是所有CSS值类型的公用类型，提供了`parse`方法将一个字符串解析成样式对象，例：\n\n```javascript\n// 返回 CSSStyleValue 类型\nCSSStyleValue.parse('color', '#f00');\n// 返回 CSSTransformValue 类型\nCSSStyleValue.parse('transform', 'translate(30px, 20px) rotate(45deg)');\n```\n\n### CSSKeywordValue\n\nCSS保留关键字类型如`initial`，例：\n\n```javascript\n// 返回 CSSKeywordValue {value: 'normal'} 类型，因为normal是保留关键字。\n$0.computedStyleMap().get('font-style');\n```\n\n### 其他类型见MDN\n\n### StylePropertyMapReadOnly\n\n提供`get`、`getAll`等方法读取样式。\n\n### StylePropertyMap\n\n继承于`StylePropertyMapReadOnly`，提供`append`、`set`等方法操作样式，如：\n\n```javascript\n// 将元素的文本颜色设置为红色\n$0.attributeStyleMap.set('color', 'red');\n```\n\n## 方法和属性\n\n### computedStyleMap\n\n`HTMLelement.computedStyleMap()`返回`StylePropertyMapReadOnly`类型。\n\n### attributeStyleMap\n\n`HTMLElement.attributeStyleMap`返回`StylePropertyMap`类型。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/CSS_Typed_OM_API/index.html\n\n1. 在例子中，打印出元素所有的样式，或打印出指定的样式：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/50ce9bcd-62e4-42de-9368-81c6017b6476)\n\n2. 改变元素的颜色样式：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/7893da8e-63f7-4810-8a93-9ad5cc36cb22)\n\n\n\n\n","slug":"web-api-CSS_Typed_OM_API","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp92002uhbp078vbd12m","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/69\">https://github.com/taoliujun/blog/issues/69</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Typed_OM_API\ntags:\n  - webapi\n  - CSS Typed OM\n---\n\n-->\n\n<h1 id=\"CSS-Typed-OM\"><a href=\"#CSS-Typed-OM\" class=\"headerlink\" title=\"CSS Typed OM\"></a>CSS Typed OM</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API</a></p>\n</blockquote>\n<p><strong>CSS Typed OM</strong>全称<code>CSS Typed Object Model</code>，提供了一系列访问和操作CSS值的方法。</p>\n<p>在以往，使用<code>HTMLElement.style</code>管理元素的样式，它只是一个<code>string</code>类型，管理很笨拙，可读性也差。而本API将CSS值解析为可读性很高的对象，据此可以科学的管理它。</p>\n<blockquote>\n<p>和<code>HTMLElement.style</code>相比，本API更有可读性，性能更高。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><p>有公用类型<code>CSSStyleValue</code>和若干特殊类型如<code>CSSImageValue</code>、<code>CSSKeywordValue</code>等组成。</p>\n<h3 id=\"CSSStyleValue\"><a href=\"#CSSStyleValue\" class=\"headerlink\" title=\"CSSStyleValue\"></a>CSSStyleValue</h3><p>它是所有CSS值类型的公用类型，提供了<code>parse</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><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 返回 CSSStyleValue 类型</span></span><br><span class=\"line\"><span class=\"title class_\">CSSStyleValue</span>.<span class=\"title function_\">parse</span>(<span class=\"string\">&#x27;color&#x27;</span>, <span class=\"string\">&#x27;#f00&#x27;</span>);</span><br><span class=\"line\"><span class=\"comment\">// 返回 CSSTransformValue 类型</span></span><br><span class=\"line\"><span class=\"title class_\">CSSStyleValue</span>.<span class=\"title function_\">parse</span>(<span class=\"string\">&#x27;transform&#x27;</span>, <span class=\"string\">&#x27;translate(30px, 20px) rotate(45deg)&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"CSSKeywordValue\"><a href=\"#CSSKeywordValue\" class=\"headerlink\" title=\"CSSKeywordValue\"></a>CSSKeywordValue</h3><p>CSS保留关键字类型如<code>initial</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=\"comment\">// 返回 CSSKeywordValue &#123;value: &#x27;normal&#x27;&#125; 类型，因为normal是保留关键字。</span></span><br><span class=\"line\">$0.<span class=\"title function_\">computedStyleMap</span>().<span class=\"title function_\">get</span>(<span class=\"string\">&#x27;font-style&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"其他类型见MDN\"><a href=\"#其他类型见MDN\" class=\"headerlink\" title=\"其他类型见MDN\"></a>其他类型见MDN</h3><h3 id=\"StylePropertyMapReadOnly\"><a href=\"#StylePropertyMapReadOnly\" class=\"headerlink\" title=\"StylePropertyMapReadOnly\"></a>StylePropertyMapReadOnly</h3><p>提供<code>get</code>、<code>getAll</code>等方法读取样式。</p>\n<h3 id=\"StylePropertyMap\"><a href=\"#StylePropertyMap\" class=\"headerlink\" title=\"StylePropertyMap\"></a>StylePropertyMap</h3><p>继承于<code>StylePropertyMapReadOnly</code>，提供<code>append</code>、<code>set</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=\"comment\">// 将元素的文本颜色设置为红色</span></span><br><span class=\"line\">$0.<span class=\"property\">attributeStyleMap</span>.<span class=\"title function_\">set</span>(<span class=\"string\">&#x27;color&#x27;</span>, <span class=\"string\">&#x27;red&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"computedStyleMap\"><a href=\"#computedStyleMap\" class=\"headerlink\" title=\"computedStyleMap\"></a>computedStyleMap</h3><p><code>HTMLelement.computedStyleMap()</code>返回<code>StylePropertyMapReadOnly</code>类型。</p>\n<h3 id=\"attributeStyleMap\"><a href=\"#attributeStyleMap\" class=\"headerlink\" title=\"attributeStyleMap\"></a>attributeStyleMap</h3><p><code>HTMLElement.attributeStyleMap</code>返回<code>StylePropertyMap</code>类型。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/CSS_Typed_OM_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Typed_OM_API/index.html</a></p>\n<ol>\n<li>在例子中，打印出元素所有的样式，或打印出指定的样式：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/50ce9bcd-62e4-42de-9368-81c6017b6476\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>改变元素的颜色样式：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/7893da8e-63f7-4810-8a93-9ad5cc36cb22\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/69\">https://github.com/taoliujun/blog/issues/69</a></p>\n<!--hexo\n\n---\nurl: web-api-CSS_Typed_OM_API\ntags:\n  - webapi\n  - CSS Typed OM\n---\n\n-->\n\n<h1 id=\"CSS-Typed-OM\"><a href=\"#CSS-Typed-OM\" class=\"headerlink\" title=\"CSS Typed OM\"></a>CSS Typed OM</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API\">https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API</a></p>\n</blockquote>\n<p><strong>CSS Typed OM</strong>全称<code>CSS Typed Object Model</code>，提供了一系列访问和操作CSS值的方法。</p>\n<p>在以往，使用<code>HTMLElement.style</code>管理元素的样式，它只是一个<code>string</code>类型，管理很笨拙，可读性也差。而本API将CSS值解析为可读性很高的对象，据此可以科学的管理它。</p>\n<blockquote>\n<p>和<code>HTMLElement.style</code>相比，本API更有可读性，性能更高。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><p>有公用类型<code>CSSStyleValue</code>和若干特殊类型如<code>CSSImageValue</code>、<code>CSSKeywordValue</code>等组成。</p>\n<h3 id=\"CSSStyleValue\"><a href=\"#CSSStyleValue\" class=\"headerlink\" title=\"CSSStyleValue\"></a>CSSStyleValue</h3><p>它是所有CSS值类型的公用类型，提供了<code>parse</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><span class=\"line\">3</span><br><span class=\"line\">4</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 返回 CSSStyleValue 类型</span></span><br><span class=\"line\"><span class=\"title class_\">CSSStyleValue</span>.<span class=\"title function_\">parse</span>(<span class=\"string\">&#x27;color&#x27;</span>, <span class=\"string\">&#x27;#f00&#x27;</span>);</span><br><span class=\"line\"><span class=\"comment\">// 返回 CSSTransformValue 类型</span></span><br><span class=\"line\"><span class=\"title class_\">CSSStyleValue</span>.<span class=\"title function_\">parse</span>(<span class=\"string\">&#x27;transform&#x27;</span>, <span class=\"string\">&#x27;translate(30px, 20px) rotate(45deg)&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"CSSKeywordValue\"><a href=\"#CSSKeywordValue\" class=\"headerlink\" title=\"CSSKeywordValue\"></a>CSSKeywordValue</h3><p>CSS保留关键字类型如<code>initial</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=\"comment\">// 返回 CSSKeywordValue &#123;value: &#x27;normal&#x27;&#125; 类型，因为normal是保留关键字。</span></span><br><span class=\"line\">$0.<span class=\"title function_\">computedStyleMap</span>().<span class=\"title function_\">get</span>(<span class=\"string\">&#x27;font-style&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"其他类型见MDN\"><a href=\"#其他类型见MDN\" class=\"headerlink\" title=\"其他类型见MDN\"></a>其他类型见MDN</h3><h3 id=\"StylePropertyMapReadOnly\"><a href=\"#StylePropertyMapReadOnly\" class=\"headerlink\" title=\"StylePropertyMapReadOnly\"></a>StylePropertyMapReadOnly</h3><p>提供<code>get</code>、<code>getAll</code>等方法读取样式。</p>\n<h3 id=\"StylePropertyMap\"><a href=\"#StylePropertyMap\" class=\"headerlink\" title=\"StylePropertyMap\"></a>StylePropertyMap</h3><p>继承于<code>StylePropertyMapReadOnly</code>，提供<code>append</code>、<code>set</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=\"comment\">// 将元素的文本颜色设置为红色</span></span><br><span class=\"line\">$0.<span class=\"property\">attributeStyleMap</span>.<span class=\"title function_\">set</span>(<span class=\"string\">&#x27;color&#x27;</span>, <span class=\"string\">&#x27;red&#x27;</span>);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"computedStyleMap\"><a href=\"#computedStyleMap\" class=\"headerlink\" title=\"computedStyleMap\"></a>computedStyleMap</h3><p><code>HTMLelement.computedStyleMap()</code>返回<code>StylePropertyMapReadOnly</code>类型。</p>\n<h3 id=\"attributeStyleMap\"><a href=\"#attributeStyleMap\" class=\"headerlink\" title=\"attributeStyleMap\"></a>attributeStyleMap</h3><p><code>HTMLElement.attributeStyleMap</code>返回<code>StylePropertyMap</code>类型。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/CSS_Typed_OM_API/index.html\">https://taoliujun.github.io/example/web-api/CSS_Typed_OM_API/index.html</a></p>\n<ol>\n<li>在例子中，打印出元素所有的样式，或打印出指定的样式：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/50ce9bcd-62e4-42de-9368-81c6017b6476\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>改变元素的颜色样式：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/7893da8e-63f7-4810-8a93-9ad5cc36cb22\" alt=\"image\"></p>\n"},{"title":"Web API - CookieStore","date":"2024-03-07T19:40:40.000Z","url":"web-api-Cookie_Store_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/75](https://github.com/taoliujun/blog/issues/75)\n\n<!--hexo\n\n---\nurl: web-api-Cookie_Store_API\ntags:\n  - webapi\n  - CookieStore\n---\n\n-->\n\n# CookieStore\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\n\n**CookieStore**提供了对cookie的读取写入。相比`document.cookies`管理cookie的笨拙，本API更为明了。\n\n## 接口\n\n### CookieStore\n\n使用`window.cookieStore`可获取本接口实例，提供了`get`、`set`、`getAll`、`delete`方法管理cookie，并支持cookie的所有特性如domain、path、expires等。\n\n且还提供了`change`、`delete`事件监听。\n\n### CookieStoreManager\n\n订阅cookie变动。\n\n## 方法和属性\n\n略，见示例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Cookie_Store_API/index.html\n\n1. 写入、读取永久的cookie：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/d72df988-15d3-4214-ae9a-a6184cb5ba3e)\n\n2. 写入、读取会过期的cookie：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9a89eb49-7a7f-40f3-b523-6ce5bead38cd)\n\n\n\n\n","source":"_posts/web-api-Cookie_Store_API.md","raw":"---\ntitle: \"Web API - CookieStore\"\ndate: \"2024-03-08T03:40:40Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-Cookie_Store_API\ntags:\n  - webapi\n  - CookieStore\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/75](https://github.com/taoliujun/blog/issues/75)\n\n<!--hexo\n\n---\nurl: web-api-Cookie_Store_API\ntags:\n  - webapi\n  - CookieStore\n---\n\n-->\n\n# CookieStore\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\n\n**CookieStore**提供了对cookie的读取写入。相比`document.cookies`管理cookie的笨拙，本API更为明了。\n\n## 接口\n\n### CookieStore\n\n使用`window.cookieStore`可获取本接口实例，提供了`get`、`set`、`getAll`、`delete`方法管理cookie，并支持cookie的所有特性如domain、path、expires等。\n\n且还提供了`change`、`delete`事件监听。\n\n### CookieStoreManager\n\n订阅cookie变动。\n\n## 方法和属性\n\n略，见示例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Cookie_Store_API/index.html\n\n1. 写入、读取永久的cookie：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/d72df988-15d3-4214-ae9a-a6184cb5ba3e)\n\n2. 写入、读取会过期的cookie：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9a89eb49-7a7f-40f3-b523-6ce5bead38cd)\n\n\n\n\n","slug":"web-api-Cookie_Store_API","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp93002xhbp07hxsfvha","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/75\">https://github.com/taoliujun/blog/issues/75</a></p>\n<!--hexo\n\n---\nurl: web-api-Cookie_Store_API\ntags:\n  - webapi\n  - CookieStore\n---\n\n-->\n\n<h1 id=\"CookieStore\"><a href=\"#CookieStore\" class=\"headerlink\" title=\"CookieStore\"></a>CookieStore</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\">https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API</a></p>\n</blockquote>\n<p><strong>CookieStore</strong>提供了对cookie的读取写入。相比<code>document.cookies</code>管理cookie的笨拙，本API更为明了。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"CookieStore-1\"><a href=\"#CookieStore-1\" class=\"headerlink\" title=\"CookieStore\"></a>CookieStore</h3><p>使用<code>window.cookieStore</code>可获取本接口实例，提供了<code>get</code>、<code>set</code>、<code>getAll</code>、<code>delete</code>方法管理cookie，并支持cookie的所有特性如domain、path、expires等。</p>\n<p>且还提供了<code>change</code>、<code>delete</code>事件监听。</p>\n<h3 id=\"CookieStoreManager\"><a href=\"#CookieStoreManager\" class=\"headerlink\" title=\"CookieStoreManager\"></a>CookieStoreManager</h3><p>订阅cookie变动。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><p>略，见示例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Cookie_Store_API/index.html\">https://taoliujun.github.io/example/web-api/Cookie_Store_API/index.html</a></p>\n<ol>\n<li>写入、读取永久的cookie：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/d72df988-15d3-4214-ae9a-a6184cb5ba3e\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>写入、读取会过期的cookie：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9a89eb49-7a7f-40f3-b523-6ce5bead38cd\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/75\">https://github.com/taoliujun/blog/issues/75</a></p>\n<!--hexo\n\n---\nurl: web-api-Cookie_Store_API\ntags:\n  - webapi\n  - CookieStore\n---\n\n-->\n\n<h1 id=\"CookieStore\"><a href=\"#CookieStore\" class=\"headerlink\" title=\"CookieStore\"></a>CookieStore</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\">https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API</a></p>\n</blockquote>\n<p><strong>CookieStore</strong>提供了对cookie的读取写入。相比<code>document.cookies</code>管理cookie的笨拙，本API更为明了。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"CookieStore-1\"><a href=\"#CookieStore-1\" class=\"headerlink\" title=\"CookieStore\"></a>CookieStore</h3><p>使用<code>window.cookieStore</code>可获取本接口实例，提供了<code>get</code>、<code>set</code>、<code>getAll</code>、<code>delete</code>方法管理cookie，并支持cookie的所有特性如domain、path、expires等。</p>\n<p>且还提供了<code>change</code>、<code>delete</code>事件监听。</p>\n<h3 id=\"CookieStoreManager\"><a href=\"#CookieStoreManager\" class=\"headerlink\" title=\"CookieStoreManager\"></a>CookieStoreManager</h3><p>订阅cookie变动。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><p>略，见示例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Cookie_Store_API/index.html\">https://taoliujun.github.io/example/web-api/Cookie_Store_API/index.html</a></p>\n<ol>\n<li>写入、读取永久的cookie：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/d72df988-15d3-4214-ae9a-a6184cb5ba3e\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>写入、读取会过期的cookie：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9a89eb49-7a7f-40f3-b523-6ce5bead38cd\" alt=\"image\"></p>\n"},{"title":"Web API - Credential Management","date":"2024-03-07T21:51:27.000Z","url":"web-api-Credential_Management_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/77](https://github.com/taoliujun/blog/issues/77)\n\n<!--hexo\n\n---\nurl: web-api-Credential_Management_API\ntags:\n  - webapi\n  - Credential Management\n---\n\n-->\n\n# Credential Management\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API\n\n**Credential Management**用于管理网页的登录凭证如如密码、秘钥对。比如在第一次登录时保存密码凭证，以后读取该凭证后自动登录，省去用户重复输入账号密码的步骤（尽管可能还需要用户在浏览器弹出框里选择要登录的用户）。\n\n在一些浏览器如chrome的Password Manager配置`chrome://password-manager/settings`中，有一个选项**Offer to save passwords**：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/11785f82-c37c-450a-9711-a46cf2eb6346)\n\n是否允许保存密码。它在打开后，有两个作用，一是允许代码调用`credentials.store`存储凭证信息；二是允许浏览器智能的为你存储网页的登录凭证，即便该网页并未显式调用`credentials.store`。它的效果如下：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/3469d848-16cc-4439-871a-5d574d1ab34f)\n\n## 接口\n\n### Credential\n\n基础凭证接口，本身不能直接使用。\n\n### PasswordCredential\n\n密码凭证接口，继承于`Credential`，用于存储、读取密码类型的凭证。\n\n### FederatedCredential\n\n联合凭证接口，比如接入google联合登录凭证。\n\n### CredentialsContainer\n\n`Navigator.credentials`获取该接口实例，提供`create`、`get`、`store`等方法来创建、读取、存储凭证。`create`接口一般不直接使用，而直接用`PasswordCredential`这种具体的接口去创建凭证。\n\n## 方法和属性\n\n略，见示例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Credential_Management_API/index.html\n\n1. 输入账号密码，点击登录，提示是否存储密码凭证：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9b476376-3c0e-4467-b42b-5d8685186839)\n\n2. 读取密码凭证并打印：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/69de9bd3-08eb-4f67-91e7-86f1c94d16f9)\n\n3. 如果有多个凭证，需要用户手动选择使用哪个凭证：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9b4859ba-0ebe-4f3f-945a-50f654e78ee9)\n\n\n\n\n","source":"_posts/web-api-Credential_Management_API.md","raw":"---\ntitle: \"Web API - Credential Management\"\ndate: \"2024-03-08T05:51:27Z\"\ncategories:\n  - [JavaScript]\n\nurl: web-api-Credential_Management_API\ntags:\n  - webapi\n  - Credential Management\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/77](https://github.com/taoliujun/blog/issues/77)\n\n<!--hexo\n\n---\nurl: web-api-Credential_Management_API\ntags:\n  - webapi\n  - Credential Management\n---\n\n-->\n\n# Credential Management\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API\n\n**Credential Management**用于管理网页的登录凭证如如密码、秘钥对。比如在第一次登录时保存密码凭证，以后读取该凭证后自动登录，省去用户重复输入账号密码的步骤（尽管可能还需要用户在浏览器弹出框里选择要登录的用户）。\n\n在一些浏览器如chrome的Password Manager配置`chrome://password-manager/settings`中，有一个选项**Offer to save passwords**：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/11785f82-c37c-450a-9711-a46cf2eb6346)\n\n是否允许保存密码。它在打开后，有两个作用，一是允许代码调用`credentials.store`存储凭证信息；二是允许浏览器智能的为你存储网页的登录凭证，即便该网页并未显式调用`credentials.store`。它的效果如下：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/3469d848-16cc-4439-871a-5d574d1ab34f)\n\n## 接口\n\n### Credential\n\n基础凭证接口，本身不能直接使用。\n\n### PasswordCredential\n\n密码凭证接口，继承于`Credential`，用于存储、读取密码类型的凭证。\n\n### FederatedCredential\n\n联合凭证接口，比如接入google联合登录凭证。\n\n### CredentialsContainer\n\n`Navigator.credentials`获取该接口实例，提供`create`、`get`、`store`等方法来创建、读取、存储凭证。`create`接口一般不直接使用，而直接用`PasswordCredential`这种具体的接口去创建凭证。\n\n## 方法和属性\n\n略，见示例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Credential_Management_API/index.html\n\n1. 输入账号密码，点击登录，提示是否存储密码凭证：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9b476376-3c0e-4467-b42b-5d8685186839)\n\n2. 读取密码凭证并打印：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/69de9bd3-08eb-4f67-91e7-86f1c94d16f9)\n\n3. 如果有多个凭证，需要用户手动选择使用哪个凭证：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/9b4859ba-0ebe-4f3f-945a-50f654e78ee9)\n\n\n\n\n","slug":"web-api-Credential_Management_API","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp93002zhbp079t29lgi","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/77\">https://github.com/taoliujun/blog/issues/77</a></p>\n<!--hexo\n\n---\nurl: web-api-Credential_Management_API\ntags:\n  - webapi\n  - Credential Management\n---\n\n-->\n\n<h1 id=\"Credential-Management\"><a href=\"#Credential-Management\" class=\"headerlink\" title=\"Credential Management\"></a>Credential Management</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API\">https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API</a></p>\n</blockquote>\n<p><strong>Credential Management</strong>用于管理网页的登录凭证如如密码、秘钥对。比如在第一次登录时保存密码凭证，以后读取该凭证后自动登录，省去用户重复输入账号密码的步骤（尽管可能还需要用户在浏览器弹出框里选择要登录的用户）。</p>\n<p>在一些浏览器如chrome的Password Manager配置<code>chrome://password-manager/settings</code>中，有一个选项<strong>Offer to save passwords</strong>：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/11785f82-c37c-450a-9711-a46cf2eb6346\" alt=\"image\"></p>\n<p>是否允许保存密码。它在打开后，有两个作用，一是允许代码调用<code>credentials.store</code>存储凭证信息；二是允许浏览器智能的为你存储网页的登录凭证，即便该网页并未显式调用<code>credentials.store</code>。它的效果如下：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/3469d848-16cc-4439-871a-5d574d1ab34f\" alt=\"image\"></p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Credential\"><a href=\"#Credential\" class=\"headerlink\" title=\"Credential\"></a>Credential</h3><p>基础凭证接口，本身不能直接使用。</p>\n<h3 id=\"PasswordCredential\"><a href=\"#PasswordCredential\" class=\"headerlink\" title=\"PasswordCredential\"></a>PasswordCredential</h3><p>密码凭证接口，继承于<code>Credential</code>，用于存储、读取密码类型的凭证。</p>\n<h3 id=\"FederatedCredential\"><a href=\"#FederatedCredential\" class=\"headerlink\" title=\"FederatedCredential\"></a>FederatedCredential</h3><p>联合凭证接口，比如接入google联合登录凭证。</p>\n<h3 id=\"CredentialsContainer\"><a href=\"#CredentialsContainer\" class=\"headerlink\" title=\"CredentialsContainer\"></a>CredentialsContainer</h3><p><code>Navigator.credentials</code>获取该接口实例，提供<code>create</code>、<code>get</code>、<code>store</code>等方法来创建、读取、存储凭证。<code>create</code>接口一般不直接使用，而直接用<code>PasswordCredential</code>这种具体的接口去创建凭证。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><p>略，见示例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Credential_Management_API/index.html\">https://taoliujun.github.io/example/web-api/Credential_Management_API/index.html</a></p>\n<ol>\n<li>输入账号密码，点击登录，提示是否存储密码凭证：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9b476376-3c0e-4467-b42b-5d8685186839\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>读取密码凭证并打印：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/69de9bd3-08eb-4f67-91e7-86f1c94d16f9\" alt=\"image\"></p>\n<ol start=\"3\">\n<li>如果有多个凭证，需要用户手动选择使用哪个凭证：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9b4859ba-0ebe-4f3f-945a-50f654e78ee9\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/77\">https://github.com/taoliujun/blog/issues/77</a></p>\n<!--hexo\n\n---\nurl: web-api-Credential_Management_API\ntags:\n  - webapi\n  - Credential Management\n---\n\n-->\n\n<h1 id=\"Credential-Management\"><a href=\"#Credential-Management\" class=\"headerlink\" title=\"Credential Management\"></a>Credential Management</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API\">https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API</a></p>\n</blockquote>\n<p><strong>Credential Management</strong>用于管理网页的登录凭证如如密码、秘钥对。比如在第一次登录时保存密码凭证，以后读取该凭证后自动登录，省去用户重复输入账号密码的步骤（尽管可能还需要用户在浏览器弹出框里选择要登录的用户）。</p>\n<p>在一些浏览器如chrome的Password Manager配置<code>chrome://password-manager/settings</code>中，有一个选项<strong>Offer to save passwords</strong>：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/11785f82-c37c-450a-9711-a46cf2eb6346\" alt=\"image\"></p>\n<p>是否允许保存密码。它在打开后，有两个作用，一是允许代码调用<code>credentials.store</code>存储凭证信息；二是允许浏览器智能的为你存储网页的登录凭证，即便该网页并未显式调用<code>credentials.store</code>。它的效果如下：</p>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/3469d848-16cc-4439-871a-5d574d1ab34f\" alt=\"image\"></p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Credential\"><a href=\"#Credential\" class=\"headerlink\" title=\"Credential\"></a>Credential</h3><p>基础凭证接口，本身不能直接使用。</p>\n<h3 id=\"PasswordCredential\"><a href=\"#PasswordCredential\" class=\"headerlink\" title=\"PasswordCredential\"></a>PasswordCredential</h3><p>密码凭证接口，继承于<code>Credential</code>，用于存储、读取密码类型的凭证。</p>\n<h3 id=\"FederatedCredential\"><a href=\"#FederatedCredential\" class=\"headerlink\" title=\"FederatedCredential\"></a>FederatedCredential</h3><p>联合凭证接口，比如接入google联合登录凭证。</p>\n<h3 id=\"CredentialsContainer\"><a href=\"#CredentialsContainer\" class=\"headerlink\" title=\"CredentialsContainer\"></a>CredentialsContainer</h3><p><code>Navigator.credentials</code>获取该接口实例，提供<code>create</code>、<code>get</code>、<code>store</code>等方法来创建、读取、存储凭证。<code>create</code>接口一般不直接使用，而直接用<code>PasswordCredential</code>这种具体的接口去创建凭证。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><p>略，见示例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Credential_Management_API/index.html\">https://taoliujun.github.io/example/web-api/Credential_Management_API/index.html</a></p>\n<ol>\n<li>输入账号密码，点击登录，提示是否存储密码凭证：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9b476376-3c0e-4467-b42b-5d8685186839\" alt=\"image\"></p>\n<ol start=\"2\">\n<li>读取密码凭证并打印：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/69de9bd3-08eb-4f67-91e7-86f1c94d16f9\" alt=\"image\"></p>\n<ol start=\"3\">\n<li>如果有多个凭证，需要用户手动选择使用哪个凭证：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/9b4859ba-0ebe-4f3f-945a-50f654e78ee9\" alt=\"image\"></p>\n"},{"title":"Web API - Device Memory","date":"2024-03-11T21:08:54.000Z","url":"web-api-Device_Memory_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/79](https://github.com/taoliujun/blog/issues/79)\n\n<!--hexo\n\n---\nurl: web-api-Device_Memory_API\ntags:\n  - webapi\n  - Device Memory\n---\n\n-->\n\n# Device Memory\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API\n\n**Device Memory**获取设备可用的内存大小，这是一个大约量。\n\n## 方法和属性\n\n### Navigator.deviceMemory\n\n内存可用容量，单位是GB，数值是2的次方：0.25, 0.5, 1, 2, 4, 8。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Device_Memory_API/index.html\n\n\n\n\n","source":"_posts/web-api-Device_Memory_API.md","raw":"---\ntitle: \"Web API - Device Memory\"\ndate: \"2024-03-12T05:08:54Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-Device_Memory_API\ntags:\n  - webapi\n  - Device Memory\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/79](https://github.com/taoliujun/blog/issues/79)\n\n<!--hexo\n\n---\nurl: web-api-Device_Memory_API\ntags:\n  - webapi\n  - Device Memory\n---\n\n-->\n\n# Device Memory\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API\n\n**Device Memory**获取设备可用的内存大小，这是一个大约量。\n\n## 方法和属性\n\n### Navigator.deviceMemory\n\n内存可用容量，单位是GB，数值是2的次方：0.25, 0.5, 1, 2, 4, 8。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Device_Memory_API/index.html\n\n\n\n\n","slug":"web-api-Device_Memory_API","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp940033hbp01rw492lu","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/79\">https://github.com/taoliujun/blog/issues/79</a></p>\n<!--hexo\n\n---\nurl: web-api-Device_Memory_API\ntags:\n  - webapi\n  - Device Memory\n---\n\n-->\n\n<h1 id=\"Device-Memory\"><a href=\"#Device-Memory\" class=\"headerlink\" title=\"Device Memory\"></a>Device Memory</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API\">https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API</a></p>\n</blockquote>\n<p><strong>Device Memory</strong>获取设备可用的内存大小，这是一个大约量。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"Navigator-deviceMemory\"><a href=\"#Navigator-deviceMemory\" class=\"headerlink\" title=\"Navigator.deviceMemory\"></a>Navigator.deviceMemory</h3><p>内存可用容量，单位是GB，数值是2的次方：0.25, 0.5, 1, 2, 4, 8。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Device_Memory_API/index.html\">https://taoliujun.github.io/example/web-api/Device_Memory_API/index.html</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/79\">https://github.com/taoliujun/blog/issues/79</a></p>\n<!--hexo\n\n---\nurl: web-api-Device_Memory_API\ntags:\n  - webapi\n  - Device Memory\n---\n\n-->\n\n<h1 id=\"Device-Memory\"><a href=\"#Device-Memory\" class=\"headerlink\" title=\"Device Memory\"></a>Device Memory</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API\">https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API</a></p>\n</blockquote>\n<p><strong>Device Memory</strong>获取设备可用的内存大小，这是一个大约量。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"Navigator-deviceMemory\"><a href=\"#Navigator-deviceMemory\" class=\"headerlink\" title=\"Navigator.deviceMemory\"></a>Navigator.deviceMemory</h3><p>内存可用容量，单位是GB，数值是2的次方：0.25, 0.5, 1, 2, 4, 8。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Device_Memory_API/index.html\">https://taoliujun.github.io/example/web-api/Device_Memory_API/index.html</a></p>\n"},{"title":"Web API - DOM","date":"2024-03-11T21:09:58.000Z","url":"web-api-Document_Object_Model","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/80](https://github.com/taoliujun/blog/issues/80)\n\n<!--hexo\n\n---\nurl: web-api-Document_Object_Model\ntags:\n  - webapi\n  - DOM\n---\n\n-->\n\n# DOM\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\n\n**DOM**用来描述文档树，与JavaScript连接起来。它是前端编程中使用最频繁的接口合集，涵盖了文档属性、节点管理、事件，难以一一列举。\n\n\n\n\n","source":"_posts/web-api-Document_Object_Model.md","raw":"---\ntitle: \"Web API - DOM\"\ndate: \"2024-03-12T05:09:58Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-Document_Object_Model\ntags:\n  - webapi\n  - DOM\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/80](https://github.com/taoliujun/blog/issues/80)\n\n<!--hexo\n\n---\nurl: web-api-Document_Object_Model\ntags:\n  - webapi\n  - DOM\n---\n\n-->\n\n# DOM\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\n\n**DOM**用来描述文档树，与JavaScript连接起来。它是前端编程中使用最频繁的接口合集，涵盖了文档属性、节点管理、事件，难以一一列举。\n\n\n\n\n","slug":"web-api-Document_Object_Model","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp950036hbp07p0iakhg","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/80\">https://github.com/taoliujun/blog/issues/80</a></p>\n<!--hexo\n\n---\nurl: web-api-Document_Object_Model\ntags:\n  - webapi\n  - DOM\n---\n\n-->\n\n<h1 id=\"DOM\"><a href=\"#DOM\" class=\"headerlink\" title=\"DOM\"></a>DOM</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\">https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model</a></p>\n</blockquote>\n<p><strong>DOM</strong>用来描述文档树，与JavaScript连接起来。它是前端编程中使用最频繁的接口合集，涵盖了文档属性、节点管理、事件，难以一一列举。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/80\">https://github.com/taoliujun/blog/issues/80</a></p>\n<!--hexo\n\n---\nurl: web-api-Document_Object_Model\ntags:\n  - webapi\n  - DOM\n---\n\n-->\n\n<h1 id=\"DOM\"><a href=\"#DOM\" class=\"headerlink\" title=\"DOM\"></a>DOM</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\">https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model</a></p>\n</blockquote>\n<p><strong>DOM</strong>用来描述文档树，与JavaScript连接起来。它是前端编程中使用最频繁的接口合集，涵盖了文档属性、节点管理、事件，难以一一列举。</p>\n"},{"title":"Web API - Device Orientation","date":"2024-03-11T22:31:13.000Z","url":"web-api-Device_orientation_events","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/81](https://github.com/taoliujun/blog/issues/81)\n\n<!--hexo\n\n---\nurl: web-api-Device_orientation_events\ntags:\n  - webapi\n  - Device Orientation\n---\n\n-->\n\n# Device Orientation\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events\n\n**Device Orientation**用于获取设备的方向、和运动信息。移动设备的加速度传感器、陀螺仪、指南针等组件为浏览器提供了一系列运动信息，可以监听事件获取到相关信息。\n\n> 三轴指的是手机沿着北方向竖向平放在桌子上，左右是X轴，上下是Y轴，高低是Z轴。\n\n## 接口\n\n下面的接口里的数据概念有所类似但又有细节差异，使用时仔细参考官方文档。\n\n### DeviceMotionEvent\n\n设备的加速度和旋转速率的变化事件。包含以下信息：\n\n-   `acceleration`，加速度，不包括重力计算。\n-   `accelerationIncludingGravity`，加速度，包括重力计算。\n-   `interval`，获取数据的频率，单位毫秒。\n-   `rotationRate`，三个轴上的速率。\n\n### DeviceMotionEventAcceleration\n\n设备在三个轴上的加速度量的变化事件。包含以下信息：\n\n-   `z`，Z轴变化量。\n-   `x`，X轴变化量。\n-   `y`，Y轴变化量。\n\n### DeviceMotionEventRotationRate\n\n设备在三个轴的旋转速率的变化事件。包含以下信息：\n\n-   `alpha`，Z轴速率，即每秒变化量。\n-   `beta`，X轴速率。\n-   `gamma`，Y轴速率。\n\n### DeviceOrientationEvent\n\n设备物理方向的变化事件。包含了以下信息：\n\n-   `absolute`，数据信息是否是绝对量（地球坐标）。\n-   `alpha`，Z轴变化量。\n-   `beta`，X轴变化量。\n-   `gamma`，Y轴变化量。\n\n## 方法和属性\n\n### Event.devicemotion\n\n事件监听，返回`DeviceMotionEvent`。\n\n### Event.deviceorientation\n\n事件监听，返回`DeviceOrientationEvent`\n\n### Event.deviceorientationabsolute\n\n事件监听，返回`DeviceOrientationEvent`\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Device_orientation_events/index.html\n\n\n\n\n","source":"_posts/web-api-Device_orientation_events.md","raw":"---\ntitle: \"Web API - Device Orientation\"\ndate: \"2024-03-12T06:31:13Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-Device_orientation_events\ntags:\n  - webapi\n  - Device Orientation\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/81](https://github.com/taoliujun/blog/issues/81)\n\n<!--hexo\n\n---\nurl: web-api-Device_orientation_events\ntags:\n  - webapi\n  - Device Orientation\n---\n\n-->\n\n# Device Orientation\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events\n\n**Device Orientation**用于获取设备的方向、和运动信息。移动设备的加速度传感器、陀螺仪、指南针等组件为浏览器提供了一系列运动信息，可以监听事件获取到相关信息。\n\n> 三轴指的是手机沿着北方向竖向平放在桌子上，左右是X轴，上下是Y轴，高低是Z轴。\n\n## 接口\n\n下面的接口里的数据概念有所类似但又有细节差异，使用时仔细参考官方文档。\n\n### DeviceMotionEvent\n\n设备的加速度和旋转速率的变化事件。包含以下信息：\n\n-   `acceleration`，加速度，不包括重力计算。\n-   `accelerationIncludingGravity`，加速度，包括重力计算。\n-   `interval`，获取数据的频率，单位毫秒。\n-   `rotationRate`，三个轴上的速率。\n\n### DeviceMotionEventAcceleration\n\n设备在三个轴上的加速度量的变化事件。包含以下信息：\n\n-   `z`，Z轴变化量。\n-   `x`，X轴变化量。\n-   `y`，Y轴变化量。\n\n### DeviceMotionEventRotationRate\n\n设备在三个轴的旋转速率的变化事件。包含以下信息：\n\n-   `alpha`，Z轴速率，即每秒变化量。\n-   `beta`，X轴速率。\n-   `gamma`，Y轴速率。\n\n### DeviceOrientationEvent\n\n设备物理方向的变化事件。包含了以下信息：\n\n-   `absolute`，数据信息是否是绝对量（地球坐标）。\n-   `alpha`，Z轴变化量。\n-   `beta`，X轴变化量。\n-   `gamma`，Y轴变化量。\n\n## 方法和属性\n\n### Event.devicemotion\n\n事件监听，返回`DeviceMotionEvent`。\n\n### Event.deviceorientation\n\n事件监听，返回`DeviceOrientationEvent`\n\n### Event.deviceorientationabsolute\n\n事件监听，返回`DeviceOrientationEvent`\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Device_orientation_events/index.html\n\n\n\n\n","slug":"web-api-Device_orientation_events","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp96003ahbp07nrzgwn9","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/81\">https://github.com/taoliujun/blog/issues/81</a></p>\n<!--hexo\n\n---\nurl: web-api-Device_orientation_events\ntags:\n  - webapi\n  - Device Orientation\n---\n\n-->\n\n<h1 id=\"Device-Orientation\"><a href=\"#Device-Orientation\" class=\"headerlink\" title=\"Device Orientation\"></a>Device Orientation</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events\">https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events</a></p>\n</blockquote>\n<p><strong>Device Orientation</strong>用于获取设备的方向、和运动信息。移动设备的加速度传感器、陀螺仪、指南针等组件为浏览器提供了一系列运动信息，可以监听事件获取到相关信息。</p>\n<blockquote>\n<p>三轴指的是手机沿着北方向竖向平放在桌子上，左右是X轴，上下是Y轴，高低是Z轴。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><p>下面的接口里的数据概念有所类似但又有细节差异，使用时仔细参考官方文档。</p>\n<h3 id=\"DeviceMotionEvent\"><a href=\"#DeviceMotionEvent\" class=\"headerlink\" title=\"DeviceMotionEvent\"></a>DeviceMotionEvent</h3><p>设备的加速度和旋转速率的变化事件。包含以下信息：</p>\n<ul>\n<li><code>acceleration</code>，加速度，不包括重力计算。</li>\n<li><code>accelerationIncludingGravity</code>，加速度，包括重力计算。</li>\n<li><code>interval</code>，获取数据的频率，单位毫秒。</li>\n<li><code>rotationRate</code>，三个轴上的速率。</li>\n</ul>\n<h3 id=\"DeviceMotionEventAcceleration\"><a href=\"#DeviceMotionEventAcceleration\" class=\"headerlink\" title=\"DeviceMotionEventAcceleration\"></a>DeviceMotionEventAcceleration</h3><p>设备在三个轴上的加速度量的变化事件。包含以下信息：</p>\n<ul>\n<li><code>z</code>，Z轴变化量。</li>\n<li><code>x</code>，X轴变化量。</li>\n<li><code>y</code>，Y轴变化量。</li>\n</ul>\n<h3 id=\"DeviceMotionEventRotationRate\"><a href=\"#DeviceMotionEventRotationRate\" class=\"headerlink\" title=\"DeviceMotionEventRotationRate\"></a>DeviceMotionEventRotationRate</h3><p>设备在三个轴的旋转速率的变化事件。包含以下信息：</p>\n<ul>\n<li><code>alpha</code>，Z轴速率，即每秒变化量。</li>\n<li><code>beta</code>，X轴速率。</li>\n<li><code>gamma</code>，Y轴速率。</li>\n</ul>\n<h3 id=\"DeviceOrientationEvent\"><a href=\"#DeviceOrientationEvent\" class=\"headerlink\" title=\"DeviceOrientationEvent\"></a>DeviceOrientationEvent</h3><p>设备物理方向的变化事件。包含了以下信息：</p>\n<ul>\n<li><code>absolute</code>，数据信息是否是绝对量（地球坐标）。</li>\n<li><code>alpha</code>，Z轴变化量。</li>\n<li><code>beta</code>，X轴变化量。</li>\n<li><code>gamma</code>，Y轴变化量。</li>\n</ul>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"Event-devicemotion\"><a href=\"#Event-devicemotion\" class=\"headerlink\" title=\"Event.devicemotion\"></a>Event.devicemotion</h3><p>事件监听，返回<code>DeviceMotionEvent</code>。</p>\n<h3 id=\"Event-deviceorientation\"><a href=\"#Event-deviceorientation\" class=\"headerlink\" title=\"Event.deviceorientation\"></a>Event.deviceorientation</h3><p>事件监听，返回<code>DeviceOrientationEvent</code></p>\n<h3 id=\"Event-deviceorientationabsolute\"><a href=\"#Event-deviceorientationabsolute\" class=\"headerlink\" title=\"Event.deviceorientationabsolute\"></a>Event.deviceorientationabsolute</h3><p>事件监听，返回<code>DeviceOrientationEvent</code></p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Device_orientation_events/index.html\">https://taoliujun.github.io/example/web-api/Device_orientation_events/index.html</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/81\">https://github.com/taoliujun/blog/issues/81</a></p>\n<!--hexo\n\n---\nurl: web-api-Device_orientation_events\ntags:\n  - webapi\n  - Device Orientation\n---\n\n-->\n\n<h1 id=\"Device-Orientation\"><a href=\"#Device-Orientation\" class=\"headerlink\" title=\"Device Orientation\"></a>Device Orientation</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events\">https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events</a></p>\n</blockquote>\n<p><strong>Device Orientation</strong>用于获取设备的方向、和运动信息。移动设备的加速度传感器、陀螺仪、指南针等组件为浏览器提供了一系列运动信息，可以监听事件获取到相关信息。</p>\n<blockquote>\n<p>三轴指的是手机沿着北方向竖向平放在桌子上，左右是X轴，上下是Y轴，高低是Z轴。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><p>下面的接口里的数据概念有所类似但又有细节差异，使用时仔细参考官方文档。</p>\n<h3 id=\"DeviceMotionEvent\"><a href=\"#DeviceMotionEvent\" class=\"headerlink\" title=\"DeviceMotionEvent\"></a>DeviceMotionEvent</h3><p>设备的加速度和旋转速率的变化事件。包含以下信息：</p>\n<ul>\n<li><code>acceleration</code>，加速度，不包括重力计算。</li>\n<li><code>accelerationIncludingGravity</code>，加速度，包括重力计算。</li>\n<li><code>interval</code>，获取数据的频率，单位毫秒。</li>\n<li><code>rotationRate</code>，三个轴上的速率。</li>\n</ul>\n<h3 id=\"DeviceMotionEventAcceleration\"><a href=\"#DeviceMotionEventAcceleration\" class=\"headerlink\" title=\"DeviceMotionEventAcceleration\"></a>DeviceMotionEventAcceleration</h3><p>设备在三个轴上的加速度量的变化事件。包含以下信息：</p>\n<ul>\n<li><code>z</code>，Z轴变化量。</li>\n<li><code>x</code>，X轴变化量。</li>\n<li><code>y</code>，Y轴变化量。</li>\n</ul>\n<h3 id=\"DeviceMotionEventRotationRate\"><a href=\"#DeviceMotionEventRotationRate\" class=\"headerlink\" title=\"DeviceMotionEventRotationRate\"></a>DeviceMotionEventRotationRate</h3><p>设备在三个轴的旋转速率的变化事件。包含以下信息：</p>\n<ul>\n<li><code>alpha</code>，Z轴速率，即每秒变化量。</li>\n<li><code>beta</code>，X轴速率。</li>\n<li><code>gamma</code>，Y轴速率。</li>\n</ul>\n<h3 id=\"DeviceOrientationEvent\"><a href=\"#DeviceOrientationEvent\" class=\"headerlink\" title=\"DeviceOrientationEvent\"></a>DeviceOrientationEvent</h3><p>设备物理方向的变化事件。包含了以下信息：</p>\n<ul>\n<li><code>absolute</code>，数据信息是否是绝对量（地球坐标）。</li>\n<li><code>alpha</code>，Z轴变化量。</li>\n<li><code>beta</code>，X轴变化量。</li>\n<li><code>gamma</code>，Y轴变化量。</li>\n</ul>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"Event-devicemotion\"><a href=\"#Event-devicemotion\" class=\"headerlink\" title=\"Event.devicemotion\"></a>Event.devicemotion</h3><p>事件监听，返回<code>DeviceMotionEvent</code>。</p>\n<h3 id=\"Event-deviceorientation\"><a href=\"#Event-deviceorientation\" class=\"headerlink\" title=\"Event.deviceorientation\"></a>Event.deviceorientation</h3><p>事件监听，返回<code>DeviceOrientationEvent</code></p>\n<h3 id=\"Event-deviceorientationabsolute\"><a href=\"#Event-deviceorientationabsolute\" class=\"headerlink\" title=\"Event.deviceorientationabsolute\"></a>Event.deviceorientationabsolute</h3><p>事件监听，返回<code>DeviceOrientationEvent</code></p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Device_orientation_events/index.html\">https://taoliujun.github.io/example/web-api/Device_orientation_events/index.html</a></p>\n"},{"title":"Web API - Document Picture-in-Picture","date":"2024-03-11T23:10:35.000Z","url":"web-api-Document_Picture-in-Picture_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/82](https://github.com/taoliujun/blog/issues/82)\n\n<!--hexo\n\n---\nurl: web-api-Document_Picture-in-Picture_API\ntags:\n  - webapi\n  - Document Picture-in-Picture\n---\n\n-->\n\n# Document Picture-in-Picture\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API\n\n**Document Picture-in-Picture**画中画用于在窗口中再开一个悬浮的窗口，视频悬浮在右下角就是典型的画中画，它有几点特性：\n\n-   不同于frame，它始终悬浮在最上层。\n-   随着主窗口关闭而自动销毁。\n-   没有导航特性。\n-   和主窗口没有任何干扰。\n\n## 接口\n\n### DocumentPictureInPicture\n\n它包含了`window`属性，和`requestWindow()`方法。\n\n### DocumentPictureInPictureEvent\n\n相关事件。\n\n## 方法和属性\n\n### Window.documentPictureInPicture\n\n返回`DocumentPictureInPicture`接口实例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Document_Picture-in-Picture_API/index.html\n\n\n\n\n","source":"_posts/web-api-Document_Picture-in-Picture_API.md","raw":"---\ntitle: \"Web API - Document Picture-in-Picture\"\ndate: \"2024-03-12T07:10:35Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-Document_Picture-in-Picture_API\ntags:\n  - webapi\n  - Document Picture-in-Picture\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/82](https://github.com/taoliujun/blog/issues/82)\n\n<!--hexo\n\n---\nurl: web-api-Document_Picture-in-Picture_API\ntags:\n  - webapi\n  - Document Picture-in-Picture\n---\n\n-->\n\n# Document Picture-in-Picture\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API\n\n**Document Picture-in-Picture**画中画用于在窗口中再开一个悬浮的窗口，视频悬浮在右下角就是典型的画中画，它有几点特性：\n\n-   不同于frame，它始终悬浮在最上层。\n-   随着主窗口关闭而自动销毁。\n-   没有导航特性。\n-   和主窗口没有任何干扰。\n\n## 接口\n\n### DocumentPictureInPicture\n\n它包含了`window`属性，和`requestWindow()`方法。\n\n### DocumentPictureInPictureEvent\n\n相关事件。\n\n## 方法和属性\n\n### Window.documentPictureInPicture\n\n返回`DocumentPictureInPicture`接口实例。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Document_Picture-in-Picture_API/index.html\n\n\n\n\n","slug":"web-api-Document_Picture-in-Picture_API","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp97003ehbp00bg5bhj3","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/82\">https://github.com/taoliujun/blog/issues/82</a></p>\n<!--hexo\n\n---\nurl: web-api-Document_Picture-in-Picture_API\ntags:\n  - webapi\n  - Document Picture-in-Picture\n---\n\n-->\n\n<h1 id=\"Document-Picture-in-Picture\"><a href=\"#Document-Picture-in-Picture\" class=\"headerlink\" title=\"Document Picture-in-Picture\"></a>Document Picture-in-Picture</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API\">https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API</a></p>\n</blockquote>\n<p><strong>Document Picture-in-Picture</strong>画中画用于在窗口中再开一个悬浮的窗口，视频悬浮在右下角就是典型的画中画，它有几点特性：</p>\n<ul>\n<li>不同于frame，它始终悬浮在最上层。</li>\n<li>随着主窗口关闭而自动销毁。</li>\n<li>没有导航特性。</li>\n<li>和主窗口没有任何干扰。</li>\n</ul>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"DocumentPictureInPicture\"><a href=\"#DocumentPictureInPicture\" class=\"headerlink\" title=\"DocumentPictureInPicture\"></a>DocumentPictureInPicture</h3><p>它包含了<code>window</code>属性，和<code>requestWindow()</code>方法。</p>\n<h3 id=\"DocumentPictureInPictureEvent\"><a href=\"#DocumentPictureInPictureEvent\" class=\"headerlink\" title=\"DocumentPictureInPictureEvent\"></a>DocumentPictureInPictureEvent</h3><p>相关事件。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"Window-documentPictureInPicture\"><a href=\"#Window-documentPictureInPicture\" class=\"headerlink\" title=\"Window.documentPictureInPicture\"></a>Window.documentPictureInPicture</h3><p>返回<code>DocumentPictureInPicture</code>接口实例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Document_Picture-in-Picture_API/index.html\">https://taoliujun.github.io/example/web-api/Document_Picture-in-Picture_API/index.html</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/82\">https://github.com/taoliujun/blog/issues/82</a></p>\n<!--hexo\n\n---\nurl: web-api-Document_Picture-in-Picture_API\ntags:\n  - webapi\n  - Document Picture-in-Picture\n---\n\n-->\n\n<h1 id=\"Document-Picture-in-Picture\"><a href=\"#Document-Picture-in-Picture\" class=\"headerlink\" title=\"Document Picture-in-Picture\"></a>Document Picture-in-Picture</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API\">https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API</a></p>\n</blockquote>\n<p><strong>Document Picture-in-Picture</strong>画中画用于在窗口中再开一个悬浮的窗口，视频悬浮在右下角就是典型的画中画，它有几点特性：</p>\n<ul>\n<li>不同于frame，它始终悬浮在最上层。</li>\n<li>随着主窗口关闭而自动销毁。</li>\n<li>没有导航特性。</li>\n<li>和主窗口没有任何干扰。</li>\n</ul>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"DocumentPictureInPicture\"><a href=\"#DocumentPictureInPicture\" class=\"headerlink\" title=\"DocumentPictureInPicture\"></a>DocumentPictureInPicture</h3><p>它包含了<code>window</code>属性，和<code>requestWindow()</code>方法。</p>\n<h3 id=\"DocumentPictureInPictureEvent\"><a href=\"#DocumentPictureInPictureEvent\" class=\"headerlink\" title=\"DocumentPictureInPictureEvent\"></a>DocumentPictureInPictureEvent</h3><p>相关事件。</p>\n<h2 id=\"方法和属性\"><a href=\"#方法和属性\" class=\"headerlink\" title=\"方法和属性\"></a>方法和属性</h2><h3 id=\"Window-documentPictureInPicture\"><a href=\"#Window-documentPictureInPicture\" class=\"headerlink\" title=\"Window.documentPictureInPicture\"></a>Window.documentPictureInPicture</h3><p>返回<code>DocumentPictureInPicture</code>接口实例。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Document_Picture-in-Picture_API/index.html\">https://taoliujun.github.io/example/web-api/Document_Picture-in-Picture_API/index.html</a></p>\n"},{"title":"Web API - File","date":"2024-03-12T18:32:04.000Z","url":"web-api-File_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/85](https://github.com/taoliujun/blog/issues/85)\n\n<!--hexo\n\n---\nurl: web-api-File_API\ntags:\n  - webapi\n  - File\n---\n\n-->\n\n# File\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/File_API\n\n**File**用于读取用户通过`<input type=\"file\"/>`选择、或`DataTransfer`拖拽的文件。\n\n## 接口\n\n### Blob\n\n文件的原始数据接口，可以用`text`、`stream`方法处理成文本或二进制流。\n\n### File\n\n文件接口。包含文件信息`size`、`type`等，还包含了`Blob`原始数据。\n\n### FileList\n\nFile list。\n\n### FileReader\n\n读取文件的接口，包含`readAsDataURL`、`readAsText`等方法来读取文件，通过`errer`、`load`、`progress`等事件监听读取结果，结果中包含了`result`、`reayState`等信息。\n\n### FileReaderSync\n\nFileReader的同步版本。\n\n## 属性和方法\n\n### URL.createObjectURL\n\n将`File`或`Blob`转成url字符串。\n\n### URL.revokeObjectURL\n\n将url字符串转成`Blob`对象。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/File_API/index.html\n\n1. 读取文件，并渲染到图片元素中。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/0f794817-4be3-4500-b9dd-b626043bc180)\n\n\n\n\n","source":"_posts/web-api-File_API.md","raw":"---\ntitle: \"Web API - File\"\ndate: \"2024-03-13T02:32:04Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-File_API\ntags:\n  - webapi\n  - File\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/85](https://github.com/taoliujun/blog/issues/85)\n\n<!--hexo\n\n---\nurl: web-api-File_API\ntags:\n  - webapi\n  - File\n---\n\n-->\n\n# File\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/File_API\n\n**File**用于读取用户通过`<input type=\"file\"/>`选择、或`DataTransfer`拖拽的文件。\n\n## 接口\n\n### Blob\n\n文件的原始数据接口，可以用`text`、`stream`方法处理成文本或二进制流。\n\n### File\n\n文件接口。包含文件信息`size`、`type`等，还包含了`Blob`原始数据。\n\n### FileList\n\nFile list。\n\n### FileReader\n\n读取文件的接口，包含`readAsDataURL`、`readAsText`等方法来读取文件，通过`errer`、`load`、`progress`等事件监听读取结果，结果中包含了`result`、`reayState`等信息。\n\n### FileReaderSync\n\nFileReader的同步版本。\n\n## 属性和方法\n\n### URL.createObjectURL\n\n将`File`或`Blob`转成url字符串。\n\n### URL.revokeObjectURL\n\n将url字符串转成`Blob`对象。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/File_API/index.html\n\n1. 读取文件，并渲染到图片元素中。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/0f794817-4be3-4500-b9dd-b626043bc180)\n\n\n\n\n","slug":"web-api-File_API","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp97003hhbp0914507lz","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/85\">https://github.com/taoliujun/blog/issues/85</a></p>\n<!--hexo\n\n---\nurl: web-api-File_API\ntags:\n  - webapi\n  - File\n---\n\n-->\n\n<h1 id=\"File\"><a href=\"#File\" class=\"headerlink\" title=\"File\"></a>File</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_API\">https://developer.mozilla.org/en-US/docs/Web/API/File_API</a></p>\n</blockquote>\n<p><strong>File</strong>用于读取用户通过<code>&lt;input type=&quot;file&quot;/&gt;</code>选择、或<code>DataTransfer</code>拖拽的文件。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Blob\"><a href=\"#Blob\" class=\"headerlink\" title=\"Blob\"></a>Blob</h3><p>文件的原始数据接口，可以用<code>text</code>、<code>stream</code>方法处理成文本或二进制流。</p>\n<h3 id=\"File-1\"><a href=\"#File-1\" class=\"headerlink\" title=\"File\"></a>File</h3><p>文件接口。包含文件信息<code>size</code>、<code>type</code>等，还包含了<code>Blob</code>原始数据。</p>\n<h3 id=\"FileList\"><a href=\"#FileList\" class=\"headerlink\" title=\"FileList\"></a>FileList</h3><p>File list。</p>\n<h3 id=\"FileReader\"><a href=\"#FileReader\" class=\"headerlink\" title=\"FileReader\"></a>FileReader</h3><p>读取文件的接口，包含<code>readAsDataURL</code>、<code>readAsText</code>等方法来读取文件，通过<code>errer</code>、<code>load</code>、<code>progress</code>等事件监听读取结果，结果中包含了<code>result</code>、<code>reayState</code>等信息。</p>\n<h3 id=\"FileReaderSync\"><a href=\"#FileReaderSync\" class=\"headerlink\" title=\"FileReaderSync\"></a>FileReaderSync</h3><p>FileReader的同步版本。</p>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"URL-createObjectURL\"><a href=\"#URL-createObjectURL\" class=\"headerlink\" title=\"URL.createObjectURL\"></a>URL.createObjectURL</h3><p>将<code>File</code>或<code>Blob</code>转成url字符串。</p>\n<h3 id=\"URL-revokeObjectURL\"><a href=\"#URL-revokeObjectURL\" class=\"headerlink\" title=\"URL.revokeObjectURL\"></a>URL.revokeObjectURL</h3><p>将url字符串转成<code>Blob</code>对象。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/File_API/index.html\">https://taoliujun.github.io/example/web-api/File_API/index.html</a></p>\n<ol>\n<li>读取文件，并渲染到图片元素中。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/0f794817-4be3-4500-b9dd-b626043bc180\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/85\">https://github.com/taoliujun/blog/issues/85</a></p>\n<!--hexo\n\n---\nurl: web-api-File_API\ntags:\n  - webapi\n  - File\n---\n\n-->\n\n<h1 id=\"File\"><a href=\"#File\" class=\"headerlink\" title=\"File\"></a>File</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_API\">https://developer.mozilla.org/en-US/docs/Web/API/File_API</a></p>\n</blockquote>\n<p><strong>File</strong>用于读取用户通过<code>&lt;input type=&quot;file&quot;/&gt;</code>选择、或<code>DataTransfer</code>拖拽的文件。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Blob\"><a href=\"#Blob\" class=\"headerlink\" title=\"Blob\"></a>Blob</h3><p>文件的原始数据接口，可以用<code>text</code>、<code>stream</code>方法处理成文本或二进制流。</p>\n<h3 id=\"File-1\"><a href=\"#File-1\" class=\"headerlink\" title=\"File\"></a>File</h3><p>文件接口。包含文件信息<code>size</code>、<code>type</code>等，还包含了<code>Blob</code>原始数据。</p>\n<h3 id=\"FileList\"><a href=\"#FileList\" class=\"headerlink\" title=\"FileList\"></a>FileList</h3><p>File list。</p>\n<h3 id=\"FileReader\"><a href=\"#FileReader\" class=\"headerlink\" title=\"FileReader\"></a>FileReader</h3><p>读取文件的接口，包含<code>readAsDataURL</code>、<code>readAsText</code>等方法来读取文件，通过<code>errer</code>、<code>load</code>、<code>progress</code>等事件监听读取结果，结果中包含了<code>result</code>、<code>reayState</code>等信息。</p>\n<h3 id=\"FileReaderSync\"><a href=\"#FileReaderSync\" class=\"headerlink\" title=\"FileReaderSync\"></a>FileReaderSync</h3><p>FileReader的同步版本。</p>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"URL-createObjectURL\"><a href=\"#URL-createObjectURL\" class=\"headerlink\" title=\"URL.createObjectURL\"></a>URL.createObjectURL</h3><p>将<code>File</code>或<code>Blob</code>转成url字符串。</p>\n<h3 id=\"URL-revokeObjectURL\"><a href=\"#URL-revokeObjectURL\" class=\"headerlink\" title=\"URL.revokeObjectURL\"></a>URL.revokeObjectURL</h3><p>将url字符串转成<code>Blob</code>对象。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/File_API/index.html\">https://taoliujun.github.io/example/web-api/File_API/index.html</a></p>\n<ol>\n<li>读取文件，并渲染到图片元素中。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/0f794817-4be3-4500-b9dd-b626043bc180\" alt=\"image\"></p>\n"},{"title":"Web API - EyeDropper","date":"2024-03-12T01:04:35.000Z","url":"web-api-EyeDropper_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/84](https://github.com/taoliujun/blog/issues/84)\n\n<!--hexo\n\n---\nurl: web-api-EyeDropper_API\ntags:\n  - webapi\n  - EyeDropper\n---\n\n-->\n\n# EyeDropper\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API\n\n**EyeDropper**提供了颜色吸管工具。\n\n## 接口\n\n### EyeDropper\n\n颜色吸管接口，包含了`open`方法。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/EyeDropper_API/index.html\n\n\n\n\n","source":"_posts/web-api-EyeDropper_API.md","raw":"---\ntitle: \"Web API - EyeDropper\"\ndate: \"2024-03-12T09:04:35Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-EyeDropper_API\ntags:\n  - webapi\n  - EyeDropper\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/84](https://github.com/taoliujun/blog/issues/84)\n\n<!--hexo\n\n---\nurl: web-api-EyeDropper_API\ntags:\n  - webapi\n  - EyeDropper\n---\n\n-->\n\n# EyeDropper\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API\n\n**EyeDropper**提供了颜色吸管工具。\n\n## 接口\n\n### EyeDropper\n\n颜色吸管接口，包含了`open`方法。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/EyeDropper_API/index.html\n\n\n\n\n","slug":"web-api-EyeDropper_API","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp98003lhbp0faae32b3","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/84\">https://github.com/taoliujun/blog/issues/84</a></p>\n<!--hexo\n\n---\nurl: web-api-EyeDropper_API\ntags:\n  - webapi\n  - EyeDropper\n---\n\n-->\n\n<h1 id=\"EyeDropper\"><a href=\"#EyeDropper\" class=\"headerlink\" title=\"EyeDropper\"></a>EyeDropper</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API\">https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API</a></p>\n</blockquote>\n<p><strong>EyeDropper</strong>提供了颜色吸管工具。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"EyeDropper-1\"><a href=\"#EyeDropper-1\" class=\"headerlink\" title=\"EyeDropper\"></a>EyeDropper</h3><p>颜色吸管接口，包含了<code>open</code>方法。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/EyeDropper_API/index.html\">https://taoliujun.github.io/example/web-api/EyeDropper_API/index.html</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/84\">https://github.com/taoliujun/blog/issues/84</a></p>\n<!--hexo\n\n---\nurl: web-api-EyeDropper_API\ntags:\n  - webapi\n  - EyeDropper\n---\n\n-->\n\n<h1 id=\"EyeDropper\"><a href=\"#EyeDropper\" class=\"headerlink\" title=\"EyeDropper\"></a>EyeDropper</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API\">https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API</a></p>\n</blockquote>\n<p><strong>EyeDropper</strong>提供了颜色吸管工具。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"EyeDropper-1\"><a href=\"#EyeDropper-1\" class=\"headerlink\" title=\"EyeDropper\"></a>EyeDropper</h3><p>颜色吸管接口，包含了<code>open</code>方法。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/EyeDropper_API/index.html\">https://taoliujun.github.io/example/web-api/EyeDropper_API/index.html</a></p>\n"},{"title":"Web API - File System","date":"2024-03-12T23:07:49.000Z","url":"web-api-File_System_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/86](https://github.com/taoliujun/blog/issues/86)\n\n<!--hexo\n\n---\nurl: web-api-File_System_API\ntags:\n  - webapi\n  - File System\n---\n\n-->\n\n# File System\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/File_System_API\n\n**File System**可读取、写入用户选择的文件、目录。\n\n> 和`File`的交互有所不同，本API不依赖`<input type=\"file\" />`元素。\n\n## OPFS(origin private file system) Concept\n\n以往，只能读取、写入用户手动选择的文件或目录，这是安全性上必须考虑的。但如果要批量写入很多文件，这些交互操作会频繁且耗时。OPFS提供了新的可能性，允许在私有域文件系统中直接操作文件，这个文件系统和用户的文件系统是隔离的，用户看不到它，它也不能访问用户的文件系统。\n\n对于用户选择的文件，也可以通过`createSyncAccessHandle()`授权为`OPFS`。\n\n-   OPFS在Web Worker中运行。\n-   OPFS就像是`Storage`、`IndexedDB`。\n-   清空浏览器的Storage，也会清除掉OPFS。\n\n## 接口\n\n### FileSystemHandle\n\n文件系统的基本接口，开发者不直接使用它。文件和目录的访问接口均继承于此。其中一部分属性、方法：\n\n-   `kind`，文件类型是file或directory。\n-   `name`，文件名。\n-   `queryPermission()`，查询操作的授权。\n-   `requestPermission()`，请求操作的授权。\n\n### FileSystemFileHandle\n\n访问文件的接口。除继承`FileSystemHandle`的属性方法，还有：\n\n-   `getFile()`，获取到文件对象。\n-   `createWritable()`，请求写入权限，返回`FileSystemWritableFileStream`。\n-   `createSyncAccessHandle()`，返回当前文件句柄的OPFS。\n\n### FileSystemDirectoryHandle\n\n访问目录的接口。除继承`FileSystemHandle`的属性方法，还有：\n\n-   `getDirectoryHandle()`，获取到指定名称的子目录对象。\n-   `getFileHandle()`，获取指定名称的文件对象。\n-   `removeEntry()`，移除指定名称的子目录或文件。\n-   迭代器`entries`、`keys`、`values`用于遍历目录内的条目。\n\n### FileSystemSyncAccessHandle\n\n访问OPFS的接口。部分属性方法有：\n\n-   `close`，释放句柄，禁止继续操作。\n-   `flush`，将写入的数据，保存到磁盘里。\n-   `write`，写入数据。\n-   `read`，读取数据。\n\n### FileSystemWritableFileStream\n\n写入文件的接口。部分属性方法有：\n\n-   `write`，写入数据。\n-   `close`，关闭且保存到磁盘。\n\n## 属性和方法\n\n### window.showOpenFilePicker(options)\n\n选择可读取文件的对话框，返回`FileSystemFileHandle`。\n\n入参支持多选文件、目录入口、目录定位、类型筛选等。\n\n### window.showSaveFilePicker()\n\n选择可写入文件的对话框，返回`FileSystemFileHandle`。该接口实例已经拥有了写入权限。\n\n### window.showDirectoryPicker()\n\n选择可读取目录的对话框，返回`FileSystemDirectoryHandle`。\n\n### DataTransferItem.getAsFileSystemHandle()\n\n拖拽文件或目录，返回`FileSystemFileHandle`或`FileSystemDirectoryHandle`。\n\n### StorageManager.getDirectory()\n\n通过`navigator.storage.getDirectory()`返回`OPFS`。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/File_System_API/index.html\n\n\n\n\n","source":"_posts/web-api-File_System_API.md","raw":"---\ntitle: \"Web API - File System\"\ndate: \"2024-03-13T07:07:49Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-File_System_API\ntags:\n  - webapi\n  - File System\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/86](https://github.com/taoliujun/blog/issues/86)\n\n<!--hexo\n\n---\nurl: web-api-File_System_API\ntags:\n  - webapi\n  - File System\n---\n\n-->\n\n# File System\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/File_System_API\n\n**File System**可读取、写入用户选择的文件、目录。\n\n> 和`File`的交互有所不同，本API不依赖`<input type=\"file\" />`元素。\n\n## OPFS(origin private file system) Concept\n\n以往，只能读取、写入用户手动选择的文件或目录，这是安全性上必须考虑的。但如果要批量写入很多文件，这些交互操作会频繁且耗时。OPFS提供了新的可能性，允许在私有域文件系统中直接操作文件，这个文件系统和用户的文件系统是隔离的，用户看不到它，它也不能访问用户的文件系统。\n\n对于用户选择的文件，也可以通过`createSyncAccessHandle()`授权为`OPFS`。\n\n-   OPFS在Web Worker中运行。\n-   OPFS就像是`Storage`、`IndexedDB`。\n-   清空浏览器的Storage，也会清除掉OPFS。\n\n## 接口\n\n### FileSystemHandle\n\n文件系统的基本接口，开发者不直接使用它。文件和目录的访问接口均继承于此。其中一部分属性、方法：\n\n-   `kind`，文件类型是file或directory。\n-   `name`，文件名。\n-   `queryPermission()`，查询操作的授权。\n-   `requestPermission()`，请求操作的授权。\n\n### FileSystemFileHandle\n\n访问文件的接口。除继承`FileSystemHandle`的属性方法，还有：\n\n-   `getFile()`，获取到文件对象。\n-   `createWritable()`，请求写入权限，返回`FileSystemWritableFileStream`。\n-   `createSyncAccessHandle()`，返回当前文件句柄的OPFS。\n\n### FileSystemDirectoryHandle\n\n访问目录的接口。除继承`FileSystemHandle`的属性方法，还有：\n\n-   `getDirectoryHandle()`，获取到指定名称的子目录对象。\n-   `getFileHandle()`，获取指定名称的文件对象。\n-   `removeEntry()`，移除指定名称的子目录或文件。\n-   迭代器`entries`、`keys`、`values`用于遍历目录内的条目。\n\n### FileSystemSyncAccessHandle\n\n访问OPFS的接口。部分属性方法有：\n\n-   `close`，释放句柄，禁止继续操作。\n-   `flush`，将写入的数据，保存到磁盘里。\n-   `write`，写入数据。\n-   `read`，读取数据。\n\n### FileSystemWritableFileStream\n\n写入文件的接口。部分属性方法有：\n\n-   `write`，写入数据。\n-   `close`，关闭且保存到磁盘。\n\n## 属性和方法\n\n### window.showOpenFilePicker(options)\n\n选择可读取文件的对话框，返回`FileSystemFileHandle`。\n\n入参支持多选文件、目录入口、目录定位、类型筛选等。\n\n### window.showSaveFilePicker()\n\n选择可写入文件的对话框，返回`FileSystemFileHandle`。该接口实例已经拥有了写入权限。\n\n### window.showDirectoryPicker()\n\n选择可读取目录的对话框，返回`FileSystemDirectoryHandle`。\n\n### DataTransferItem.getAsFileSystemHandle()\n\n拖拽文件或目录，返回`FileSystemFileHandle`或`FileSystemDirectoryHandle`。\n\n### StorageManager.getDirectory()\n\n通过`navigator.storage.getDirectory()`返回`OPFS`。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/File_System_API/index.html\n\n\n\n\n","slug":"web-api-File_System_API","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp99003ohbp0ayyjaog0","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/86\">https://github.com/taoliujun/blog/issues/86</a></p>\n<!--hexo\n\n---\nurl: web-api-File_System_API\ntags:\n  - webapi\n  - File System\n---\n\n-->\n\n<h1 id=\"File-System\"><a href=\"#File-System\" class=\"headerlink\" title=\"File System\"></a>File System</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_System_API\">https://developer.mozilla.org/en-US/docs/Web/API/File_System_API</a></p>\n</blockquote>\n<p><strong>File System</strong>可读取、写入用户选择的文件、目录。</p>\n<blockquote>\n<p>和<code>File</code>的交互有所不同，本API不依赖<code>&lt;input type=&quot;file&quot; /&gt;</code>元素。</p>\n</blockquote>\n<h2 id=\"OPFS-origin-private-file-system-Concept\"><a href=\"#OPFS-origin-private-file-system-Concept\" class=\"headerlink\" title=\"OPFS(origin private file system) Concept\"></a>OPFS(origin private file system) Concept</h2><p>以往，只能读取、写入用户手动选择的文件或目录，这是安全性上必须考虑的。但如果要批量写入很多文件，这些交互操作会频繁且耗时。OPFS提供了新的可能性，允许在私有域文件系统中直接操作文件，这个文件系统和用户的文件系统是隔离的，用户看不到它，它也不能访问用户的文件系统。</p>\n<p>对于用户选择的文件，也可以通过<code>createSyncAccessHandle()</code>授权为<code>OPFS</code>。</p>\n<ul>\n<li>OPFS在Web Worker中运行。</li>\n<li>OPFS就像是<code>Storage</code>、<code>IndexedDB</code>。</li>\n<li>清空浏览器的Storage，也会清除掉OPFS。</li>\n</ul>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"FileSystemHandle\"><a href=\"#FileSystemHandle\" class=\"headerlink\" title=\"FileSystemHandle\"></a>FileSystemHandle</h3><p>文件系统的基本接口，开发者不直接使用它。文件和目录的访问接口均继承于此。其中一部分属性、方法：</p>\n<ul>\n<li><code>kind</code>，文件类型是file或directory。</li>\n<li><code>name</code>，文件名。</li>\n<li><code>queryPermission()</code>，查询操作的授权。</li>\n<li><code>requestPermission()</code>，请求操作的授权。</li>\n</ul>\n<h3 id=\"FileSystemFileHandle\"><a href=\"#FileSystemFileHandle\" class=\"headerlink\" title=\"FileSystemFileHandle\"></a>FileSystemFileHandle</h3><p>访问文件的接口。除继承<code>FileSystemHandle</code>的属性方法，还有：</p>\n<ul>\n<li><code>getFile()</code>，获取到文件对象。</li>\n<li><code>createWritable()</code>，请求写入权限，返回<code>FileSystemWritableFileStream</code>。</li>\n<li><code>createSyncAccessHandle()</code>，返回当前文件句柄的OPFS。</li>\n</ul>\n<h3 id=\"FileSystemDirectoryHandle\"><a href=\"#FileSystemDirectoryHandle\" class=\"headerlink\" title=\"FileSystemDirectoryHandle\"></a>FileSystemDirectoryHandle</h3><p>访问目录的接口。除继承<code>FileSystemHandle</code>的属性方法，还有：</p>\n<ul>\n<li><code>getDirectoryHandle()</code>，获取到指定名称的子目录对象。</li>\n<li><code>getFileHandle()</code>，获取指定名称的文件对象。</li>\n<li><code>removeEntry()</code>，移除指定名称的子目录或文件。</li>\n<li>迭代器<code>entries</code>、<code>keys</code>、<code>values</code>用于遍历目录内的条目。</li>\n</ul>\n<h3 id=\"FileSystemSyncAccessHandle\"><a href=\"#FileSystemSyncAccessHandle\" class=\"headerlink\" title=\"FileSystemSyncAccessHandle\"></a>FileSystemSyncAccessHandle</h3><p>访问OPFS的接口。部分属性方法有：</p>\n<ul>\n<li><code>close</code>，释放句柄，禁止继续操作。</li>\n<li><code>flush</code>，将写入的数据，保存到磁盘里。</li>\n<li><code>write</code>，写入数据。</li>\n<li><code>read</code>，读取数据。</li>\n</ul>\n<h3 id=\"FileSystemWritableFileStream\"><a href=\"#FileSystemWritableFileStream\" class=\"headerlink\" title=\"FileSystemWritableFileStream\"></a>FileSystemWritableFileStream</h3><p>写入文件的接口。部分属性方法有：</p>\n<ul>\n<li><code>write</code>，写入数据。</li>\n<li><code>close</code>，关闭且保存到磁盘。</li>\n</ul>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"window-showOpenFilePicker-options\"><a href=\"#window-showOpenFilePicker-options\" class=\"headerlink\" title=\"window.showOpenFilePicker(options)\"></a>window.showOpenFilePicker(options)</h3><p>选择可读取文件的对话框，返回<code>FileSystemFileHandle</code>。</p>\n<p>入参支持多选文件、目录入口、目录定位、类型筛选等。</p>\n<h3 id=\"window-showSaveFilePicker\"><a href=\"#window-showSaveFilePicker\" class=\"headerlink\" title=\"window.showSaveFilePicker()\"></a>window.showSaveFilePicker()</h3><p>选择可写入文件的对话框，返回<code>FileSystemFileHandle</code>。该接口实例已经拥有了写入权限。</p>\n<h3 id=\"window-showDirectoryPicker\"><a href=\"#window-showDirectoryPicker\" class=\"headerlink\" title=\"window.showDirectoryPicker()\"></a>window.showDirectoryPicker()</h3><p>选择可读取目录的对话框，返回<code>FileSystemDirectoryHandle</code>。</p>\n<h3 id=\"DataTransferItem-getAsFileSystemHandle\"><a href=\"#DataTransferItem-getAsFileSystemHandle\" class=\"headerlink\" title=\"DataTransferItem.getAsFileSystemHandle()\"></a>DataTransferItem.getAsFileSystemHandle()</h3><p>拖拽文件或目录，返回<code>FileSystemFileHandle</code>或<code>FileSystemDirectoryHandle</code>。</p>\n<h3 id=\"StorageManager-getDirectory\"><a href=\"#StorageManager-getDirectory\" class=\"headerlink\" title=\"StorageManager.getDirectory()\"></a>StorageManager.getDirectory()</h3><p>通过<code>navigator.storage.getDirectory()</code>返回<code>OPFS</code>。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/File_System_API/index.html\">https://taoliujun.github.io/example/web-api/File_System_API/index.html</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/86\">https://github.com/taoliujun/blog/issues/86</a></p>\n<!--hexo\n\n---\nurl: web-api-File_System_API\ntags:\n  - webapi\n  - File System\n---\n\n-->\n\n<h1 id=\"File-System\"><a href=\"#File-System\" class=\"headerlink\" title=\"File System\"></a>File System</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_System_API\">https://developer.mozilla.org/en-US/docs/Web/API/File_System_API</a></p>\n</blockquote>\n<p><strong>File System</strong>可读取、写入用户选择的文件、目录。</p>\n<blockquote>\n<p>和<code>File</code>的交互有所不同，本API不依赖<code>&lt;input type=&quot;file&quot; /&gt;</code>元素。</p>\n</blockquote>\n<h2 id=\"OPFS-origin-private-file-system-Concept\"><a href=\"#OPFS-origin-private-file-system-Concept\" class=\"headerlink\" title=\"OPFS(origin private file system) Concept\"></a>OPFS(origin private file system) Concept</h2><p>以往，只能读取、写入用户手动选择的文件或目录，这是安全性上必须考虑的。但如果要批量写入很多文件，这些交互操作会频繁且耗时。OPFS提供了新的可能性，允许在私有域文件系统中直接操作文件，这个文件系统和用户的文件系统是隔离的，用户看不到它，它也不能访问用户的文件系统。</p>\n<p>对于用户选择的文件，也可以通过<code>createSyncAccessHandle()</code>授权为<code>OPFS</code>。</p>\n<ul>\n<li>OPFS在Web Worker中运行。</li>\n<li>OPFS就像是<code>Storage</code>、<code>IndexedDB</code>。</li>\n<li>清空浏览器的Storage，也会清除掉OPFS。</li>\n</ul>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"FileSystemHandle\"><a href=\"#FileSystemHandle\" class=\"headerlink\" title=\"FileSystemHandle\"></a>FileSystemHandle</h3><p>文件系统的基本接口，开发者不直接使用它。文件和目录的访问接口均继承于此。其中一部分属性、方法：</p>\n<ul>\n<li><code>kind</code>，文件类型是file或directory。</li>\n<li><code>name</code>，文件名。</li>\n<li><code>queryPermission()</code>，查询操作的授权。</li>\n<li><code>requestPermission()</code>，请求操作的授权。</li>\n</ul>\n<h3 id=\"FileSystemFileHandle\"><a href=\"#FileSystemFileHandle\" class=\"headerlink\" title=\"FileSystemFileHandle\"></a>FileSystemFileHandle</h3><p>访问文件的接口。除继承<code>FileSystemHandle</code>的属性方法，还有：</p>\n<ul>\n<li><code>getFile()</code>，获取到文件对象。</li>\n<li><code>createWritable()</code>，请求写入权限，返回<code>FileSystemWritableFileStream</code>。</li>\n<li><code>createSyncAccessHandle()</code>，返回当前文件句柄的OPFS。</li>\n</ul>\n<h3 id=\"FileSystemDirectoryHandle\"><a href=\"#FileSystemDirectoryHandle\" class=\"headerlink\" title=\"FileSystemDirectoryHandle\"></a>FileSystemDirectoryHandle</h3><p>访问目录的接口。除继承<code>FileSystemHandle</code>的属性方法，还有：</p>\n<ul>\n<li><code>getDirectoryHandle()</code>，获取到指定名称的子目录对象。</li>\n<li><code>getFileHandle()</code>，获取指定名称的文件对象。</li>\n<li><code>removeEntry()</code>，移除指定名称的子目录或文件。</li>\n<li>迭代器<code>entries</code>、<code>keys</code>、<code>values</code>用于遍历目录内的条目。</li>\n</ul>\n<h3 id=\"FileSystemSyncAccessHandle\"><a href=\"#FileSystemSyncAccessHandle\" class=\"headerlink\" title=\"FileSystemSyncAccessHandle\"></a>FileSystemSyncAccessHandle</h3><p>访问OPFS的接口。部分属性方法有：</p>\n<ul>\n<li><code>close</code>，释放句柄，禁止继续操作。</li>\n<li><code>flush</code>，将写入的数据，保存到磁盘里。</li>\n<li><code>write</code>，写入数据。</li>\n<li><code>read</code>，读取数据。</li>\n</ul>\n<h3 id=\"FileSystemWritableFileStream\"><a href=\"#FileSystemWritableFileStream\" class=\"headerlink\" title=\"FileSystemWritableFileStream\"></a>FileSystemWritableFileStream</h3><p>写入文件的接口。部分属性方法有：</p>\n<ul>\n<li><code>write</code>，写入数据。</li>\n<li><code>close</code>，关闭且保存到磁盘。</li>\n</ul>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"window-showOpenFilePicker-options\"><a href=\"#window-showOpenFilePicker-options\" class=\"headerlink\" title=\"window.showOpenFilePicker(options)\"></a>window.showOpenFilePicker(options)</h3><p>选择可读取文件的对话框，返回<code>FileSystemFileHandle</code>。</p>\n<p>入参支持多选文件、目录入口、目录定位、类型筛选等。</p>\n<h3 id=\"window-showSaveFilePicker\"><a href=\"#window-showSaveFilePicker\" class=\"headerlink\" title=\"window.showSaveFilePicker()\"></a>window.showSaveFilePicker()</h3><p>选择可写入文件的对话框，返回<code>FileSystemFileHandle</code>。该接口实例已经拥有了写入权限。</p>\n<h3 id=\"window-showDirectoryPicker\"><a href=\"#window-showDirectoryPicker\" class=\"headerlink\" title=\"window.showDirectoryPicker()\"></a>window.showDirectoryPicker()</h3><p>选择可读取目录的对话框，返回<code>FileSystemDirectoryHandle</code>。</p>\n<h3 id=\"DataTransferItem-getAsFileSystemHandle\"><a href=\"#DataTransferItem-getAsFileSystemHandle\" class=\"headerlink\" title=\"DataTransferItem.getAsFileSystemHandle()\"></a>DataTransferItem.getAsFileSystemHandle()</h3><p>拖拽文件或目录，返回<code>FileSystemFileHandle</code>或<code>FileSystemDirectoryHandle</code>。</p>\n<h3 id=\"StorageManager-getDirectory\"><a href=\"#StorageManager-getDirectory\" class=\"headerlink\" title=\"StorageManager.getDirectory()\"></a>StorageManager.getDirectory()</h3><p>通过<code>navigator.storage.getDirectory()</code>返回<code>OPFS</code>。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/File_System_API/index.html\">https://taoliujun.github.io/example/web-api/File_System_API/index.html</a></p>\n"},{"title":"Web API - Fullscreen","date":"2024-03-14T19:03:59.000Z","url":"web-api-Fullscreen_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/87](https://github.com/taoliujun/blog/issues/87)\n\n<!--hexo\n\n---\nurl: web-api-Fullscreen_API\ntags:\n  - webapi\n  - Fullscreen\n---\n\n-->\n\n# Fullscreen\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API\n\n**Fullscreen**可设置元素全屏，或退出全屏。\n\n> 全屏元素只能有一个。\n\n## 接口\n\n无。\n\n## 属性和方法\n\n### Document.fullscreenElement\n\n返回当前进入全屏的元素节点。\n\n### Element.requestFullscreen()\n\n将节点进入全屏。\n\n### Document.exitFullscreen()\n\n退出全屏。\n\n## 事件\n\n### fullscreenchange\n\n全屏状态变化的事件，在事件回调中，访问`Document.fullscreenElement`可判断是否处于全屏状态。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Fullscreen_API/index.html\n\n\n\n\n","source":"_posts/web-api-Fullscreen_API.md","raw":"---\ntitle: \"Web API - Fullscreen\"\ndate: \"2024-03-15T03:03:59Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-Fullscreen_API\ntags:\n  - webapi\n  - Fullscreen\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/87](https://github.com/taoliujun/blog/issues/87)\n\n<!--hexo\n\n---\nurl: web-api-Fullscreen_API\ntags:\n  - webapi\n  - Fullscreen\n---\n\n-->\n\n# Fullscreen\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API\n\n**Fullscreen**可设置元素全屏，或退出全屏。\n\n> 全屏元素只能有一个。\n\n## 接口\n\n无。\n\n## 属性和方法\n\n### Document.fullscreenElement\n\n返回当前进入全屏的元素节点。\n\n### Element.requestFullscreen()\n\n将节点进入全屏。\n\n### Document.exitFullscreen()\n\n退出全屏。\n\n## 事件\n\n### fullscreenchange\n\n全屏状态变化的事件，在事件回调中，访问`Document.fullscreenElement`可判断是否处于全屏状态。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Fullscreen_API/index.html\n\n\n\n\n","slug":"web-api-Fullscreen_API","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp99003shbp0hqko2tq9","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/87\">https://github.com/taoliujun/blog/issues/87</a></p>\n<!--hexo\n\n---\nurl: web-api-Fullscreen_API\ntags:\n  - webapi\n  - Fullscreen\n---\n\n-->\n\n<h1 id=\"Fullscreen\"><a href=\"#Fullscreen\" class=\"headerlink\" title=\"Fullscreen\"></a>Fullscreen</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API\">https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API</a></p>\n</blockquote>\n<p><strong>Fullscreen</strong>可设置元素全屏，或退出全屏。</p>\n<blockquote>\n<p>全屏元素只能有一个。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><p>无。</p>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"Document-fullscreenElement\"><a href=\"#Document-fullscreenElement\" class=\"headerlink\" title=\"Document.fullscreenElement\"></a>Document.fullscreenElement</h3><p>返回当前进入全屏的元素节点。</p>\n<h3 id=\"Element-requestFullscreen\"><a href=\"#Element-requestFullscreen\" class=\"headerlink\" title=\"Element.requestFullscreen()\"></a>Element.requestFullscreen()</h3><p>将节点进入全屏。</p>\n<h3 id=\"Document-exitFullscreen\"><a href=\"#Document-exitFullscreen\" class=\"headerlink\" title=\"Document.exitFullscreen()\"></a>Document.exitFullscreen()</h3><p>退出全屏。</p>\n<h2 id=\"事件\"><a href=\"#事件\" class=\"headerlink\" title=\"事件\"></a>事件</h2><h3 id=\"fullscreenchange\"><a href=\"#fullscreenchange\" class=\"headerlink\" title=\"fullscreenchange\"></a>fullscreenchange</h3><p>全屏状态变化的事件，在事件回调中，访问<code>Document.fullscreenElement</code>可判断是否处于全屏状态。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Fullscreen_API/index.html\">https://taoliujun.github.io/example/web-api/Fullscreen_API/index.html</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/87\">https://github.com/taoliujun/blog/issues/87</a></p>\n<!--hexo\n\n---\nurl: web-api-Fullscreen_API\ntags:\n  - webapi\n  - Fullscreen\n---\n\n-->\n\n<h1 id=\"Fullscreen\"><a href=\"#Fullscreen\" class=\"headerlink\" title=\"Fullscreen\"></a>Fullscreen</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API\">https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API</a></p>\n</blockquote>\n<p><strong>Fullscreen</strong>可设置元素全屏，或退出全屏。</p>\n<blockquote>\n<p>全屏元素只能有一个。</p>\n</blockquote>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><p>无。</p>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"Document-fullscreenElement\"><a href=\"#Document-fullscreenElement\" class=\"headerlink\" title=\"Document.fullscreenElement\"></a>Document.fullscreenElement</h3><p>返回当前进入全屏的元素节点。</p>\n<h3 id=\"Element-requestFullscreen\"><a href=\"#Element-requestFullscreen\" class=\"headerlink\" title=\"Element.requestFullscreen()\"></a>Element.requestFullscreen()</h3><p>将节点进入全屏。</p>\n<h3 id=\"Document-exitFullscreen\"><a href=\"#Document-exitFullscreen\" class=\"headerlink\" title=\"Document.exitFullscreen()\"></a>Document.exitFullscreen()</h3><p>退出全屏。</p>\n<h2 id=\"事件\"><a href=\"#事件\" class=\"headerlink\" title=\"事件\"></a>事件</h2><h3 id=\"fullscreenchange\"><a href=\"#fullscreenchange\" class=\"headerlink\" title=\"fullscreenchange\"></a>fullscreenchange</h3><p>全屏状态变化的事件，在事件回调中，访问<code>Document.fullscreenElement</code>可判断是否处于全屏状态。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Fullscreen_API/index.html\">https://taoliujun.github.io/example/web-api/Fullscreen_API/index.html</a></p>\n"},{"title":"Web API - HTML Drag And Drop","date":"2024-03-20T00:26:00.000Z","url":"web-api-HTML_Drag_and_Drop_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/91](https://github.com/taoliujun/blog/issues/91)\n\n<!--hexo\n\n---\nurl: web-api-HTML_Drag_and_Drop_API\ntags:\n  - webapi\n  - Drag Drop\n---\n\n-->\n\n# HTML Drag And Drop\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API\n\n**HTML Drag And Drop**允许在浏览器中拖放元素。\n\n**为方便描述，假设可拖动的元素为A，可被放置的元素是B。**\n\n## 接口\n\n### DataTransfer\n\n拖放过程的数据对象接口，由`Event.dataTransfer`暴露，它有如下属性：\n\n#### dropEffect\n\n拖放过程中，在B上给用户的反馈，通常在`dragenter`事件中设置该属性，有几个值：\n\n-   copy，生成A副本，通常的反馈表现是将光标变成一个`+`的标志。\n-   move，移动A，通常的反馈表现是将光标变成一个`箭头`的标志。\n-   link，建立A的链接，通常的反馈表现是将光标变成一个`左镜像箭头`的标志。\n-   none，禁止拖放，通常的反馈表现是将源项变成灰色。\n\n> 除了`none`会禁止放置行为，其他值仅仅会产生视觉表现，实际的放置行为由`drop`事件的回调函数里决定。\n\n#### effectAllowed\n\n拖放过程中，在A上给用户的反馈，通常在`dragstart`事件中设置该属性，有几个值：\n\n-   none，不允许拖放。\n-   copy，生成A副本。\n-   link，可以在新地方建立与A的链接。\n-   move，可移动A。\n-   copyLink，允许 copy 或者 link 操作。\n-   copyMove，允许 copy 或者 move 操作。\n-   linkMove，允许 link 或者 move 操作。\n-   all，允许所有的操作。\n\n#### files\n\n拖放的文件列表，返回`File[]`，此功能可用于将文件拖动到浏览器。\n\n#### items\n\n拖放操作中，数据传输项的列表，返回`DataTransferItemList`。\n\n#### types\n\n拖放的数据格式，和`items`的数据顺序是一一对应的。\n\n还包括了一些方法：\n\n#### setData/getData/clearData\n\n设置、读取、清除拖拽的数据。\n\n#### setDragImage\n\n设置拖动中跟随鼠标的图片，默认是A的半透明图像。\n\n### DataTransferItem\n\n一个拖动项接口。\n\n### DataTransferItemList\n\n拖动项集合接口。\n\n### DragEvent\n\n拖动事件接口。\n\n## 属性和方法\n\n//\n\n## 事件\n\n元素拖放过程中有一系列事件，为方便描述，假设可拖动的元素为A，可被放置的元素是B。\n\n### dragstart\n\nA的拖动行为开始。\n\n### drag\n\nA被拖动中，它会被连续触发。\n\n### dragenter\n\nA被拖动进了B。\n\n### dragover\n\nA被拖动中，在B的区域内，它会被连续触发。\n\n### dragleave\n\nA被拖动离开了B。\n\n### drop\n\nA放在了B中。\n\n### dragend\n\nA的拖动行为停止，比如放开了鼠标。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/HTML_Drag_and_Drop_API/index.html\n\n\n\n\n","source":"_posts/web-api-HTML_Drag_and_Drop_API.md","raw":"---\ntitle: \"Web API - HTML Drag And Drop\"\ndate: \"2024-03-20T08:26:00Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-HTML_Drag_and_Drop_API\ntags:\n  - webapi\n  - Drag Drop\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/91](https://github.com/taoliujun/blog/issues/91)\n\n<!--hexo\n\n---\nurl: web-api-HTML_Drag_and_Drop_API\ntags:\n  - webapi\n  - Drag Drop\n---\n\n-->\n\n# HTML Drag And Drop\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API\n\n**HTML Drag And Drop**允许在浏览器中拖放元素。\n\n**为方便描述，假设可拖动的元素为A，可被放置的元素是B。**\n\n## 接口\n\n### DataTransfer\n\n拖放过程的数据对象接口，由`Event.dataTransfer`暴露，它有如下属性：\n\n#### dropEffect\n\n拖放过程中，在B上给用户的反馈，通常在`dragenter`事件中设置该属性，有几个值：\n\n-   copy，生成A副本，通常的反馈表现是将光标变成一个`+`的标志。\n-   move，移动A，通常的反馈表现是将光标变成一个`箭头`的标志。\n-   link，建立A的链接，通常的反馈表现是将光标变成一个`左镜像箭头`的标志。\n-   none，禁止拖放，通常的反馈表现是将源项变成灰色。\n\n> 除了`none`会禁止放置行为，其他值仅仅会产生视觉表现，实际的放置行为由`drop`事件的回调函数里决定。\n\n#### effectAllowed\n\n拖放过程中，在A上给用户的反馈，通常在`dragstart`事件中设置该属性，有几个值：\n\n-   none，不允许拖放。\n-   copy，生成A副本。\n-   link，可以在新地方建立与A的链接。\n-   move，可移动A。\n-   copyLink，允许 copy 或者 link 操作。\n-   copyMove，允许 copy 或者 move 操作。\n-   linkMove，允许 link 或者 move 操作。\n-   all，允许所有的操作。\n\n#### files\n\n拖放的文件列表，返回`File[]`，此功能可用于将文件拖动到浏览器。\n\n#### items\n\n拖放操作中，数据传输项的列表，返回`DataTransferItemList`。\n\n#### types\n\n拖放的数据格式，和`items`的数据顺序是一一对应的。\n\n还包括了一些方法：\n\n#### setData/getData/clearData\n\n设置、读取、清除拖拽的数据。\n\n#### setDragImage\n\n设置拖动中跟随鼠标的图片，默认是A的半透明图像。\n\n### DataTransferItem\n\n一个拖动项接口。\n\n### DataTransferItemList\n\n拖动项集合接口。\n\n### DragEvent\n\n拖动事件接口。\n\n## 属性和方法\n\n//\n\n## 事件\n\n元素拖放过程中有一系列事件，为方便描述，假设可拖动的元素为A，可被放置的元素是B。\n\n### dragstart\n\nA的拖动行为开始。\n\n### drag\n\nA被拖动中，它会被连续触发。\n\n### dragenter\n\nA被拖动进了B。\n\n### dragover\n\nA被拖动中，在B的区域内，它会被连续触发。\n\n### dragleave\n\nA被拖动离开了B。\n\n### drop\n\nA放在了B中。\n\n### dragend\n\nA的拖动行为停止，比如放开了鼠标。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/HTML_Drag_and_Drop_API/index.html\n\n\n\n\n","slug":"web-api-HTML_Drag_and_Drop_API","published":1,"updated":"2024-03-21T07:57:46.936Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp9a003vhbp04dpeg9ve","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/91\">https://github.com/taoliujun/blog/issues/91</a></p>\n<!--hexo\n\n---\nurl: web-api-HTML_Drag_and_Drop_API\ntags:\n  - webapi\n  - Drag Drop\n---\n\n-->\n\n<h1 id=\"HTML-Drag-And-Drop\"><a href=\"#HTML-Drag-And-Drop\" class=\"headerlink\" title=\"HTML Drag And Drop\"></a>HTML Drag And Drop</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API\">https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API</a></p>\n</blockquote>\n<p><strong>HTML Drag And Drop</strong>允许在浏览器中拖放元素。</p>\n<p><strong>为方便描述，假设可拖动的元素为A，可被放置的元素是B。</strong></p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"DataTransfer\"><a href=\"#DataTransfer\" class=\"headerlink\" title=\"DataTransfer\"></a>DataTransfer</h3><p>拖放过程的数据对象接口，由<code>Event.dataTransfer</code>暴露，它有如下属性：</p>\n<h4 id=\"dropEffect\"><a href=\"#dropEffect\" class=\"headerlink\" title=\"dropEffect\"></a>dropEffect</h4><p>拖放过程中，在B上给用户的反馈，通常在<code>dragenter</code>事件中设置该属性，有几个值：</p>\n<ul>\n<li>copy，生成A副本，通常的反馈表现是将光标变成一个<code>+</code>的标志。</li>\n<li>move，移动A，通常的反馈表现是将光标变成一个<code>箭头</code>的标志。</li>\n<li>link，建立A的链接，通常的反馈表现是将光标变成一个<code>左镜像箭头</code>的标志。</li>\n<li>none，禁止拖放，通常的反馈表现是将源项变成灰色。</li>\n</ul>\n<blockquote>\n<p>除了<code>none</code>会禁止放置行为，其他值仅仅会产生视觉表现，实际的放置行为由<code>drop</code>事件的回调函数里决定。</p>\n</blockquote>\n<h4 id=\"effectAllowed\"><a href=\"#effectAllowed\" class=\"headerlink\" title=\"effectAllowed\"></a>effectAllowed</h4><p>拖放过程中，在A上给用户的反馈，通常在<code>dragstart</code>事件中设置该属性，有几个值：</p>\n<ul>\n<li>none，不允许拖放。</li>\n<li>copy，生成A副本。</li>\n<li>link，可以在新地方建立与A的链接。</li>\n<li>move，可移动A。</li>\n<li>copyLink，允许 copy 或者 link 操作。</li>\n<li>copyMove，允许 copy 或者 move 操作。</li>\n<li>linkMove，允许 link 或者 move 操作。</li>\n<li>all，允许所有的操作。</li>\n</ul>\n<h4 id=\"files\"><a href=\"#files\" class=\"headerlink\" title=\"files\"></a>files</h4><p>拖放的文件列表，返回<code>File[]</code>，此功能可用于将文件拖动到浏览器。</p>\n<h4 id=\"items\"><a href=\"#items\" class=\"headerlink\" title=\"items\"></a>items</h4><p>拖放操作中，数据传输项的列表，返回<code>DataTransferItemList</code>。</p>\n<h4 id=\"types\"><a href=\"#types\" class=\"headerlink\" title=\"types\"></a>types</h4><p>拖放的数据格式，和<code>items</code>的数据顺序是一一对应的。</p>\n<p>还包括了一些方法：</p>\n<h4 id=\"setData-x2F-getData-x2F-clearData\"><a href=\"#setData-x2F-getData-x2F-clearData\" class=\"headerlink\" title=\"setData&#x2F;getData&#x2F;clearData\"></a>setData&#x2F;getData&#x2F;clearData</h4><p>设置、读取、清除拖拽的数据。</p>\n<h4 id=\"setDragImage\"><a href=\"#setDragImage\" class=\"headerlink\" title=\"setDragImage\"></a>setDragImage</h4><p>设置拖动中跟随鼠标的图片，默认是A的半透明图像。</p>\n<h3 id=\"DataTransferItem\"><a href=\"#DataTransferItem\" class=\"headerlink\" title=\"DataTransferItem\"></a>DataTransferItem</h3><p>一个拖动项接口。</p>\n<h3 id=\"DataTransferItemList\"><a href=\"#DataTransferItemList\" class=\"headerlink\" title=\"DataTransferItemList\"></a>DataTransferItemList</h3><p>拖动项集合接口。</p>\n<h3 id=\"DragEvent\"><a href=\"#DragEvent\" class=\"headerlink\" title=\"DragEvent\"></a>DragEvent</h3><p>拖动事件接口。</p>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><p>&#x2F;&#x2F;</p>\n<h2 id=\"事件\"><a href=\"#事件\" class=\"headerlink\" title=\"事件\"></a>事件</h2><p>元素拖放过程中有一系列事件，为方便描述，假设可拖动的元素为A，可被放置的元素是B。</p>\n<h3 id=\"dragstart\"><a href=\"#dragstart\" class=\"headerlink\" title=\"dragstart\"></a>dragstart</h3><p>A的拖动行为开始。</p>\n<h3 id=\"drag\"><a href=\"#drag\" class=\"headerlink\" title=\"drag\"></a>drag</h3><p>A被拖动中，它会被连续触发。</p>\n<h3 id=\"dragenter\"><a href=\"#dragenter\" class=\"headerlink\" title=\"dragenter\"></a>dragenter</h3><p>A被拖动进了B。</p>\n<h3 id=\"dragover\"><a href=\"#dragover\" class=\"headerlink\" title=\"dragover\"></a>dragover</h3><p>A被拖动中，在B的区域内，它会被连续触发。</p>\n<h3 id=\"dragleave\"><a href=\"#dragleave\" class=\"headerlink\" title=\"dragleave\"></a>dragleave</h3><p>A被拖动离开了B。</p>\n<h3 id=\"drop\"><a href=\"#drop\" class=\"headerlink\" title=\"drop\"></a>drop</h3><p>A放在了B中。</p>\n<h3 id=\"dragend\"><a href=\"#dragend\" class=\"headerlink\" title=\"dragend\"></a>dragend</h3><p>A的拖动行为停止，比如放开了鼠标。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/HTML_Drag_and_Drop_API/index.html\">https://taoliujun.github.io/example/web-api/HTML_Drag_and_Drop_API/index.html</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/91\">https://github.com/taoliujun/blog/issues/91</a></p>\n<!--hexo\n\n---\nurl: web-api-HTML_Drag_and_Drop_API\ntags:\n  - webapi\n  - Drag Drop\n---\n\n-->\n\n<h1 id=\"HTML-Drag-And-Drop\"><a href=\"#HTML-Drag-And-Drop\" class=\"headerlink\" title=\"HTML Drag And Drop\"></a>HTML Drag And Drop</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API\">https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API</a></p>\n</blockquote>\n<p><strong>HTML Drag And Drop</strong>允许在浏览器中拖放元素。</p>\n<p><strong>为方便描述，假设可拖动的元素为A，可被放置的元素是B。</strong></p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"DataTransfer\"><a href=\"#DataTransfer\" class=\"headerlink\" title=\"DataTransfer\"></a>DataTransfer</h3><p>拖放过程的数据对象接口，由<code>Event.dataTransfer</code>暴露，它有如下属性：</p>\n<h4 id=\"dropEffect\"><a href=\"#dropEffect\" class=\"headerlink\" title=\"dropEffect\"></a>dropEffect</h4><p>拖放过程中，在B上给用户的反馈，通常在<code>dragenter</code>事件中设置该属性，有几个值：</p>\n<ul>\n<li>copy，生成A副本，通常的反馈表现是将光标变成一个<code>+</code>的标志。</li>\n<li>move，移动A，通常的反馈表现是将光标变成一个<code>箭头</code>的标志。</li>\n<li>link，建立A的链接，通常的反馈表现是将光标变成一个<code>左镜像箭头</code>的标志。</li>\n<li>none，禁止拖放，通常的反馈表现是将源项变成灰色。</li>\n</ul>\n<blockquote>\n<p>除了<code>none</code>会禁止放置行为，其他值仅仅会产生视觉表现，实际的放置行为由<code>drop</code>事件的回调函数里决定。</p>\n</blockquote>\n<h4 id=\"effectAllowed\"><a href=\"#effectAllowed\" class=\"headerlink\" title=\"effectAllowed\"></a>effectAllowed</h4><p>拖放过程中，在A上给用户的反馈，通常在<code>dragstart</code>事件中设置该属性，有几个值：</p>\n<ul>\n<li>none，不允许拖放。</li>\n<li>copy，生成A副本。</li>\n<li>link，可以在新地方建立与A的链接。</li>\n<li>move，可移动A。</li>\n<li>copyLink，允许 copy 或者 link 操作。</li>\n<li>copyMove，允许 copy 或者 move 操作。</li>\n<li>linkMove，允许 link 或者 move 操作。</li>\n<li>all，允许所有的操作。</li>\n</ul>\n<h4 id=\"files\"><a href=\"#files\" class=\"headerlink\" title=\"files\"></a>files</h4><p>拖放的文件列表，返回<code>File[]</code>，此功能可用于将文件拖动到浏览器。</p>\n<h4 id=\"items\"><a href=\"#items\" class=\"headerlink\" title=\"items\"></a>items</h4><p>拖放操作中，数据传输项的列表，返回<code>DataTransferItemList</code>。</p>\n<h4 id=\"types\"><a href=\"#types\" class=\"headerlink\" title=\"types\"></a>types</h4><p>拖放的数据格式，和<code>items</code>的数据顺序是一一对应的。</p>\n<p>还包括了一些方法：</p>\n<h4 id=\"setData-x2F-getData-x2F-clearData\"><a href=\"#setData-x2F-getData-x2F-clearData\" class=\"headerlink\" title=\"setData&#x2F;getData&#x2F;clearData\"></a>setData&#x2F;getData&#x2F;clearData</h4><p>设置、读取、清除拖拽的数据。</p>\n<h4 id=\"setDragImage\"><a href=\"#setDragImage\" class=\"headerlink\" title=\"setDragImage\"></a>setDragImage</h4><p>设置拖动中跟随鼠标的图片，默认是A的半透明图像。</p>\n<h3 id=\"DataTransferItem\"><a href=\"#DataTransferItem\" class=\"headerlink\" title=\"DataTransferItem\"></a>DataTransferItem</h3><p>一个拖动项接口。</p>\n<h3 id=\"DataTransferItemList\"><a href=\"#DataTransferItemList\" class=\"headerlink\" title=\"DataTransferItemList\"></a>DataTransferItemList</h3><p>拖动项集合接口。</p>\n<h3 id=\"DragEvent\"><a href=\"#DragEvent\" class=\"headerlink\" title=\"DragEvent\"></a>DragEvent</h3><p>拖动事件接口。</p>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><p>&#x2F;&#x2F;</p>\n<h2 id=\"事件\"><a href=\"#事件\" class=\"headerlink\" title=\"事件\"></a>事件</h2><p>元素拖放过程中有一系列事件，为方便描述，假设可拖动的元素为A，可被放置的元素是B。</p>\n<h3 id=\"dragstart\"><a href=\"#dragstart\" class=\"headerlink\" title=\"dragstart\"></a>dragstart</h3><p>A的拖动行为开始。</p>\n<h3 id=\"drag\"><a href=\"#drag\" class=\"headerlink\" title=\"drag\"></a>drag</h3><p>A被拖动中，它会被连续触发。</p>\n<h3 id=\"dragenter\"><a href=\"#dragenter\" class=\"headerlink\" title=\"dragenter\"></a>dragenter</h3><p>A被拖动进了B。</p>\n<h3 id=\"dragover\"><a href=\"#dragover\" class=\"headerlink\" title=\"dragover\"></a>dragover</h3><p>A被拖动中，在B的区域内，它会被连续触发。</p>\n<h3 id=\"dragleave\"><a href=\"#dragleave\" class=\"headerlink\" title=\"dragleave\"></a>dragleave</h3><p>A被拖动离开了B。</p>\n<h3 id=\"drop\"><a href=\"#drop\" class=\"headerlink\" title=\"drop\"></a>drop</h3><p>A放在了B中。</p>\n<h3 id=\"dragend\"><a href=\"#dragend\" class=\"headerlink\" title=\"dragend\"></a>dragend</h3><p>A的拖动行为停止，比如放开了鼠标。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/HTML_Drag_and_Drop_API/index.html\">https://taoliujun.github.io/example/web-api/HTML_Drag_and_Drop_API/index.html</a></p>\n"},{"title":"Web API - Geolocation","date":"2024-03-14T21:48:21.000Z","url":"web-api-Geolocation_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/88](https://github.com/taoliujun/blog/issues/88)\n\n<!--hexo\n\n---\nurl: web-api-Geolocation_API\ntags:\n  - webapi\n  - Geolocation\n---\n\n-->\n\n# Geolocation\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API\n\n**Geolocation**获取设备的地理位置信息，包括了纬度、经度、海拔、经纬度的精度范围（米）、海拔的精度范围（米），以及设备的面朝方位度数和速度。\n\n## 接口\n\n### Geolocation\n\n地理定位接口，提供了几个方法：\n\n-   `getCurrentPosition` 获取地理定位信息，返回`GeolocationPosition`。\n-   `watchPosition` 监听地理定位信息，返回`GeolocationPosition`。\n-   `clearWatch` 停止监听。\n\n### GeolocationCoordinates\n\n定位信息，包含经纬度等。\n\n### GeolocationPosition\n\n定位信息，包含`timestamp`和`GeolocationCoordinates`。\n\n### GeolocationPositionError\n\n定位异常信息，如用户拒绝，定位超时。\n\n## 属性和方法\n\n### Navigator.geolocation\n\n返回`Geolocation`。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Geolocation_API/index.html\n\n1. 打印位置信息。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/0eee3be8-2880-406a-acc9-0b5c50512fc8)\n\n\n\n\n","source":"_posts/web-api-Geolocation_API.md","raw":"---\ntitle: \"Web API - Geolocation\"\ndate: \"2024-03-15T05:48:21Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-Geolocation_API\ntags:\n  - webapi\n  - Geolocation\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/88](https://github.com/taoliujun/blog/issues/88)\n\n<!--hexo\n\n---\nurl: web-api-Geolocation_API\ntags:\n  - webapi\n  - Geolocation\n---\n\n-->\n\n# Geolocation\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API\n\n**Geolocation**获取设备的地理位置信息，包括了纬度、经度、海拔、经纬度的精度范围（米）、海拔的精度范围（米），以及设备的面朝方位度数和速度。\n\n## 接口\n\n### Geolocation\n\n地理定位接口，提供了几个方法：\n\n-   `getCurrentPosition` 获取地理定位信息，返回`GeolocationPosition`。\n-   `watchPosition` 监听地理定位信息，返回`GeolocationPosition`。\n-   `clearWatch` 停止监听。\n\n### GeolocationCoordinates\n\n定位信息，包含经纬度等。\n\n### GeolocationPosition\n\n定位信息，包含`timestamp`和`GeolocationCoordinates`。\n\n### GeolocationPositionError\n\n定位异常信息，如用户拒绝，定位超时。\n\n## 属性和方法\n\n### Navigator.geolocation\n\n返回`Geolocation`。\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Geolocation_API/index.html\n\n1. 打印位置信息。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/0eee3be8-2880-406a-acc9-0b5c50512fc8)\n\n\n\n\n","slug":"web-api-Geolocation_API","published":1,"updated":"2024-03-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp9b003yhbp080ab4o4p","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/88\">https://github.com/taoliujun/blog/issues/88</a></p>\n<!--hexo\n\n---\nurl: web-api-Geolocation_API\ntags:\n  - webapi\n  - Geolocation\n---\n\n-->\n\n<h1 id=\"Geolocation\"><a href=\"#Geolocation\" class=\"headerlink\" title=\"Geolocation\"></a>Geolocation</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API\">https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API</a></p>\n</blockquote>\n<p><strong>Geolocation</strong>获取设备的地理位置信息，包括了纬度、经度、海拔、经纬度的精度范围（米）、海拔的精度范围（米），以及设备的面朝方位度数和速度。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Geolocation-1\"><a href=\"#Geolocation-1\" class=\"headerlink\" title=\"Geolocation\"></a>Geolocation</h3><p>地理定位接口，提供了几个方法：</p>\n<ul>\n<li><code>getCurrentPosition</code> 获取地理定位信息，返回<code>GeolocationPosition</code>。</li>\n<li><code>watchPosition</code> 监听地理定位信息，返回<code>GeolocationPosition</code>。</li>\n<li><code>clearWatch</code> 停止监听。</li>\n</ul>\n<h3 id=\"GeolocationCoordinates\"><a href=\"#GeolocationCoordinates\" class=\"headerlink\" title=\"GeolocationCoordinates\"></a>GeolocationCoordinates</h3><p>定位信息，包含经纬度等。</p>\n<h3 id=\"GeolocationPosition\"><a href=\"#GeolocationPosition\" class=\"headerlink\" title=\"GeolocationPosition\"></a>GeolocationPosition</h3><p>定位信息，包含<code>timestamp</code>和<code>GeolocationCoordinates</code>。</p>\n<h3 id=\"GeolocationPositionError\"><a href=\"#GeolocationPositionError\" class=\"headerlink\" title=\"GeolocationPositionError\"></a>GeolocationPositionError</h3><p>定位异常信息，如用户拒绝，定位超时。</p>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"Navigator-geolocation\"><a href=\"#Navigator-geolocation\" class=\"headerlink\" title=\"Navigator.geolocation\"></a>Navigator.geolocation</h3><p>返回<code>Geolocation</code>。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Geolocation_API/index.html\">https://taoliujun.github.io/example/web-api/Geolocation_API/index.html</a></p>\n<ol>\n<li>打印位置信息。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/0eee3be8-2880-406a-acc9-0b5c50512fc8\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/88\">https://github.com/taoliujun/blog/issues/88</a></p>\n<!--hexo\n\n---\nurl: web-api-Geolocation_API\ntags:\n  - webapi\n  - Geolocation\n---\n\n-->\n\n<h1 id=\"Geolocation\"><a href=\"#Geolocation\" class=\"headerlink\" title=\"Geolocation\"></a>Geolocation</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API\">https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API</a></p>\n</blockquote>\n<p><strong>Geolocation</strong>获取设备的地理位置信息，包括了纬度、经度、海拔、经纬度的精度范围（米）、海拔的精度范围（米），以及设备的面朝方位度数和速度。</p>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"Geolocation-1\"><a href=\"#Geolocation-1\" class=\"headerlink\" title=\"Geolocation\"></a>Geolocation</h3><p>地理定位接口，提供了几个方法：</p>\n<ul>\n<li><code>getCurrentPosition</code> 获取地理定位信息，返回<code>GeolocationPosition</code>。</li>\n<li><code>watchPosition</code> 监听地理定位信息，返回<code>GeolocationPosition</code>。</li>\n<li><code>clearWatch</code> 停止监听。</li>\n</ul>\n<h3 id=\"GeolocationCoordinates\"><a href=\"#GeolocationCoordinates\" class=\"headerlink\" title=\"GeolocationCoordinates\"></a>GeolocationCoordinates</h3><p>定位信息，包含经纬度等。</p>\n<h3 id=\"GeolocationPosition\"><a href=\"#GeolocationPosition\" class=\"headerlink\" title=\"GeolocationPosition\"></a>GeolocationPosition</h3><p>定位信息，包含<code>timestamp</code>和<code>GeolocationCoordinates</code>。</p>\n<h3 id=\"GeolocationPositionError\"><a href=\"#GeolocationPositionError\" class=\"headerlink\" title=\"GeolocationPositionError\"></a>GeolocationPositionError</h3><p>定位异常信息，如用户拒绝，定位超时。</p>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><h3 id=\"Navigator-geolocation\"><a href=\"#Navigator-geolocation\" class=\"headerlink\" title=\"Navigator.geolocation\"></a>Navigator.geolocation</h3><p>返回<code>Geolocation</code>。</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Geolocation_API/index.html\">https://taoliujun.github.io/example/web-api/Geolocation_API/index.html</a></p>\n<ol>\n<li>打印位置信息。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/0eee3be8-2880-406a-acc9-0b5c50512fc8\" alt=\"image\"></p>\n"},{"title":"Web Api - Intersection Observer","date":"2024-03-20T23:56:16.000Z","url":"web-api-Intersection_Observer_API","_content":"\n\n原文链接：[https://github.com/taoliujun/blog/issues/92](https://github.com/taoliujun/blog/issues/92)\n\n<!--hexo\n\n---\nurl: web-api-Intersection_Observer_API\ntags:\n  - webapi\n  - Intersection Observer\n---\n\n-->\n\n# Intersection Observer\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n\n**Intersection Observer**用于检测目标元素与祖先元素或顶级文档的视口相交情况的变化。主要用于：\n\n-   图片懒加载。\n-   无限滚动。\n-   元素可见度埋点。\n\n## 接口\n\n### IntersectionObserver\n\n相交观察器接口，实例化的时候接受一个回调函数，和一个配置项。\n\n> 观察是异步的，所以回调函数执行时获取的相交信息，不是实时的。\n\n回调函数包含了两个入参：\n\n-   entries，`IntersectionObserverEntry`接口集合。\n-   observer，本实例。\n-   配置项包含属性：\n\n-   root，必须是被观察元素的祖先元素，或`null`表示为顶级文档。被观察元素将与该元素相交。\n-   rootMargin，计算交叉时偏移。默认为`0 0 0 0`。\n-   threshold，相交比例阈值，0-1，表示相交比例达到多少时会触发回调函数，默认为`0`。\n\n本接口实例返回了一系列属性，如`root`、`rootMargin`等，意义同入参配置项。还返回了一系列方法如下：\n\n-   observe，加入一个被观察元素。\n-   unobserve，移除一个被观察元素。\n-   disconnect，停止观察。\n-   takeRecords，返回被观察者集合的相交信息。\n\n### IntersectionObserverEntry\n\n某一时刻的相交信息，包含了一系列属性：\n\n-   boundingClientRect，被观察者的边界信息。\n-   intersectionRect，相交区域。\n-   intersectionRatio，相交比例。\n-   isIntersecting，是否相交。\n-   rootBounds，根元素的边界信息。\n-   target，被观察者元素。\n-   time，交叉触发时间差。\n\n## 属性和方法\n\n//\n\n## 事件\n\n//\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Intersection_Observer_API/index.html\n\n1. 在高度400的父观察元素中，放3个高度300的被观察元素，触发阈值是`[0,1]`，表示被观察者的相交区域比例在0或1发生变化的时候，都会触发回到函数，初始化日志：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/7c93addb-c0b1-4705-873d-fcd150550e22)\n\n元素1全部可见，元素2是0.33的区域可见，元素3则完全不可见。\n\n1. 滚动一点，元素1触发了1阈值。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/791e2220-8837-4784-9139-094b9d6db4eb)\n\n3. 再滚动一点，元素1没有触发0阈值，所以日志中没有它；元素2触发了1阈值；元素3触发了0阈值。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/28587ac6-29d7-4693-90fb-844d3b4f4239)\n\n\n\n\n","source":"_posts/web-api-Intersection_Observer_API.md","raw":"---\ntitle: \"Web Api - Intersection Observer\"\ndate: \"2024-03-21T07:56:16Z\"\ncategories:\n  - [Web API]\n\nurl: web-api-Intersection_Observer_API\ntags:\n  - webapi\n  - Intersection Observer\n\n---\n\n\n原文链接：[https://github.com/taoliujun/blog/issues/92](https://github.com/taoliujun/blog/issues/92)\n\n<!--hexo\n\n---\nurl: web-api-Intersection_Observer_API\ntags:\n  - webapi\n  - Intersection Observer\n---\n\n-->\n\n# Intersection Observer\n\n> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n\n**Intersection Observer**用于检测目标元素与祖先元素或顶级文档的视口相交情况的变化。主要用于：\n\n-   图片懒加载。\n-   无限滚动。\n-   元素可见度埋点。\n\n## 接口\n\n### IntersectionObserver\n\n相交观察器接口，实例化的时候接受一个回调函数，和一个配置项。\n\n> 观察是异步的，所以回调函数执行时获取的相交信息，不是实时的。\n\n回调函数包含了两个入参：\n\n-   entries，`IntersectionObserverEntry`接口集合。\n-   observer，本实例。\n-   配置项包含属性：\n\n-   root，必须是被观察元素的祖先元素，或`null`表示为顶级文档。被观察元素将与该元素相交。\n-   rootMargin，计算交叉时偏移。默认为`0 0 0 0`。\n-   threshold，相交比例阈值，0-1，表示相交比例达到多少时会触发回调函数，默认为`0`。\n\n本接口实例返回了一系列属性，如`root`、`rootMargin`等，意义同入参配置项。还返回了一系列方法如下：\n\n-   observe，加入一个被观察元素。\n-   unobserve，移除一个被观察元素。\n-   disconnect，停止观察。\n-   takeRecords，返回被观察者集合的相交信息。\n\n### IntersectionObserverEntry\n\n某一时刻的相交信息，包含了一系列属性：\n\n-   boundingClientRect，被观察者的边界信息。\n-   intersectionRect，相交区域。\n-   intersectionRatio，相交比例。\n-   isIntersecting，是否相交。\n-   rootBounds，根元素的边界信息。\n-   target，被观察者元素。\n-   time，交叉触发时间差。\n\n## 属性和方法\n\n//\n\n## 事件\n\n//\n\n## 示例\n\n示例：https://taoliujun.github.io/example/web-api/Intersection_Observer_API/index.html\n\n1. 在高度400的父观察元素中，放3个高度300的被观察元素，触发阈值是`[0,1]`，表示被观察者的相交区域比例在0或1发生变化的时候，都会触发回到函数，初始化日志：\n\n![image](https://github.com/taoliujun/blog/assets/5689134/7c93addb-c0b1-4705-873d-fcd150550e22)\n\n元素1全部可见，元素2是0.33的区域可见，元素3则完全不可见。\n\n1. 滚动一点，元素1触发了1阈值。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/791e2220-8837-4784-9139-094b9d6db4eb)\n\n3. 再滚动一点，元素1没有触发0阈值，所以日志中没有它；元素2触发了1阈值；元素3触发了0阈值。\n\n![image](https://github.com/taoliujun/blog/assets/5689134/28587ac6-29d7-4693-90fb-844d3b4f4239)\n\n\n\n\n","slug":"web-api-Intersection_Observer_API","published":1,"updated":"2024-03-21T07:57:46.940Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp9b0041hbp00lxd5iso","content":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/92\">https://github.com/taoliujun/blog/issues/92</a></p>\n<!--hexo\n\n---\nurl: web-api-Intersection_Observer_API\ntags:\n  - webapi\n  - Intersection Observer\n---\n\n-->\n\n<h1 id=\"Intersection-Observer\"><a href=\"#Intersection-Observer\" class=\"headerlink\" title=\"Intersection Observer\"></a>Intersection Observer</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\">https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API</a></p>\n</blockquote>\n<p><strong>Intersection Observer</strong>用于检测目标元素与祖先元素或顶级文档的视口相交情况的变化。主要用于：</p>\n<ul>\n<li>图片懒加载。</li>\n<li>无限滚动。</li>\n<li>元素可见度埋点。</li>\n</ul>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"IntersectionObserver\"><a href=\"#IntersectionObserver\" class=\"headerlink\" title=\"IntersectionObserver\"></a>IntersectionObserver</h3><p>相交观察器接口，实例化的时候接受一个回调函数，和一个配置项。</p>\n<blockquote>\n<p>观察是异步的，所以回调函数执行时获取的相交信息，不是实时的。</p>\n</blockquote>\n<p>回调函数包含了两个入参：</p>\n<ul>\n<li><p>entries，<code>IntersectionObserverEntry</code>接口集合。</p>\n</li>\n<li><p>observer，本实例。</p>\n</li>\n<li><p>配置项包含属性：</p>\n</li>\n<li><p>root，必须是被观察元素的祖先元素，或<code>null</code>表示为顶级文档。被观察元素将与该元素相交。</p>\n</li>\n<li><p>rootMargin，计算交叉时偏移。默认为<code>0 0 0 0</code>。</p>\n</li>\n<li><p>threshold，相交比例阈值，0-1，表示相交比例达到多少时会触发回调函数，默认为<code>0</code>。</p>\n</li>\n</ul>\n<p>本接口实例返回了一系列属性，如<code>root</code>、<code>rootMargin</code>等，意义同入参配置项。还返回了一系列方法如下：</p>\n<ul>\n<li>observe，加入一个被观察元素。</li>\n<li>unobserve，移除一个被观察元素。</li>\n<li>disconnect，停止观察。</li>\n<li>takeRecords，返回被观察者集合的相交信息。</li>\n</ul>\n<h3 id=\"IntersectionObserverEntry\"><a href=\"#IntersectionObserverEntry\" class=\"headerlink\" title=\"IntersectionObserverEntry\"></a>IntersectionObserverEntry</h3><p>某一时刻的相交信息，包含了一系列属性：</p>\n<ul>\n<li>boundingClientRect，被观察者的边界信息。</li>\n<li>intersectionRect，相交区域。</li>\n<li>intersectionRatio，相交比例。</li>\n<li>isIntersecting，是否相交。</li>\n<li>rootBounds，根元素的边界信息。</li>\n<li>target，被观察者元素。</li>\n<li>time，交叉触发时间差。</li>\n</ul>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><p>&#x2F;&#x2F;</p>\n<h2 id=\"事件\"><a href=\"#事件\" class=\"headerlink\" title=\"事件\"></a>事件</h2><p>&#x2F;&#x2F;</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Intersection_Observer_API/index.html\">https://taoliujun.github.io/example/web-api/Intersection_Observer_API/index.html</a></p>\n<ol>\n<li>在高度400的父观察元素中，放3个高度300的被观察元素，触发阈值是<code>[0,1]</code>，表示被观察者的相交区域比例在0或1发生变化的时候，都会触发回到函数，初始化日志：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/7c93addb-c0b1-4705-873d-fcd150550e22\" alt=\"image\"></p>\n<p>元素1全部可见，元素2是0.33的区域可见，元素3则完全不可见。</p>\n<ol>\n<li>滚动一点，元素1触发了1阈值。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/791e2220-8837-4784-9139-094b9d6db4eb\" alt=\"image\"></p>\n<ol start=\"3\">\n<li>再滚动一点，元素1没有触发0阈值，所以日志中没有它；元素2触发了1阈值；元素3触发了0阈值。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/28587ac6-29d7-4693-90fb-844d3b4f4239\" alt=\"image\"></p>\n","site":{"data":{}},"excerpt":"","more":"<p>原文链接：<a href=\"https://github.com/taoliujun/blog/issues/92\">https://github.com/taoliujun/blog/issues/92</a></p>\n<!--hexo\n\n---\nurl: web-api-Intersection_Observer_API\ntags:\n  - webapi\n  - Intersection Observer\n---\n\n-->\n\n<h1 id=\"Intersection-Observer\"><a href=\"#Intersection-Observer\" class=\"headerlink\" title=\"Intersection Observer\"></a>Intersection Observer</h1><blockquote>\n<p>MDN: <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\">https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API</a></p>\n</blockquote>\n<p><strong>Intersection Observer</strong>用于检测目标元素与祖先元素或顶级文档的视口相交情况的变化。主要用于：</p>\n<ul>\n<li>图片懒加载。</li>\n<li>无限滚动。</li>\n<li>元素可见度埋点。</li>\n</ul>\n<h2 id=\"接口\"><a href=\"#接口\" class=\"headerlink\" title=\"接口\"></a>接口</h2><h3 id=\"IntersectionObserver\"><a href=\"#IntersectionObserver\" class=\"headerlink\" title=\"IntersectionObserver\"></a>IntersectionObserver</h3><p>相交观察器接口，实例化的时候接受一个回调函数，和一个配置项。</p>\n<blockquote>\n<p>观察是异步的，所以回调函数执行时获取的相交信息，不是实时的。</p>\n</blockquote>\n<p>回调函数包含了两个入参：</p>\n<ul>\n<li><p>entries，<code>IntersectionObserverEntry</code>接口集合。</p>\n</li>\n<li><p>observer，本实例。</p>\n</li>\n<li><p>配置项包含属性：</p>\n</li>\n<li><p>root，必须是被观察元素的祖先元素，或<code>null</code>表示为顶级文档。被观察元素将与该元素相交。</p>\n</li>\n<li><p>rootMargin，计算交叉时偏移。默认为<code>0 0 0 0</code>。</p>\n</li>\n<li><p>threshold，相交比例阈值，0-1，表示相交比例达到多少时会触发回调函数，默认为<code>0</code>。</p>\n</li>\n</ul>\n<p>本接口实例返回了一系列属性，如<code>root</code>、<code>rootMargin</code>等，意义同入参配置项。还返回了一系列方法如下：</p>\n<ul>\n<li>observe，加入一个被观察元素。</li>\n<li>unobserve，移除一个被观察元素。</li>\n<li>disconnect，停止观察。</li>\n<li>takeRecords，返回被观察者集合的相交信息。</li>\n</ul>\n<h3 id=\"IntersectionObserverEntry\"><a href=\"#IntersectionObserverEntry\" class=\"headerlink\" title=\"IntersectionObserverEntry\"></a>IntersectionObserverEntry</h3><p>某一时刻的相交信息，包含了一系列属性：</p>\n<ul>\n<li>boundingClientRect，被观察者的边界信息。</li>\n<li>intersectionRect，相交区域。</li>\n<li>intersectionRatio，相交比例。</li>\n<li>isIntersecting，是否相交。</li>\n<li>rootBounds，根元素的边界信息。</li>\n<li>target，被观察者元素。</li>\n<li>time，交叉触发时间差。</li>\n</ul>\n<h2 id=\"属性和方法\"><a href=\"#属性和方法\" class=\"headerlink\" title=\"属性和方法\"></a>属性和方法</h2><p>&#x2F;&#x2F;</p>\n<h2 id=\"事件\"><a href=\"#事件\" class=\"headerlink\" title=\"事件\"></a>事件</h2><p>&#x2F;&#x2F;</p>\n<h2 id=\"示例\"><a href=\"#示例\" class=\"headerlink\" title=\"示例\"></a>示例</h2><p>示例：<a href=\"https://taoliujun.github.io/example/web-api/Intersection_Observer_API/index.html\">https://taoliujun.github.io/example/web-api/Intersection_Observer_API/index.html</a></p>\n<ol>\n<li>在高度400的父观察元素中，放3个高度300的被观察元素，触发阈值是<code>[0,1]</code>，表示被观察者的相交区域比例在0或1发生变化的时候，都会触发回到函数，初始化日志：</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/7c93addb-c0b1-4705-873d-fcd150550e22\" alt=\"image\"></p>\n<p>元素1全部可见，元素2是0.33的区域可见，元素3则完全不可见。</p>\n<ol>\n<li>滚动一点，元素1触发了1阈值。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/791e2220-8837-4784-9139-094b9d6db4eb\" alt=\"image\"></p>\n<ol start=\"3\">\n<li>再滚动一点，元素1没有触发0阈值，所以日志中没有它；元素2触发了1阈值；元素3触发了0阈值。</li>\n</ol>\n<p><img src=\"https://github.com/taoliujun/blog/assets/5689134/28587ac6-29d7-4693-90fb-844d3b4f4239\" alt=\"image\"></p>\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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp9c0044hbp059ht0chz","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":"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\n<!--hexo-->\n### A\n\n- [ ] [Audio Output Devices API](https://developer.mozilla.org/en-US/docs/Web/API/Audio_Output_Devices_API) 选择音频播放设备。*Experimental*\n\n### B\n\n- [ ] [Background Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Background_Fetch_API) 在后台下载大文件。*Experimental*\n- [ ] [Background Sync](https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API) 延迟任务以便在网络稳定时运行。*Experimental*\n- [x] #55，[Background Tasks](https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API) 利用空闲时间跑阻塞的任务。\n- [x] #50，[Badging API](https://developer.mozilla.org/en-US/docs/Web/API/Badging_API) 在web App中设置图标徽章。\n- [ ] [Barcode Detection API](https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API)，读取图片流中的条码、二维码。*Experimental*\n- [x] #58，[Battery API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API) 获取设备电池状态。\n- [x] #53，[Beacon](https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API) 发送无需响应的请求，保证浏览器关闭之前发送完毕。\n- [ ] [Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API) 连接蓝牙。*Experimental*\n- [x] #59，[Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API) 跨标签、窗口通信。\n\n### C\n\n- [ ] [CSS Counter Styles](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Counter_Styles) 为CSS定义计数器。\n- [x] #63，[CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API) 设置元素的高亮区域。\n- [x] #65，[CSS Font Loading API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API) 字体加载管理。\n- [ ] [CSS Painting API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API) 为CSS的背景等属性提供自定义的图片绘制。*Experimental*\n- [x] #67，[CSS Properties and Values API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API) 为CSS扩展属性，类似`CSS variables`。\n- [x] #69，[CSS Typed Object Model API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API) 提供了一系列访问和操作CSS值的方法。\n- [x] #71，[CSSOM](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model) 管理CSS的方法合集，类似DOM。\n- [ ] [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) 画图。  \n- [ ] [Channel Messaging API](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API) 又一种跨窗口通信。\n- [x] #72，[Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) 访问、写入系统剪切板。\n- [ ] [Compression Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API) 使用`gzip`、`deflate`压缩数据流。 \n- [ ] [Console API](https://developer.mozilla.org/en-US/docs/Web/API/Console_API) 控制台日志输出。\n- [ ] [Contact Picker API](https://developer.mozilla.org/en-US/docs/Web/API/Contact_Picker_API) 选择设备上的联系人。*Experimental*\n- [ ] [Content Index API](https://developer.mozilla.org/en-US/docs/Web/API/Content_Index_API) 设置`service worker`的离线数据。*Experimental*\n- [x] #75，[Cookie Store API](https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API) 优雅的管理cookie。\n- [x] #77，[Credential Management API](https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API) 管理登录凭证。\n\n### D\n\n- [x] #80，[DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) 元素操作的方法合集。\n- [x] #79，[Device Memory API](https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API) 访问设备可用内存大小。\n- [x] #81，[Device Orientation Events](https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events) 访问设备的物理方向。\n- [x] #82，[Document Picture-in-Picture API](https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API) 画中画。*experimental*\n\n### E\n\n- [ ] [EditContext API](https://developer.mozilla.org/en-US/docs/Web/API/EditContext_API) 富文本交互 *Experimental*\n- [ ] [Encoding API](https://developer.mozilla.org/en-US/docs/Web/API/Encoding_API) 字符编码解码\n- [ ] [Encrypted Media Extensions](https://developer.mozilla.org/en-US/docs/Web/API/Encrypted_Media_Extensions_API) 支持数字版权内容\n- [x] #84，[EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) 颜色吸管 *Experimental*\n\n### F\n\n- [ ] [FedCM API](https://developer.mozilla.org/en-US/docs/Web/API/FedCM_API) *Experimental*\n- [ ] [Fenced Frame API](https://developer.mozilla.org/en-US/docs/Web/API/Fenced_frame_API) *Experimental*\n- [ ] [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 发起网络请求，代替XMLHttpRequest\n- [x] #85，[File API](https://developer.mozilla.org/en-US/docs/Web/API/File_API) 访问用户选择的文件\n- [x] #86，[File System API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) 访问、写入操作系统上的文件\n- [ ] [File and Directory Entries API](https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API) 虚拟文件系统\n- [ ] [Force Touch Events](https://developer.mozilla.org/en-US/docs/Web/API/Force_Touch_events) Non-standard\n- [x] #87，[Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) 元素全屏\n\n### G\n\n- [ ] [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API) 访问手柄设备\n- [x] #88，[Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)  访问地理位置\n- [ ] [Geometry Interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Geometry_interfaces) 几何形状\n<!--hexo-->\n\n### H\n- [ ] [HTML DOM](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) DOM操作，包括form data、canvas、video等\n- [x] #91 ，[HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) 拖放\n- [ ] [HTML Sanitizer API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API) 安全的HTML字符串 *Experimental*\n- [ ] [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) 浏览器会话记录\n- [ ] [Houdini API](https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs) 扩展CSS的样式和布局\n\n### I\n- [ ] [Idle Detection API](https://developer.mozilla.org/en-US/docs/Web/API/Idle_Detection_API) *Experimental*\n- [ ] [Image Capture API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API) 拍照，调用设备捕获图像 *Experimental*\n- [ ] [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) 客户端数据库\n- [ ] [Ink API](https://developer.mozilla.org/en-US/docs/Web/API/Ink_API) 调用系统的笔触合成功能 *Experimental*\n- [ ] [Input Device Capabilities API](https://developer.mozilla.org/en-US/docs/Web/API/InputDeviceCapabilities_API) *Experimental*\n- [ ] [Insertable Streams for MediaStreamTrack API](https://developer.mozilla.org/en-US/docs/Web/API/Insertable_Streams_for_MediaStreamTrack_API) 操作媒体流，比如合成音频、往视频里加一个帽子\n- [x] #92，[Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) 监听元素是否出现在视口\n\n### K\n- [ ] [Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API) 访问物理键盘的信息、如布局等 *Experimental*\n\n### L\n- [ ] [Launch Handler API](https://developer.mozilla.org/en-US/docs/Web/API/Launch_Handler_API) 获取PWA的启动方式 *Experimental*\n- [ ] [Local Font Access API](https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API) 访问用户本地安装的字体列表 *Experimental*\n\n### M\n- [ ] [Media Capabilities API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API) 获取设备的解码、编码能力，以及实时反馈\n- [ ] [Media Capture and Streams](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API) 媒体捕捉和媒体流\n- [ ] [Media Session API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API) 获取设备对媒体的控制\n- [ ] [Media Source Extensions](https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API) 创建媒体流 *Experimental*\n- [ ] [MediaStream Recording](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API) 录制媒体流\n\n### N\n- [ ] [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API) 对`History`和`Location`的扩展，可以拦截管理浏览器导航 *Experimental*\n- [ ] [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) 访问网络连接信息 *Experimental*\n<!--hexo-->\n\nO-T\n<!--hexo-->\n\nU-Z\n\n","source":"_posts/web-api-readme.md","raw":"---\ntitle: \"Web API 实践，最后更新2024/02月...\"\ndate: \"2024-02-28T08:10:53Z\"\ncategories:\n  - [Web API]\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\n<!--hexo-->\n### A\n\n- [ ] [Audio Output Devices API](https://developer.mozilla.org/en-US/docs/Web/API/Audio_Output_Devices_API) 选择音频播放设备。*Experimental*\n\n### B\n\n- [ ] [Background Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Background_Fetch_API) 在后台下载大文件。*Experimental*\n- [ ] [Background Sync](https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API) 延迟任务以便在网络稳定时运行。*Experimental*\n- [x] #55，[Background Tasks](https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API) 利用空闲时间跑阻塞的任务。\n- [x] #50，[Badging API](https://developer.mozilla.org/en-US/docs/Web/API/Badging_API) 在web App中设置图标徽章。\n- [ ] [Barcode Detection API](https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API)，读取图片流中的条码、二维码。*Experimental*\n- [x] #58，[Battery API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API) 获取设备电池状态。\n- [x] #53，[Beacon](https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API) 发送无需响应的请求，保证浏览器关闭之前发送完毕。\n- [ ] [Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API) 连接蓝牙。*Experimental*\n- [x] #59，[Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API) 跨标签、窗口通信。\n\n### C\n\n- [ ] [CSS Counter Styles](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Counter_Styles) 为CSS定义计数器。\n- [x] #63，[CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API) 设置元素的高亮区域。\n- [x] #65，[CSS Font Loading API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API) 字体加载管理。\n- [ ] [CSS Painting API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API) 为CSS的背景等属性提供自定义的图片绘制。*Experimental*\n- [x] #67，[CSS Properties and Values API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API) 为CSS扩展属性，类似`CSS variables`。\n- [x] #69，[CSS Typed Object Model API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API) 提供了一系列访问和操作CSS值的方法。\n- [x] #71，[CSSOM](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model) 管理CSS的方法合集，类似DOM。\n- [ ] [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) 画图。  \n- [ ] [Channel Messaging API](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API) 又一种跨窗口通信。\n- [x] #72，[Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) 访问、写入系统剪切板。\n- [ ] [Compression Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API) 使用`gzip`、`deflate`压缩数据流。 \n- [ ] [Console API](https://developer.mozilla.org/en-US/docs/Web/API/Console_API) 控制台日志输出。\n- [ ] [Contact Picker API](https://developer.mozilla.org/en-US/docs/Web/API/Contact_Picker_API) 选择设备上的联系人。*Experimental*\n- [ ] [Content Index API](https://developer.mozilla.org/en-US/docs/Web/API/Content_Index_API) 设置`service worker`的离线数据。*Experimental*\n- [x] #75，[Cookie Store API](https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API) 优雅的管理cookie。\n- [x] #77，[Credential Management API](https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API) 管理登录凭证。\n\n### D\n\n- [x] #80，[DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) 元素操作的方法合集。\n- [x] #79，[Device Memory API](https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API) 访问设备可用内存大小。\n- [x] #81，[Device Orientation Events](https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events) 访问设备的物理方向。\n- [x] #82，[Document Picture-in-Picture API](https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API) 画中画。*experimental*\n\n### E\n\n- [ ] [EditContext API](https://developer.mozilla.org/en-US/docs/Web/API/EditContext_API) 富文本交互 *Experimental*\n- [ ] [Encoding API](https://developer.mozilla.org/en-US/docs/Web/API/Encoding_API) 字符编码解码\n- [ ] [Encrypted Media Extensions](https://developer.mozilla.org/en-US/docs/Web/API/Encrypted_Media_Extensions_API) 支持数字版权内容\n- [x] #84，[EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) 颜色吸管 *Experimental*\n\n### F\n\n- [ ] [FedCM API](https://developer.mozilla.org/en-US/docs/Web/API/FedCM_API) *Experimental*\n- [ ] [Fenced Frame API](https://developer.mozilla.org/en-US/docs/Web/API/Fenced_frame_API) *Experimental*\n- [ ] [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 发起网络请求，代替XMLHttpRequest\n- [x] #85，[File API](https://developer.mozilla.org/en-US/docs/Web/API/File_API) 访问用户选择的文件\n- [x] #86，[File System API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) 访问、写入操作系统上的文件\n- [ ] [File and Directory Entries API](https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API) 虚拟文件系统\n- [ ] [Force Touch Events](https://developer.mozilla.org/en-US/docs/Web/API/Force_Touch_events) Non-standard\n- [x] #87，[Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) 元素全屏\n\n### G\n\n- [ ] [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API) 访问手柄设备\n- [x] #88，[Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)  访问地理位置\n- [ ] [Geometry Interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Geometry_interfaces) 几何形状\n<!--hexo-->\n\n### H\n- [ ] [HTML DOM](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) DOM操作，包括form data、canvas、video等\n- [x] #91 ，[HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) 拖放\n- [ ] [HTML Sanitizer API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API) 安全的HTML字符串 *Experimental*\n- [ ] [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) 浏览器会话记录\n- [ ] [Houdini API](https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs) 扩展CSS的样式和布局\n\n### I\n- [ ] [Idle Detection API](https://developer.mozilla.org/en-US/docs/Web/API/Idle_Detection_API) *Experimental*\n- [ ] [Image Capture API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API) 拍照，调用设备捕获图像 *Experimental*\n- [ ] [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) 客户端数据库\n- [ ] [Ink API](https://developer.mozilla.org/en-US/docs/Web/API/Ink_API) 调用系统的笔触合成功能 *Experimental*\n- [ ] [Input Device Capabilities API](https://developer.mozilla.org/en-US/docs/Web/API/InputDeviceCapabilities_API) *Experimental*\n- [ ] [Insertable Streams for MediaStreamTrack API](https://developer.mozilla.org/en-US/docs/Web/API/Insertable_Streams_for_MediaStreamTrack_API) 操作媒体流，比如合成音频、往视频里加一个帽子\n- [x] #92，[Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) 监听元素是否出现在视口\n\n### K\n- [ ] [Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API) 访问物理键盘的信息、如布局等 *Experimental*\n\n### L\n- [ ] [Launch Handler API](https://developer.mozilla.org/en-US/docs/Web/API/Launch_Handler_API) 获取PWA的启动方式 *Experimental*\n- [ ] [Local Font Access API](https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API) 访问用户本地安装的字体列表 *Experimental*\n\n### M\n- [ ] [Media Capabilities API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API) 获取设备的解码、编码能力，以及实时反馈\n- [ ] [Media Capture and Streams](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API) 媒体捕捉和媒体流\n- [ ] [Media Session API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API) 获取设备对媒体的控制\n- [ ] [Media Source Extensions](https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API) 创建媒体流 *Experimental*\n- [ ] [MediaStream Recording](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API) 录制媒体流\n\n### N\n- [ ] [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API) 对`History`和`Location`的扩展，可以拦截管理浏览器导航 *Experimental*\n- [ ] [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) 访问网络连接信息 *Experimental*\n<!--hexo-->\n\nO-T\n<!--hexo-->\n\nU-Z\n\n","slug":"web-api-readme","published":1,"updated":"2024-03-21T07:57:46.944Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp9c0047hbp021rlh6in","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><!--hexo-->\n<h3 id=\"A\"><a href=\"#A\" class=\"headerlink\" title=\"A\"></a>A</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Audio_Output_Devices_API\">Audio Output Devices API</a> 选择音频播放设备。<em>Experimental</em></li>\n</ul>\n<h3 id=\"B\"><a href=\"#B\" class=\"headerlink\" title=\"B\"></a>B</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Fetch_API\">Background Fetch API</a> 在后台下载大文件。<em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API\">Background Sync</a> 延迟任务以便在网络稳定时运行。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #55，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API\">Background Tasks</a> 利用空闲时间跑阻塞的任务。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #50，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Badging_API\">Badging API</a> 在web App中设置图标徽章。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API\">Barcode Detection API</a>，读取图片流中的条码、二维码。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #58，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API\">Battery API</a> 获取设备电池状态。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #53，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API\">Beacon</a> 发送无需响应的请求，保证浏览器关闭之前发送完毕。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API\">Bluetooth API</a> 连接蓝牙。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #59，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API\">Broadcast Channel API</a> 跨标签、窗口通信。</li>\n</ul>\n<h3 id=\"C\"><a href=\"#C\" class=\"headerlink\" title=\"C\"></a>C</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Counter_Styles\">CSS Counter Styles</a> 为CSS定义计数器。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #63，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API\">CSS Custom Highlight API</a> 设置元素的高亮区域。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #65，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API\">CSS Font Loading API</a> 字体加载管理。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API\">CSS Painting API</a> 为CSS的背景等属性提供自定义的图片绘制。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #67，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API\">CSS Properties and Values API</a> 为CSS扩展属性，类似<code>CSS variables</code>。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #69，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API\">CSS Typed Object Model API</a> 提供了一系列访问和操作CSS值的方法。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #71，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model\">CSSOM</a> 管理CSS的方法合集，类似DOM。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API\">Canvas API</a> 画图。  </li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API\">Channel Messaging API</a> 又一种跨窗口通信。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #72，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API\">Clipboard API</a> 访问、写入系统剪切板。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API\">Compression Streams API</a> 使用<code>gzip</code>、<code>deflate</code>压缩数据流。 </li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Console_API\">Console API</a> 控制台日志输出。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Contact_Picker_API\">Contact Picker API</a> 选择设备上的联系人。<em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Content_Index_API\">Content Index API</a> 设置<code>service worker</code>的离线数据。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #75，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\">Cookie Store API</a> 优雅的管理cookie。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #77，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API\">Credential Management API</a> 管理登录凭证。</li>\n</ul>\n<h3 id=\"D\"><a href=\"#D\" class=\"headerlink\" title=\"D\"></a>D</h3><ul>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #80，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\">DOM</a> 元素操作的方法合集。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #79，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API\">Device Memory API</a> 访问设备可用内存大小。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #81，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events\">Device Orientation Events</a> 访问设备的物理方向。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #82，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API\">Document Picture-in-Picture API</a> 画中画。<em>experimental</em></li>\n</ul>\n<h3 id=\"E\"><a href=\"#E\" class=\"headerlink\" title=\"E\"></a>E</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/EditContext_API\">EditContext API</a> 富文本交互 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Encoding_API\">Encoding API</a> 字符编码解码</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Encrypted_Media_Extensions_API\">Encrypted Media Extensions</a> 支持数字版权内容</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #84，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API\">EyeDropper API</a> 颜色吸管 <em>Experimental</em></li>\n</ul>\n<h3 id=\"F\"><a href=\"#F\" class=\"headerlink\" title=\"F\"></a>F</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/FedCM_API\">FedCM API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fenced_frame_API\">Fenced Frame API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\">Fetch API</a> 发起网络请求，代替XMLHttpRequest</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #85，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_API\">File API</a> 访问用户选择的文件</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #86，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_System_API\">File System API</a> 访问、写入操作系统上的文件</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API\">File and Directory Entries API</a> 虚拟文件系统</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Force_Touch_events\">Force Touch Events</a> Non-standard</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #87，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API\">Fullscreen API</a> 元素全屏</li>\n</ul>\n<h3 id=\"G\"><a href=\"#G\" class=\"headerlink\" title=\"G\"></a>G</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API\">Gamepad API</a> 访问手柄设备</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #88，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API\">Geolocation API</a>  访问地理位置</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Geometry_interfaces\">Geometry Interfaces</a> 几何形状<!--hexo--></li>\n</ul>\n<h3 id=\"H\"><a href=\"#H\" class=\"headerlink\" title=\"H\"></a>H</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API\">HTML DOM</a> DOM操作，包括form data、canvas、video等</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #91 ，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API\">HTML Drag and Drop API</a> 拖放</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API\">HTML Sanitizer API</a> 安全的HTML字符串 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/History_API\">History API</a> 浏览器会话记录</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs\">Houdini API</a> 扩展CSS的样式和布局</li>\n</ul>\n<h3 id=\"I\"><a href=\"#I\" class=\"headerlink\" title=\"I\"></a>I</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Idle_Detection_API\">Idle Detection API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API\">Image Capture API</a> 拍照，调用设备捕获图像 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API\">IndexedDB</a> 客户端数据库</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Ink_API\">Ink API</a> 调用系统的笔触合成功能 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/InputDeviceCapabilities_API\">Input Device Capabilities API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Insertable_Streams_for_MediaStreamTrack_API\">Insertable Streams for MediaStreamTrack API</a> 操作媒体流，比如合成音频、往视频里加一个帽子</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #92，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\">Intersection Observer API</a> 监听元素是否出现在视口</li>\n</ul>\n<h3 id=\"K\"><a href=\"#K\" class=\"headerlink\" title=\"K\"></a>K</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API\">Keyboard API</a> 访问物理键盘的信息、如布局等 <em>Experimental</em></li>\n</ul>\n<h3 id=\"L\"><a href=\"#L\" class=\"headerlink\" title=\"L\"></a>L</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Launch_Handler_API\">Launch Handler API</a> 获取PWA的启动方式 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API\">Local Font Access API</a> 访问用户本地安装的字体列表 <em>Experimental</em></li>\n</ul>\n<h3 id=\"M\"><a href=\"#M\" class=\"headerlink\" title=\"M\"></a>M</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API\">Media Capabilities API</a> 获取设备的解码、编码能力，以及实时反馈</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API\">Media Capture and Streams</a> 媒体捕捉和媒体流</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API\">Media Session API</a> 获取设备对媒体的控制</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API\">Media Source Extensions</a> 创建媒体流 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API\">MediaStream Recording</a> 录制媒体流</li>\n</ul>\n<h3 id=\"N\"><a href=\"#N\" class=\"headerlink\" title=\"N\"></a>N</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API\">Navigation API</a> 对<code>History</code>和<code>Location</code>的扩展，可以拦截管理浏览器导航 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API\">Network Information API</a> 访问网络连接信息 <em>Experimental</em><!--hexo--></li>\n</ul>\n<p>O-T</p>\n<!--hexo-->\n\n<p>U-Z</p>\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><!--hexo-->\n<h3 id=\"A\"><a href=\"#A\" class=\"headerlink\" title=\"A\"></a>A</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Audio_Output_Devices_API\">Audio Output Devices API</a> 选择音频播放设备。<em>Experimental</em></li>\n</ul>\n<h3 id=\"B\"><a href=\"#B\" class=\"headerlink\" title=\"B\"></a>B</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Fetch_API\">Background Fetch API</a> 在后台下载大文件。<em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API\">Background Sync</a> 延迟任务以便在网络稳定时运行。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #55，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API\">Background Tasks</a> 利用空闲时间跑阻塞的任务。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #50，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Badging_API\">Badging API</a> 在web App中设置图标徽章。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API\">Barcode Detection API</a>，读取图片流中的条码、二维码。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #58，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API\">Battery API</a> 获取设备电池状态。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #53，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API\">Beacon</a> 发送无需响应的请求，保证浏览器关闭之前发送完毕。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API\">Bluetooth API</a> 连接蓝牙。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #59，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API\">Broadcast Channel API</a> 跨标签、窗口通信。</li>\n</ul>\n<h3 id=\"C\"><a href=\"#C\" class=\"headerlink\" title=\"C\"></a>C</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Counter_Styles\">CSS Counter Styles</a> 为CSS定义计数器。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #63，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API\">CSS Custom Highlight API</a> 设置元素的高亮区域。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #65，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API\">CSS Font Loading API</a> 字体加载管理。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API\">CSS Painting API</a> 为CSS的背景等属性提供自定义的图片绘制。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #67，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API\">CSS Properties and Values API</a> 为CSS扩展属性，类似<code>CSS variables</code>。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #69，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API\">CSS Typed Object Model API</a> 提供了一系列访问和操作CSS值的方法。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #71，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model\">CSSOM</a> 管理CSS的方法合集，类似DOM。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API\">Canvas API</a> 画图。  </li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API\">Channel Messaging API</a> 又一种跨窗口通信。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #72，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API\">Clipboard API</a> 访问、写入系统剪切板。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API\">Compression Streams API</a> 使用<code>gzip</code>、<code>deflate</code>压缩数据流。 </li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Console_API\">Console API</a> 控制台日志输出。</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Contact_Picker_API\">Contact Picker API</a> 选择设备上的联系人。<em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Content_Index_API\">Content Index API</a> 设置<code>service worker</code>的离线数据。<em>Experimental</em></li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #75，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API\">Cookie Store API</a> 优雅的管理cookie。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #77，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API\">Credential Management API</a> 管理登录凭证。</li>\n</ul>\n<h3 id=\"D\"><a href=\"#D\" class=\"headerlink\" title=\"D\"></a>D</h3><ul>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #80，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\">DOM</a> 元素操作的方法合集。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #79，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_Memory_API\">Device Memory API</a> 访问设备可用内存大小。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #81，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events\">Device Orientation Events</a> 访问设备的物理方向。</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #82，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API\">Document Picture-in-Picture API</a> 画中画。<em>experimental</em></li>\n</ul>\n<h3 id=\"E\"><a href=\"#E\" class=\"headerlink\" title=\"E\"></a>E</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/EditContext_API\">EditContext API</a> 富文本交互 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Encoding_API\">Encoding API</a> 字符编码解码</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Encrypted_Media_Extensions_API\">Encrypted Media Extensions</a> 支持数字版权内容</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #84，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API\">EyeDropper API</a> 颜色吸管 <em>Experimental</em></li>\n</ul>\n<h3 id=\"F\"><a href=\"#F\" class=\"headerlink\" title=\"F\"></a>F</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/FedCM_API\">FedCM API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fenced_frame_API\">Fenced Frame API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\">Fetch API</a> 发起网络请求，代替XMLHttpRequest</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #85，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_API\">File API</a> 访问用户选择的文件</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #86，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_System_API\">File System API</a> 访问、写入操作系统上的文件</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API\">File and Directory Entries API</a> 虚拟文件系统</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Force_Touch_events\">Force Touch Events</a> Non-standard</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #87，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API\">Fullscreen API</a> 元素全屏</li>\n</ul>\n<h3 id=\"G\"><a href=\"#G\" class=\"headerlink\" title=\"G\"></a>G</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API\">Gamepad API</a> 访问手柄设备</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #88，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API\">Geolocation API</a>  访问地理位置</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Geometry_interfaces\">Geometry Interfaces</a> 几何形状<!--hexo--></li>\n</ul>\n<h3 id=\"H\"><a href=\"#H\" class=\"headerlink\" title=\"H\"></a>H</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API\">HTML DOM</a> DOM操作，包括form data、canvas、video等</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #91 ，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API\">HTML Drag and Drop API</a> 拖放</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API\">HTML Sanitizer API</a> 安全的HTML字符串 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/History_API\">History API</a> 浏览器会话记录</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs\">Houdini API</a> 扩展CSS的样式和布局</li>\n</ul>\n<h3 id=\"I\"><a href=\"#I\" class=\"headerlink\" title=\"I\"></a>I</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Idle_Detection_API\">Idle Detection API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API\">Image Capture API</a> 拍照，调用设备捕获图像 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API\">IndexedDB</a> 客户端数据库</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Ink_API\">Ink API</a> 调用系统的笔触合成功能 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/InputDeviceCapabilities_API\">Input Device Capabilities API</a> <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Insertable_Streams_for_MediaStreamTrack_API\">Insertable Streams for MediaStreamTrack API</a> 操作媒体流，比如合成音频、往视频里加一个帽子</li>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> #92，<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\">Intersection Observer API</a> 监听元素是否出现在视口</li>\n</ul>\n<h3 id=\"K\"><a href=\"#K\" class=\"headerlink\" title=\"K\"></a>K</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API\">Keyboard API</a> 访问物理键盘的信息、如布局等 <em>Experimental</em></li>\n</ul>\n<h3 id=\"L\"><a href=\"#L\" class=\"headerlink\" title=\"L\"></a>L</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Launch_Handler_API\">Launch Handler API</a> 获取PWA的启动方式 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API\">Local Font Access API</a> 访问用户本地安装的字体列表 <em>Experimental</em></li>\n</ul>\n<h3 id=\"M\"><a href=\"#M\" class=\"headerlink\" title=\"M\"></a>M</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Capabilities_API\">Media Capabilities API</a> 获取设备的解码、编码能力，以及实时反馈</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API\">Media Capture and Streams</a> 媒体捕捉和媒体流</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API\">Media Session API</a> 获取设备对媒体的控制</li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API\">Media Source Extensions</a> 创建媒体流 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API\">MediaStream Recording</a> 录制媒体流</li>\n</ul>\n<h3 id=\"N\"><a href=\"#N\" class=\"headerlink\" title=\"N\"></a>N</h3><ul>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API\">Navigation API</a> 对<code>History</code>和<code>Location</code>的扩展，可以拦截管理浏览器导航 <em>Experimental</em></li>\n<li><input disabled=\"\" type=\"checkbox\"> <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API\">Network Information API</a> 访问网络连接信息 <em>Experimental</em><!--hexo--></li>\n</ul>\n<p>O-T</p>\n<!--hexo-->\n\n<p>U-Z</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-21T07:57:40.912Z","comments":1,"layout":"post","photos":[],"link":"","_id":"clu0xwp9d004ahbp00hy62ipe","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":"clu0xwp850005hbp0cdbu2tbf","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp8a000ehbp0fhik0of5"},{"post_id":"clu0xwp860006hbp00ltyg8xq","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp8b000hhbp0f3kfax82"},{"post_id":"clu0xwp7x0000hbp02z6q2wyu","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp8d000lhbp010f872ep"},{"post_id":"clu0xwp7x0000hbp02z6q2wyu","category_id":"clu0xwp870008hbp03h4efjo9","_id":"clu0xwp8e000ohbp0dkko19yb"},{"post_id":"clu0xwp870009hbp0bj9mhog6","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp8f000rhbp08d360307"},{"post_id":"clu0xwp810001hbp03lau8pzf","category_id":"clu0xwp870008hbp03h4efjo9","_id":"clu0xwp8g000thbp08h2s0wat"},{"post_id":"clu0xwp88000ahbp0cmcdb3mc","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp8h000vhbp05p8chx7s"},{"post_id":"clu0xwp8a000dhbp0ascm0046","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp8i000zhbp0alot06je"},{"post_id":"clu0xwp840003hbp02wrm7u8x","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp8j0012hbp0dss1d83b"},{"post_id":"clu0xwp8b000ghbp0hq5696cx","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp8k0015hbp0dlxt8ea8"},{"post_id":"clu0xwp8c000khbp0hrxba4aq","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp8k0017hbp06npga59y"},{"post_id":"clu0xwp8e000nhbp04tpee4kb","category_id":"clu0xwp870008hbp03h4efjo9","_id":"clu0xwp8l001bhbp02edk6iqy"},{"post_id":"clu0xwp8f000qhbp09usecwpi","category_id":"clu0xwp870008hbp03h4efjo9","_id":"clu0xwp8m001ehbp0fot1dd4p"},{"post_id":"clu0xwp8g000shbp0als5b3t7","category_id":"clu0xwp870008hbp03h4efjo9","_id":"clu0xwp8n001ihbp0djyx9a8g"},{"post_id":"clu0xwp8h000uhbp0er9wbl4m","category_id":"clu0xwp870008hbp03h4efjo9","_id":"clu0xwp8o001khbp0g5q684rb"},{"post_id":"clu0xwp8i000yhbp06q87ht8i","category_id":"clu0xwp870008hbp03h4efjo9","_id":"clu0xwp8o001ohbp0hmmf50pf"},{"post_id":"clu0xwp8j0011hbp0e1laa2sj","category_id":"clu0xwp870008hbp03h4efjo9","_id":"clu0xwp8q001shbp06m0gfju6"},{"post_id":"clu0xwp8k0014hbp06gsr9332","category_id":"clu0xwp870008hbp03h4efjo9","_id":"clu0xwp8r001vhbp04eddbavn"},{"post_id":"clu0xwp8k0016hbp00y2v0ksh","category_id":"clu0xwp870008hbp03h4efjo9","_id":"clu0xwp8s001yhbp02bsv9zg7"},{"post_id":"clu0xwp8n001jhbp0d3xceq20","category_id":"clu0xwp8n001hhbp0ajtc0mco","_id":"clu0xwp8t0022hbp0aoaq7kvq"},{"post_id":"clu0xwp8l001ahbp0dkm982o1","category_id":"clu0xwp8n001hhbp0ajtc0mco","_id":"clu0xwp8u0026hbp07boohri5"},{"post_id":"clu0xwp8o001nhbp0h6980jgb","category_id":"clu0xwp870008hbp03h4efjo9","_id":"clu0xwp8v0029hbp07g8y5dz9"},{"post_id":"clu0xwp8m001dhbp09hq2gncb","category_id":"clu0xwp8n001hhbp0ajtc0mco","_id":"clu0xwp8w002chbp013k1feov"},{"post_id":"clu0xwp8s001xhbp0c2oo3o4e","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp8z002ghbp038a69ktk"},{"post_id":"clu0xwp8m001ghbp0g1er7r9h","category_id":"clu0xwp8n001hhbp0ajtc0mco","_id":"clu0xwp8z002jhbp08tkn9k6v"},{"post_id":"clu0xwp8t0021hbp06gq7h96w","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp90002mhbp0a6wn4xf9"},{"post_id":"clu0xwp8u0025hbp098bh3eqw","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp91002ohbp0fuv3f05c"},{"post_id":"clu0xwp8p001rhbp0hvpp3be4","category_id":"clu0xwp8t0023hbp0av7yc0g9","_id":"clu0xwp92002shbp092oqgt8d"},{"post_id":"clu0xwp8u0028hbp04ma81752","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp92002vhbp0cjnm6pe5"},{"post_id":"clu0xwp8v002bhbp00ass5g9r","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp93002yhbp03j47a6pl"},{"post_id":"clu0xwp8q001uhbp08h06bbmh","category_id":"clu0xwp8t0023hbp0av7yc0g9","_id":"clu0xwp940030hbp03t5qe3nr"},{"post_id":"clu0xwp8y002fhbp0er3h94xj","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp950034hbp0020gdpg5"},{"post_id":"clu0xwp8z002ihbp04dsqepp4","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp960037hbp08ffz1fq6"},{"post_id":"clu0xwp90002lhbp03nsz0wme","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp96003chbp01gq4693b"},{"post_id":"clu0xwp91002nhbp0g0evfovn","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp97003fhbp04j8d0ru9"},{"post_id":"clu0xwp92002rhbp0245ig2me","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp98003ihbp0hnbf3hsy"},{"post_id":"clu0xwp92002uhbp078vbd12m","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp98003mhbp0fiu6gt71"},{"post_id":"clu0xwp93002xhbp07hxsfvha","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp99003phbp082tg9pu6"},{"post_id":"clu0xwp93002zhbp079t29lgi","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp9a003thbp0doyv1h0m"},{"post_id":"clu0xwp97003ehbp00bg5bhj3","category_id":"clu0xwp96003bhbp0ftma8opt","_id":"clu0xwp9a003whbp01ml7dv4c"},{"post_id":"clu0xwp940033hbp01rw492lu","category_id":"clu0xwp96003bhbp0ftma8opt","_id":"clu0xwp9b003zhbp053u935sp"},{"post_id":"clu0xwp97003hhbp0914507lz","category_id":"clu0xwp96003bhbp0ftma8opt","_id":"clu0xwp9b0042hbp0c0yi4txx"},{"post_id":"clu0xwp98003lhbp0faae32b3","category_id":"clu0xwp96003bhbp0ftma8opt","_id":"clu0xwp9c0045hbp06293bd2e"},{"post_id":"clu0xwp950036hbp07p0iakhg","category_id":"clu0xwp96003bhbp0ftma8opt","_id":"clu0xwp9d0048hbp0fcm89zjq"},{"post_id":"clu0xwp99003ohbp0ayyjaog0","category_id":"clu0xwp96003bhbp0ftma8opt","_id":"clu0xwp9d004bhbp0740w425s"},{"post_id":"clu0xwp99003shbp0hqko2tq9","category_id":"clu0xwp96003bhbp0ftma8opt","_id":"clu0xwp9d004ehbp0d3s31cuc"},{"post_id":"clu0xwp96003ahbp07nrzgwn9","category_id":"clu0xwp96003bhbp0ftma8opt","_id":"clu0xwp9d004ghbp0fvfsayn3"},{"post_id":"clu0xwp9a003vhbp04dpeg9ve","category_id":"clu0xwp96003bhbp0ftma8opt","_id":"clu0xwp9e004jhbp08hkca9io"},{"post_id":"clu0xwp9b003yhbp080ab4o4p","category_id":"clu0xwp96003bhbp0ftma8opt","_id":"clu0xwp9e004lhbp09f7qfi4f"},{"post_id":"clu0xwp9b0041hbp00lxd5iso","category_id":"clu0xwp96003bhbp0ftma8opt","_id":"clu0xwp9e004nhbp0ekwf4p7x"},{"post_id":"clu0xwp9c0044hbp059ht0chz","category_id":"clu0xwp840004hbp00n411ca0","_id":"clu0xwp9e004phbp046s91uv7"},{"post_id":"clu0xwp9c0047hbp021rlh6in","category_id":"clu0xwp96003bhbp0ftma8opt","_id":"clu0xwp9f004rhbp0fpewhsvp"},{"post_id":"clu0xwp9d004ahbp00hy62ipe","category_id":"clu0xwp8n001hhbp0ajtc0mco","_id":"clu0xwp9f004thbp0evkc8wxz"}],"PostTag":[{"post_id":"clu0xwp7x0000hbp02z6q2wyu","tag_id":"clu0xwp830002hbp0gv0hcsl5","_id":"clu0xwp8a000fhbp02jkk9k39"},{"post_id":"clu0xwp7x0000hbp02z6q2wyu","tag_id":"clu0xwp860007hbp0gl51c3nt","_id":"clu0xwp8b000ihbp048csf8ao"},{"post_id":"clu0xwp810001hbp03lau8pzf","tag_id":"clu0xwp88000bhbp04cii0s75","_id":"clu0xwp8d000mhbp0ecr7aexi"},{"post_id":"clu0xwp840003hbp02wrm7u8x","tag_id":"clu0xwp8c000jhbp0gxg93a8u","_id":"clu0xwp8i000xhbp0g19w1i8h"},{"post_id":"clu0xwp840003hbp02wrm7u8x","tag_id":"clu0xwp8f000phbp0305n7oo5","_id":"clu0xwp8j0010hbp0fdci2izx"},{"post_id":"clu0xwp850005hbp0cdbu2tbf","tag_id":"clu0xwp8c000jhbp0gxg93a8u","_id":"clu0xwp8l0019hbp04aloal1q"},{"post_id":"clu0xwp850005hbp0cdbu2tbf","tag_id":"clu0xwp8f000phbp0305n7oo5","_id":"clu0xwp8m001chbp0hui18kwr"},{"post_id":"clu0xwp860006hbp00ltyg8xq","tag_id":"clu0xwp8c000jhbp0gxg93a8u","_id":"clu0xwp8o001mhbp00apve9w3"},{"post_id":"clu0xwp860006hbp00ltyg8xq","tag_id":"clu0xwp8f000phbp0305n7oo5","_id":"clu0xwp8p001qhbp096hm3ajf"},{"post_id":"clu0xwp870009hbp0bj9mhog6","tag_id":"clu0xwp8c000jhbp0gxg93a8u","_id":"clu0xwp8t0020hbp02rryhjq9"},{"post_id":"clu0xwp870009hbp0bj9mhog6","tag_id":"clu0xwp8f000phbp0305n7oo5","_id":"clu0xwp8u0024hbp020y0f0zj"},{"post_id":"clu0xwp88000ahbp0cmcdb3mc","tag_id":"clu0xwp8c000jhbp0gxg93a8u","_id":"clu0xwp8y002ehbp0ee162sx6"},{"post_id":"clu0xwp88000ahbp0cmcdb3mc","tag_id":"clu0xwp8f000phbp0305n7oo5","_id":"clu0xwp8z002hhbp05a95gdai"},{"post_id":"clu0xwp8a000dhbp0ascm0046","tag_id":"clu0xwp8c000jhbp0gxg93a8u","_id":"clu0xwp92002qhbp097wa5tbx"},{"post_id":"clu0xwp8a000dhbp0ascm0046","tag_id":"clu0xwp8f000phbp0305n7oo5","_id":"clu0xwp92002thbp0bx36hu9n"},{"post_id":"clu0xwp8b000ghbp0hq5696cx","tag_id":"clu0xwp8c000jhbp0gxg93a8u","_id":"clu0xwp940032hbp0c8b80hbo"},{"post_id":"clu0xwp8b000ghbp0hq5696cx","tag_id":"clu0xwp8f000phbp0305n7oo5","_id":"clu0xwp950035hbp07s9dgkm2"},{"post_id":"clu0xwp8c000khbp0hrxba4aq","tag_id":"clu0xwp8c000jhbp0gxg93a8u","_id":"clu0xwp960039hbp0637oeavh"},{"post_id":"clu0xwp8c000khbp0hrxba4aq","tag_id":"clu0xwp8f000phbp0305n7oo5","_id":"clu0xwp97003dhbp02nd1eunu"},{"post_id":"clu0xwp8e000nhbp04tpee4kb","tag_id":"clu0xwp960038hbp0bkui9twi","_id":"clu0xwp98003jhbp0br9ua7i8"},{"post_id":"clu0xwp8f000qhbp09usecwpi","tag_id":"clu0xwp960038hbp0bkui9twi","_id":"clu0xwp99003qhbp0e68vcmli"},{"post_id":"clu0xwp8g000shbp0als5b3t7","tag_id":"clu0xwp960038hbp0bkui9twi","_id":"clu0xwp9a003xhbp00twxgae5"},{"post_id":"clu0xwp8h000uhbp0er9wbl4m","tag_id":"clu0xwp960038hbp0bkui9twi","_id":"clu0xwp9b0043hbp0dxlx8fvv"},{"post_id":"clu0xwp8i000yhbp06q87ht8i","tag_id":"clu0xwp960038hbp0bkui9twi","_id":"clu0xwp9d0049hbp097ggb1z9"},{"post_id":"clu0xwp9c0044hbp059ht0chz","tag_id":"clu0xwp8c000jhbp0gxg93a8u","_id":"clu0xwp9d004chbp0d3w4e4th"},{"post_id":"clu0xwp9c0044hbp059ht0chz","tag_id":"clu0xwp8f000phbp0305n7oo5","_id":"clu0xwp9d004fhbp09bqp1nv1"},{"post_id":"clu0xwp8j0011hbp0e1laa2sj","tag_id":"clu0xwp960038hbp0bkui9twi","_id":"clu0xwp9e004hhbp07ovwdaru"},{"post_id":"clu0xwp8k0014hbp06gsr9332","tag_id":"clu0xwp960038hbp0bkui9twi","_id":"clu0xwp9e004khbp0ex2u5a8e"},{"post_id":"clu0xwp8k0016hbp00y2v0ksh","tag_id":"clu0xwp960038hbp0bkui9twi","_id":"clu0xwp9e004ohbp01usk00ld"},{"post_id":"clu0xwp8l001ahbp0dkm982o1","tag_id":"clu0xwp9e004mhbp0h35re37z","_id":"clu0xwp9f004shbp07m793y0j"},{"post_id":"clu0xwp8m001dhbp09hq2gncb","tag_id":"clu0xwp9e004mhbp0h35re37z","_id":"clu0xwp9f004vhbp098g1fl77"},{"post_id":"clu0xwp8m001ghbp0g1er7r9h","tag_id":"clu0xwp9e004mhbp0h35re37z","_id":"clu0xwp9f004xhbp04a5lcg24"},{"post_id":"clu0xwp8n001jhbp0d3xceq20","tag_id":"clu0xwp9f004whbp0fi7fe7h2","_id":"clu0xwp9g0050hbp09626gwme"},{"post_id":"clu0xwp8n001jhbp0d3xceq20","tag_id":"clu0xwp9g004yhbp05ueo2t6a","_id":"clu0xwp9g0051hbp003x9a5zr"},{"post_id":"clu0xwp8o001nhbp0h6980jgb","tag_id":"clu0xwp9g004zhbp04nmt76qa","_id":"clu0xwp9g0053hbp0er5shilh"},{"post_id":"clu0xwp8p001rhbp0hvpp3be4","tag_id":"clu0xwp9g0052hbp05i1z7b95","_id":"clu0xwp9h0055hbp08q6jbf4o"},{"post_id":"clu0xwp8q001uhbp08h06bbmh","tag_id":"clu0xwp9g0052hbp05i1z7b95","_id":"clu0xwp9h0057hbp0c7mz6mgt"},{"post_id":"clu0xwp8s001xhbp0c2oo3o4e","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9h005ahbp04rjyd1zq"},{"post_id":"clu0xwp8s001xhbp0c2oo3o4e","tag_id":"clu0xwp9h0058hbp03uacg77f","_id":"clu0xwp9h005bhbp0dhyb7f2j"},{"post_id":"clu0xwp8t0021hbp06gq7h96w","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9i005ehbp0243m549x"},{"post_id":"clu0xwp8t0021hbp06gq7h96w","tag_id":"clu0xwp9h005chbp02fir4fq8","_id":"clu0xwp9i005fhbp01arr87vf"},{"post_id":"clu0xwp8u0025hbp098bh3eqw","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9i005ihbp0am7xg91x"},{"post_id":"clu0xwp8u0025hbp098bh3eqw","tag_id":"clu0xwp9i005ghbp03wdu35h9","_id":"clu0xwp9i005jhbp0el73aw0c"},{"post_id":"clu0xwp8u0028hbp04ma81752","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9j005mhbp003lwcjrp"},{"post_id":"clu0xwp8u0028hbp04ma81752","tag_id":"clu0xwp9i005khbp0f43db4kd","_id":"clu0xwp9j005nhbp0hjm26kol"},{"post_id":"clu0xwp8v002bhbp00ass5g9r","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9j005qhbp01vhc5rho"},{"post_id":"clu0xwp8v002bhbp00ass5g9r","tag_id":"clu0xwp9j005ohbp04sxmbut4","_id":"clu0xwp9j005rhbp01h0lgyln"},{"post_id":"clu0xwp8y002fhbp0er3h94xj","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9k005uhbp03chvh6r4"},{"post_id":"clu0xwp8y002fhbp0er3h94xj","tag_id":"clu0xwp9j005shbp098yihl75","_id":"clu0xwp9k005vhbp0geai559d"},{"post_id":"clu0xwp8z002ihbp04dsqepp4","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9k005yhbp0c3164clm"},{"post_id":"clu0xwp8z002ihbp04dsqepp4","tag_id":"clu0xwp9k005whbp0fgo9145o","_id":"clu0xwp9k005zhbp0ak8nhoil"},{"post_id":"clu0xwp90002lhbp03nsz0wme","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9k0062hbp0afc37bv0"},{"post_id":"clu0xwp90002lhbp03nsz0wme","tag_id":"clu0xwp9k0060hbp0ham28dv7","_id":"clu0xwp9l0063hbp0bv3vcvoc"},{"post_id":"clu0xwp91002nhbp0g0evfovn","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9l0066hbp08a4b8lo3"},{"post_id":"clu0xwp91002nhbp0g0evfovn","tag_id":"clu0xwp9l0064hbp05sdg4to4","_id":"clu0xwp9l0067hbp0e39hgb4h"},{"post_id":"clu0xwp92002rhbp0245ig2me","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9l006ahbp01b186s4g"},{"post_id":"clu0xwp92002rhbp0245ig2me","tag_id":"clu0xwp9l0068hbp0azq8a4b4","_id":"clu0xwp9l006bhbp0g9es8rgf"},{"post_id":"clu0xwp92002uhbp078vbd12m","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9m006ehbp04qmf70w7"},{"post_id":"clu0xwp92002uhbp078vbd12m","tag_id":"clu0xwp9l006chbp04bro6wxj","_id":"clu0xwp9m006fhbp05pa6f59k"},{"post_id":"clu0xwp93002xhbp07hxsfvha","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9m006ihbp0fi761pms"},{"post_id":"clu0xwp93002xhbp07hxsfvha","tag_id":"clu0xwp9m006ghbp023a6d09h","_id":"clu0xwp9m006jhbp042ndc384"},{"post_id":"clu0xwp93002zhbp079t29lgi","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9n006mhbp03emlde4v"},{"post_id":"clu0xwp93002zhbp079t29lgi","tag_id":"clu0xwp9m006khbp0cpdb0u4n","_id":"clu0xwp9n006nhbp0gk6660ms"},{"post_id":"clu0xwp940033hbp01rw492lu","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9n006qhbp05btm7c1j"},{"post_id":"clu0xwp940033hbp01rw492lu","tag_id":"clu0xwp9n006ohbp00p02cg2w","_id":"clu0xwp9n006rhbp0boza6di0"},{"post_id":"clu0xwp950036hbp07p0iakhg","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9o006uhbp02xorh54r"},{"post_id":"clu0xwp950036hbp07p0iakhg","tag_id":"clu0xwp9n006shbp02gaoeu91","_id":"clu0xwp9o006vhbp05ggj82ds"},{"post_id":"clu0xwp96003ahbp07nrzgwn9","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9o006yhbp06ak2cqs6"},{"post_id":"clu0xwp96003ahbp07nrzgwn9","tag_id":"clu0xwp9o006whbp03mn157qw","_id":"clu0xwp9o006zhbp0cavqd1nu"},{"post_id":"clu0xwp97003ehbp00bg5bhj3","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9p0072hbp05br63k48"},{"post_id":"clu0xwp97003ehbp00bg5bhj3","tag_id":"clu0xwp9o0070hbp04hj33lda","_id":"clu0xwp9p0073hbp07l2l5clm"},{"post_id":"clu0xwp97003hhbp0914507lz","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9p0076hbp023bphi7r"},{"post_id":"clu0xwp97003hhbp0914507lz","tag_id":"clu0xwp9p0074hbp0dxy955ba","_id":"clu0xwp9p0077hbp05jns28ts"},{"post_id":"clu0xwp98003lhbp0faae32b3","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9q007ahbp0br69bhzu"},{"post_id":"clu0xwp98003lhbp0faae32b3","tag_id":"clu0xwp9p0078hbp09rqn9we8","_id":"clu0xwp9q007bhbp0g016fav0"},{"post_id":"clu0xwp99003ohbp0ayyjaog0","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9r007ehbp065o4ao6i"},{"post_id":"clu0xwp99003ohbp0ayyjaog0","tag_id":"clu0xwp9q007chbp0dw0z5zdv","_id":"clu0xwp9r007fhbp026c2g41r"},{"post_id":"clu0xwp99003shbp0hqko2tq9","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9r007ihbp00ltufbvq"},{"post_id":"clu0xwp99003shbp0hqko2tq9","tag_id":"clu0xwp9r007ghbp0dcq8dpna","_id":"clu0xwp9r007jhbp0cir25mxd"},{"post_id":"clu0xwp9a003vhbp04dpeg9ve","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9r007mhbp00ag9h80m"},{"post_id":"clu0xwp9a003vhbp04dpeg9ve","tag_id":"clu0xwp9r007khbp0em3qfrkr","_id":"clu0xwp9r007nhbp09u9f602w"},{"post_id":"clu0xwp9b003yhbp080ab4o4p","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9s007qhbp0653q8i8l"},{"post_id":"clu0xwp9b003yhbp080ab4o4p","tag_id":"clu0xwp9r007ohbp0ekg7442f","_id":"clu0xwp9s007rhbp0350dhl08"},{"post_id":"clu0xwp9b0041hbp00lxd5iso","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9s007uhbp01lyn7stl"},{"post_id":"clu0xwp9b0041hbp00lxd5iso","tag_id":"clu0xwp9s007shbp02xlw124y","_id":"clu0xwp9s007vhbp0611r1zdf"},{"post_id":"clu0xwp9c0047hbp021rlh6in","tag_id":"clu0xwp9h0056hbp01pmpbcfv","_id":"clu0xwp9s007xhbp01c43g8ae"},{"post_id":"clu0xwp9d004ahbp00hy62ipe","tag_id":"clu0xwp9s007whbp01o0qeso1","_id":"clu0xwp9t007yhbp02jbk8omz"}],"Tag":[{"name":"ast","_id":"clu0xwp830002hbp0gv0hcsl5"},{"name":"css module","_id":"clu0xwp860007hbp0gl51c3nt"},{"name":"changesets","_id":"clu0xwp88000bhbp04cii0s75"},{"name":"es6","_id":"clu0xwp8c000jhbp0gxg93a8u"},{"name":"javascript","_id":"clu0xwp8f000phbp0305n7oo5"},{"name":"github actions","_id":"clu0xwp960038hbp0bkui9twi"},{"name":"react","_id":"clu0xwp9e004mhbp0h35re37z"},{"name":"zustand","_id":"clu0xwp9f004whbp0fi7fe7h2"},{"name":"react store","_id":"clu0xwp9g004yhbp05ueo2t6a"},{"name":"jest","_id":"clu0xwp9g004zhbp04nmt76qa"},{"name":"typescript","_id":"clu0xwp9g0052hbp05i1z7b95"},{"name":"webapi","_id":"clu0xwp9h0056hbp01pmpbcfv"},{"name":"Background Tasks","_id":"clu0xwp9h0058hbp03uacg77f"},{"name":"Badging","_id":"clu0xwp9h005chbp02fir4fq8"},{"name":"Battery Status","_id":"clu0xwp9i005ghbp03wdu35h9"},{"name":"Beacon","_id":"clu0xwp9i005khbp0f43db4kd"},{"name":"Broadcast Channel","_id":"clu0xwp9j005ohbp04sxmbut4"},{"name":"CSS Font Loading","_id":"clu0xwp9j005shbp098yihl75"},{"name":"CSS Custom Highlight","_id":"clu0xwp9k005whbp0fgo9145o"},{"name":"CSSOM","_id":"clu0xwp9k0060hbp0ham28dv7"},{"name":"CSS Properties and Values","_id":"clu0xwp9l0064hbp05sdg4to4"},{"name":"Clipboard","_id":"clu0xwp9l0068hbp0azq8a4b4"},{"name":"CSS Typed OM","_id":"clu0xwp9l006chbp04bro6wxj"},{"name":"CookieStore","_id":"clu0xwp9m006ghbp023a6d09h"},{"name":"Credential Management","_id":"clu0xwp9m006khbp0cpdb0u4n"},{"name":"Device Memory","_id":"clu0xwp9n006ohbp00p02cg2w"},{"name":"DOM","_id":"clu0xwp9n006shbp02gaoeu91"},{"name":"Device Orientation","_id":"clu0xwp9o006whbp03mn157qw"},{"name":"Document Picture-in-Picture","_id":"clu0xwp9o0070hbp04hj33lda"},{"name":"File","_id":"clu0xwp9p0074hbp0dxy955ba"},{"name":"EyeDropper","_id":"clu0xwp9p0078hbp09rqn9we8"},{"name":"File System","_id":"clu0xwp9q007chbp0dw0z5zdv"},{"name":"Fullscreen","_id":"clu0xwp9r007ghbp0dcq8dpna"},{"name":"Drag Drop","_id":"clu0xwp9r007khbp0em3qfrkr"},{"name":"Geolocation","_id":"clu0xwp9r007ohbp0ekg7442f"},{"name":"Intersection Observer","_id":"clu0xwp9s007shbp02xlw124y"},{"name":"radix","_id":"clu0xwp9s007whbp01o0qeso1"}]}}
\ No newline at end of file
diff --git a/src/source/_posts/web-api-HTML_Drag_and_Drop_API.md b/src/source/_posts/web-api-HTML_Drag_and_Drop_API.md
new file mode 100644
index 0000000..4f54bbf
--- /dev/null
+++ b/src/source/_posts/web-api-HTML_Drag_and_Drop_API.md
@@ -0,0 +1,142 @@
+---
+title: "Web API - HTML Drag And Drop"
+date: "2024-03-20T08:26:00Z"
+categories:
+  - [Web API]
+
+url: web-api-HTML_Drag_and_Drop_API
+tags:
+  - webapi
+  - Drag Drop
+
+---
+
+
+原文链接：[https://github.com/taoliujun/blog/issues/91](https://github.com/taoliujun/blog/issues/91)
+
+<!--hexo
+
+---
+url: web-api-HTML_Drag_and_Drop_API
+tags:
+  - webapi
+  - Drag Drop
+---
+
+-->
+
+# HTML Drag And Drop
+
+> MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
+
+**HTML Drag And Drop**允许在浏览器中拖放元素。
+
+**为方便描述，假设可拖动的元素为A，可被放置的元素是B。**
+
+## 接口
+
+### DataTransfer
+
+拖放过程的数据对象接口，由`Event.dataTransfer`暴露，它有如下属性：
+
+#### dropEffect
+
+拖放过程中，在B上给用户的反馈，通常在`dragenter`事件中设置该属性，有几个值：
+
+-   copy，生成A副本，通常的反馈表现是将光标变成一个`+`的标志。
+-   move，移动A，通常的反馈表现是将光标变成一个`箭头`的标志。
+-   link，建立A的链接，通常的反馈表现是将光标变成一个`左镜像箭头`的标志。
+-   none，禁止拖放，通常的反馈表现是将源项变成灰色。
+
+> 除了`none`会禁止放置行为，其他值仅仅会产生视觉表现，实际的放置行为由`drop`事件的回调函数里决定。
+
+#### effectAllowed
+
+拖放过程中，在A上给用户的反馈，通常在`dragstart`事件中设置该属性，有几个值：
+
+-   none，不允许拖放。
+-   copy，生成A副本。
+-   link，可以在新地方建立与A的链接。
+-   move，可移动A。
+-   copyLink，允许 copy 或者 link 操作。
+-   copyMove，允许 copy 或者 move 操作。
+-   linkMove，允许 link 或者 move 操作。
+-   all，允许所有的操作。
+
+#### files
+
+拖放的文件列表，返回`File[]`，此功能可用于将文件拖动到浏览器。
+
+#### items
+
+拖放操作中，数据传输项的列表，返回`DataTransferItemList`。
+
+#### types
+
+拖放的数据格式，和`items`的数据顺序是一一对应的。
+
+还包括了一些方法：
+
+#### setData/getData/clearData
+
+设置、读取、清除拖拽的数据。
+
+#### setDragImage
+
+设置拖动中跟随鼠标的图片，默认是A的半透明图像。
+
+### DataTransferItem
+
+一个拖动项接口。
+
+### DataTransferItemList
+
+拖动项集合接口。
+
+### DragEvent
+
+拖动事件接口。
+
+## 属性和方法
+
+//
+
+## 事件
+
+元素拖放过程中有一系列事件，为方便描述，假设可拖动的元素为A，可被放置的元素是B。
+
+### dragstart
+
+A的拖动行为开始。
+
+### drag
+
+A被拖动中，它会被连续触发。
+
+### dragenter
+
+A被拖动进了B。
+
+### dragover
+
+A被拖动中，在B的区域内，它会被连续触发。
+
+### dragleave
+
+A被拖动离开了B。
+
+### drop
+
+A放在了B中。
+
+### dragend
+
+A的拖动行为停止，比如放开了鼠标。
+
+## 示例
+
+示例：https://taoliujun.github.io/example/web-api/HTML_Drag_and_Drop_API/index.html
+
+
+
+
diff --git a/src/source/_posts/web-api-Intersection_Observer_API.md b/src/source/_posts/web-api-Intersection_Observer_API.md
new file mode 100644
index 0000000..ba77e67
--- /dev/null
+++ b/src/source/_posts/web-api-Intersection_Observer_API.md
@@ -0,0 +1,103 @@
+---
+title: "Web Api - Intersection Observer"
+date: "2024-03-21T07:56:16Z"
+categories:
+  - [Web API]
+
+url: web-api-Intersection_Observer_API
+tags:
+  - webapi
+  - Intersection Observer
+
+---
+
+
+原文链接：[https://github.com/taoliujun/blog/issues/92](https://github.com/taoliujun/blog/issues/92)
+
+<!--hexo
+
+---
+url: web-api-Intersection_Observer_API
+tags:
+  - webapi
+  - Intersection Observer
+---
+
+-->
+
+# Intersection Observer
+
+> MDN: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+
+**Intersection Observer**用于检测目标元素与祖先元素或顶级文档的视口相交情况的变化。主要用于：
+
+-   图片懒加载。
+-   无限滚动。
+-   元素可见度埋点。
+
+## 接口
+
+### IntersectionObserver
+
+相交观察器接口，实例化的时候接受一个回调函数，和一个配置项。
+
+> 观察是异步的，所以回调函数执行时获取的相交信息，不是实时的。
+
+回调函数包含了两个入参：
+
+-   entries，`IntersectionObserverEntry`接口集合。
+-   observer，本实例。
+-   配置项包含属性：
+
+-   root，必须是被观察元素的祖先元素，或`null`表示为顶级文档。被观察元素将与该元素相交。
+-   rootMargin，计算交叉时偏移。默认为`0 0 0 0`。
+-   threshold，相交比例阈值，0-1，表示相交比例达到多少时会触发回调函数，默认为`0`。
+
+本接口实例返回了一系列属性，如`root`、`rootMargin`等，意义同入参配置项。还返回了一系列方法如下：
+
+-   observe，加入一个被观察元素。
+-   unobserve，移除一个被观察元素。
+-   disconnect，停止观察。
+-   takeRecords，返回被观察者集合的相交信息。
+
+### IntersectionObserverEntry
+
+某一时刻的相交信息，包含了一系列属性：
+
+-   boundingClientRect，被观察者的边界信息。
+-   intersectionRect，相交区域。
+-   intersectionRatio，相交比例。
+-   isIntersecting，是否相交。
+-   rootBounds，根元素的边界信息。
+-   target，被观察者元素。
+-   time，交叉触发时间差。
+
+## 属性和方法
+
+//
+
+## 事件
+
+//
+
+## 示例
+
+示例：https://taoliujun.github.io/example/web-api/Intersection_Observer_API/index.html
+
+1. 在高度400的父观察元素中，放3个高度300的被观察元素，触发阈值是`[0,1]`，表示被观察者的相交区域比例在0或1发生变化的时候，都会触发回到函数，初始化日志：
+
+![image](https://github.com/taoliujun/blog/assets/5689134/7c93addb-c0b1-4705-873d-fcd150550e22)
+
+元素1全部可见，元素2是0.33的区域可见，元素3则完全不可见。
+
+1. 滚动一点，元素1触发了1阈值。
+
+![image](https://github.com/taoliujun/blog/assets/5689134/791e2220-8837-4784-9139-094b9d6db4eb)
+
+3. 再滚动一点，元素1没有触发0阈值，所以日志中没有它；元素2触发了1阈值；元素3触发了0阈值。
+
+![image](https://github.com/taoliujun/blog/assets/5689134/28587ac6-29d7-4693-90fb-844d3b4f4239)
+
+
+
+
diff --git a/src/source/_posts/web-api-readme.md b/src/source/_posts/web-api-readme.md
index 0a38e37..aef0af2 100644
--- a/src/source/_posts/web-api-readme.md
+++ b/src/source/_posts/web-api-readme.md
@@ -25,7 +25,7 @@ tags:
 
 > 以 https://developer.mozilla.org/en-US/docs/Web/API 为基础，只实践W3C Recommendation状态的API。
 
-## 目录见
+## 目录见下
 
 
 <!--hexo-->
@@ -98,7 +98,7 @@ tags:
 
 ### H
 - [ ] [HTML DOM](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) DOM操作，包括form data、canvas、video等
-- [ ] [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) 拖放
+- [x] #91 ，[HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) 拖放
 - [ ] [HTML Sanitizer API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API) 安全的HTML字符串 *Experimental*
 - [ ] [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) 浏览器会话记录
 - [ ] [Houdini API](https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs) 扩展CSS的样式和布局
@@ -110,7 +110,7 @@ tags:
 - [ ] [Ink API](https://developer.mozilla.org/en-US/docs/Web/API/Ink_API) 调用系统的笔触合成功能 *Experimental*
 - [ ] [Input Device Capabilities API](https://developer.mozilla.org/en-US/docs/Web/API/InputDeviceCapabilities_API) *Experimental*
 - [ ] [Insertable Streams for MediaStreamTrack API](https://developer.mozilla.org/en-US/docs/Web/API/Insertable_Streams_for_MediaStreamTrack_API) 操作媒体流，比如合成音频、往视频里加一个帽子
-- [ ] [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) 监听元素是否出现在视口
+- [x] #92，[Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) 监听元素是否出现在视口
 
 ### K
 - [ ] [Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API) 访问物理键盘的信息、如布局等 *Experimental*